Gulp和Browserify了解和简单使用

    终于抓住了本周的尾巴，来完成每周一篇的学习记录。这周的身体状况依旧不太良好，在看视频学习时不能边学边实践，只能把不容易理解的地方翻来覆去多看几遍。但是本周的学习感觉还是收获颇丰，因为了解了一个之前不曾了解过的内容——自动化构建。

    回想之前做过的项目，在使用vue之前，用seajs实现模块化开发。使用vue后，直接用cli脚手架初始化项目，发布项目时也不过一个build命令就解决了，也不曾了解过究竟是怎样实现自动化构建的。看了使用Gulp和Browserify实现自动化构建的视频后，终于对自动化构建的过程有所了解。虽然目前在vue项目中使用的是webpack，但原理都是相通的。

    Gulp是基于流的自动化构建工具。使用了流就可以像管道一样，将一个步骤的处理结果直接输送到下一个步骤，一切数据都保存在内存之中，从而减少I/O，提高了构建工具的性能。可以配合各种插件进行编译、压缩。安装命令如下：

$ npm install -g gulp

    全局安装后，再作为项目的开发依赖安装：

$ npm install --save-dev gulp

    安装完成后，在项目根目录中创建一个gulpfile.js文件

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

    接下来在gulpfile文件中，就可以通过各种插件和API实现我们想要的构建步骤了。其中一个重要的插件就是browserify。

    使用browserify可以实现js的模块化加载，安装命令如下：

npm install -g browserify

    在gulpfile中引入：

var browserify = require('browserify')

    使用browseriry的watchify可以监听文件变化，当监听到文件变化时，自动执行构建命令：

gulp.watch(['assets/js/*.js'], function({  
 //当任何一个js文件发生变化时，都会触发构建命令
})