前言
我了解到的前端自动化构建工具主要是grunt，gulp和webpack。其中grunt从效率来看，目前业内普遍认为已经可以用gulp替换掉了，我也就没有多作研究，而webpack似乎是未来前端的主流构建工具，不过因为工作中实际用到的还是gulp，所以webpack的坑先放一放了。
gulp上手并不难，而代码的自动化编译、压缩和构建也能节省我们不少时间，并且提前接触到这类工程化的东西我认为对于一个前端在项目代码上形成一定的组织架构思维也很有帮助，因此还是非常值得新手学习的。
准备工作
gulp的运行依赖于node.js，因此我们需要先安装node.js，不用被这个高大上的技术名词吓到，在官网下个安装包直接下一步下一步就好了。
注：我用的是win10系统，使用Mac的同学在终端下的操作应该是大同小异的。
node.js现在已经集成了npm的安装，所以安装完成之后我们已经可以直接使用相关命令了。打开命令行（WIN+R输入cmd，可以固定到任务栏或者丢一个快捷方式到桌面，在接触node.js之后会时常和命令行打交道了），输入node -v和npm -v可以分别查看node.js和npm的版本号以便确认是否安装成功。
感兴趣的同学可以再研究一下配置环境变量，以及npm全局安装和非全局安装，这里不再多说。
安装gulp
- 项目下安装gulp
命令行cd到想要安装的项目目录下执行npm install gulp - 全局安装gulp
命令行直接执行npm install gulp -g，如此gulp命令成为全局命令 - 有时会因为墙（万恶的GFW）的关系，导致npm在安装包时经常无反应或者失败，这时可以尝试从淘宝镜像安装
npm install gulp -g --registry=https://registry.npm.taobao.org
也可以直接设置npm的安装源，npm config set registry "https://registry.npm.taobao.org"
另外还可以尝试安装本土化的cnpm，npm install cnpm -g，然后通过cnpm来安装，就不多展开了。
先全局安装gulp，然后在一个项目中通过npm install gulp --save-dev再安装一次，前者是方便在命令行使用gulp，后者是为了方便管理gulp的插件
简要说明
<a href="http://www.gulpjs.com.cn/">gulp中文网</a>上的对其定义的介绍是“基于流的自动化构建工具”，但其实gulp本身只是提供了执行任务的API，而我们前端构建中基本的诸如编译sass/less，压缩js/css等等功能，其实在gulp里都是通过它的插件来完成的。
打开在项目目录中安装gulp的文件夹，会有gulpfile.js和package.json两个文件，前者就是我们写gulp任务代码的地方，gulp命令执行的就是这个js文件（即相当于在该路径下运行node gulpfile.js命令），后者是node.js安装模块的管理文件，安装gulp插件时带上--save-dev会将插件的版本信息写入进去（即依赖的包）。
先简单介绍下gulp提供的4个API，详细的参数可以在<a href="http://www.gulpjs.com.cn/docs/api/">gulp中文API</a>文档进行查询。
-
gulp.task()定义任务，运行gulp命令其实是执行了gulp default默认的任务，我们也可以运行特定的任务，如下面代码的test任务，运行gulp test命令即可。
gulp.task('default', function(){
console.log(‘这是默认的任务，运行gulp会执行它’);
});
gulp.task('test', function(){
console.log(‘这是一个测试任务’);
});
-
gulp.src()输入文件，返回一个stream以便通过pipe()函数来对文件进行操作，第一个参数就是文件的路径，使用glob表达式（先别管这是什么啦）来匹配，多个路径可以传入一个数组。 -
gulp.dest()返回输出文件，第一个参数是返回的文件路径，也是使用glob表达式，但只能是单个路径或者返回路径的一个函数。 -
gulp.watch()监听文件，也是用glob来匹配要监听的文件，然后执行相应的任务或回调。
网友评论