cobish

项目本地后端开发语言是是基于 apache 的 php，域名为 ``cloud.xxx.com``。刚开始想实现浏览器 F5 自动刷新使用到的是 grunt 和 livereload 插件，gulp 也有对应的方法，参考[「gulp 教程之 gulp-livereload」](http://www.ydcss.com/archives/702)。但是，它需要浏览器安装 livereload 插件才能使用，chrome 的插件需要翻墙下载，firefox 的插件不起作用，其它的浏览器也无法实现自动刷新。 后来，我发现了[「Browsersync」](http://www.browsersync.cn/)。简直就像是找到了宝藏一样，同样支持 grunt 和 gulp。以下代码是使用代理去实现： ``` javascript var gulp = require('gulp'); var browserSync...

目前我的项目是一个页面一个 js 入口，比如登录页面的入口是 login.js，而主页面的入口是 home.js，它们都是在同一个目录下。 ``` bash ├─ src/ ├─ js/ ├─ lib ├─ require.min.js └─ jquery-1.11.1.min.js ├─ mod ├─ home.js └─ login.js └─ config.js ├─ gulpfile.js └─ package.js ```...

我在用了 Grunt 的一段时间内，越来越觉得自己离不开构建工具。但是，Grunt 的构建速度让我有点苦恼，即使是编译 sass 也需要花上一段时间。于是，我开始试用 gulp，结果意外地让我惊喜。 下面代码是使用 gulp 初次来编译 sass，由于一直都有点习惯了 Grunt 那编译速度单位为秒级别的速度，刚输入命令还没反应过来，就已经以毫秒级的速度编译完了。 ``` js var gulp = require('gulp'); var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcemaps'); // sass编译 gulp.task('sass:dev',...

当你正在某分支上进行开发，突然有一个紧急 bug 需要修复。可是你不想提交现在的代码，可以使用以下命令贮藏来暂时保存代码： ``` bash $ git stash ``` 查看贮藏命令： ``` bash $ git stash list ``` 紧急 bug 修复完了，你可以恢复到原来的分支，并恢复之前贮藏的代码，即未提交的代码。恢复贮藏有两种办法，一个是用 git stash apply 恢复，恢复后，stash 内容没有删除，需要用 git stash drop 来删除。另一种办法是用 git...

在[「Grunt的初次使用」](http://cobish.github.io/#/post/2)的基础上，这一篇继续对 Grunt 进行探索研究，例子参考[「grunt-project」](https://github.com/cobish/grunt-project)。这一次不再使用 php 进行 include 静态文件，而是在 html 里面进行 include。然后主要将 Grunt 用于两个大的方向，一个是用于开发期间，一个用于上线前期打包。使用到的插件可能有些更换。具体目录如下，src 目录用于开发与维护，dist 目录是打包后的项目，用于上线： ``` bash ├─ dist/ ├─ css/ ├─ images/ ├─ js/ └─ view/ └─ src/ ├─ css/...

 Facebook 最近公开的新的 JavaScript 包管理工具 [「yarn」](https://yarnpkg.com)，主要用来替代 node.js 自带的包管理工具 npm。LOGO 是上面这只正在和你找招呼的猫咪。它的口号是 Ultra Fast（快速）、Mega Secure（安全）、Super Reliable（可靠）。 ## 快速 yarn 的安装速度还是挺快的，虽然我对 npm 的安装速度也无所谓，毕竟依赖的包多了等待的时候会久一些。yarn 在下载软件包时，会进行更好的排序，避免“请求瀑布”，最大限度提高网络利用率。yarn 还会把下载后的包缓存起来，即把 node_modules 文件夹删除后再次使用安装，你会发现一下子就安装完成了。 ## 安全 不知你有没遇到过这样一种情况，原本在你的电脑上 npm install 后程序正常运行。过了一段时间有同事也在相同项目下...

在使用 Grunt 之前，项目静态文件几乎没进行压缩合并便直接放到线上，部分文件手动复制粘贴到某压缩网站进行压缩。没压缩合并的文件显然耗资源，手动压缩的文件后期不易维护，每修改一次便要重复复制粘贴，很不方便。Grunt 的加入帮忙解决了以上问题，让开发人员更加专注于开发。这里有一篇[「Grunt教程——安装Grunt」](http://www.w3cplus.com/tools/grunt-tutorial-installing-grunt.html)很好地教会我们如何搭建 Grunt 环境。 [「官网」](http://www.gruntjs.net/)的入门文档写得很详细，建议阅读并动手一遍。 网上有人会纠结该用 Grunt 还是 glup。个人认为，其实无论是 Grunt 还是 glup 都是构建工具，基本的功能都差不多，与其浪费时间纠结该使用哪个，还不如先开始选择一个使用，等过段时间熟悉后再考虑是否接触另一个，最后再比较出哪个更适合自己岂不更好。 ## 合并压缩静态资源 我开始使用 Grunt 的时候只是用来对 css，js 文件进行合并压缩，使用到的插件分别如下： ``` javascript "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-clean": "^0.6.0",...

公司项目最近从 SVN 更换到了 Git，不舍得那适应没多久的 SVN 分支开发，但毕竟不排斥更好的工具。大家都说 Git 比 SVN 好用，虽然在我接触 Git 与 SVN 的时间内，我也下意识觉得 Git 好用，但真正运用到实际开发项目的也就只有 SVN，Git 只是独自一人拿来过家家而已，总算是有机会尝试比较一下了。 SVN 图形操作有 TortoiseSVN，而 Git 图形操作有 SourceTree，相比较来说，TortoiseSVN 总是要右键去提交更新查看，log 也只是显示了提交情况，而 SourceTree 有一个完整的界面，提交合并情况也显示得很清晰明了，特别是分支的操作情况。不仅如此，Git 还有简单强大的命令行，有大部分的人都会选择用 Git...

大学期间我第一次做项目的时候，当时的三个人分别做不同的功能，互不影响。过了一个寒假，大家约好到一个地方把代码整合到一起。那时大家都没有版本控制的概念，经过了一下午的整合，总算是把项目能够完整成功地运行起来了，后来那个项目也一直没有用到版本控制。我的两个同学比我机智，他们合作一起做毕业设计，一个前端，一个后端。亏他们想得出拿云盘来进行协作，开发完的代码就上传到云盘，另一半则同步一下云盘，想想也是醉了。 后来，我接触过大部分项目都用的是 SVN 来进行版本控制，不知大家跟我一样是否只是用 SVN 来备份代码或协作。是的，在 SVN 的使用中，大部分人都只用到了其中的 trunk，大家都在 trunk 上面修改提交协作。人少项目小时还勉强没什么问题。一旦项目大了人多了，问题也就慢慢地浮现出来。 项目大了，当你正在 trunk 上开发一个新功能的时候，突然被告知要修复一个紧急 bug，这时怎么办？bug 如果不涉及到现在开发功能的文件还好，改完 bug 的文件直接上线即可。但是如果涉及到正在开发的文件，那么你只能先默默地注释掉新功能的代码，代码如果多且分布广的话真的会吐血。 参与项目的人数多了，都在 trunk 上开发，今天我开发的功能要上线，可是其他的同事提交了开发一半的代码，代码混在一起就很难放心地上线了。同事之间每天的不断代码提交会增加项目的不稳定性，没有人会在项目不稳定的时候就把它放到线上给用户使用，这不是给自己挖坑吗。但是，我真的经历过，想起那时也真是愉快的时光。那时赶着项目上线，并且没有测试，一声令下就上线。用户就是我们的测试，每天都有许多的用户打电话过来反馈这里有问题那里有问题，不过这段时光总算是过去了。 以上罗列的种种问题就是为了接下来做铺垫。分支可以解决以上等大部分问题，那么，分支又是什么？创建一条新的分支可以理解为把代码再复制一份，在新分支上面的改动不影响原来代码的运行。并且该分支上的代码，也就是复制的那一份的代码也会被添加到版本库中被管理，还可以进行分支合并的操作将代码们进行合并。比如，你被指派去开发一个功能，这个功能可能得花上一段时间的开发，为了不影响其他同事在原来功能上的开发，你可以拉去一条新的分支进行功能的开发，功能开发完毕便可以合并到原来的主干上。 大部分用 SVN 进行版本控制的开发者都很少甚至不用 SVN 的分支，有的人说没必要，有的人说不会，有的人说合并很麻烦有很多的冲突，这些都是借口。在稍微有点规模的项目中，只有一条主干的 trunk 是无法保证项目的稳定性，至少得保证 trunk...

在接触到 js 模板引擎之前，我都是使用字符串拼接的方式来操作 html 的标签。例如通过 Ajax 获取到以下一个对象，把它拼接起来显示到网页上。用久了这一种方式便会发现它的缺点。代码看起来不美观，js 代码里包含着大量的 html 代码；代码不易维护，html 标签没有合适的缩进。如果再 if 等判断语句只会让拼接代码更加的复杂。 ``` js var data = { title: '四大名著', list: ['西游记', '三国演义', '水浒传', '红楼梦'] }; // 拼装html代码块 var...