开始使用Gulp

开始使用Gulp

接触gulp不多，感触却多。不过一句话：省了好多麻烦。如果你也是做web前端的，并且也想更加便捷高效的去完成自己的项目，那么可以尝试使用一下gulp。

什么是Gulp

首先看看gulp的定义： gulp是一个基于流的自动化构建工具。大家都明白什么是自动化 (就是懒人不用动手了呗)，构建工具就是说这是一个工具，并且是用来构建工程用的 。那么什么是基于流呢？如果知道unix的管道命令的人就会知道，把上一个操作的输出当做下一个操作的输入，形成一个连贯的过程。打个比方就好像是一个生产汽车的自动化车间，可能首先是生产出一个轮子，向下传递，然后下一道工序是加上车架，然后再下一道工序是喷漆等等。而这个流程线就是所谓的流了。
好吧！管他什么流呢！反正是自动化的肯定就是能帮我们省很多事的 (不过流这样的方式的确很便捷、高效)。

Gulp的安装

gulp是很简单的 ( 对于已有npm和基础的nodejs经验的同学)

$ npm install -g gulp

gulp实际上就和nodejs模块一样，安装方式相同，接下来你会发现，实际上这就是一个模块嘛！
在这里我们通过npm init 初始化一个项目。
然后在你的工程目录的根目录下创建一个gulpfile.js （文件名可不能变啊） ，写入如下内容:

var gulp = require('gulp'); // 引入gulp模块
gulp.task('mytask', function () {   
    /* 这里声明一个task，也就是gulp任务 */

    // do something here
    console.log('task run');
});

然后我们可以在命令行 (处于gulpfile.js同一目录下) 中使用gulp mytask 这样的命令运行一个gulp任务 ( 这里的mytask就是我们声明的任务 ) 。好吧！直到这里感觉就好像是前面声明了一个事件，然后在这里用一个命令触发了那个事件那么简单。而这个“事件”里面就是需要自动化处理的内容了。
关于gulp本身我们需要知道几个东西

• gulp.src() #原始文件路径
• gulp.dest() #文件导出的目标路径
• gulp.task() #gulp任务
• gulp.watch() #监控文件变动

具体API请参考： http://www.gulpjs.com.cn/docs/api/

Gulp插件

gulp任务运行后，就会执行一些操作。大多数时候gulp的操作能力是来自gulp插件，我们需要什么样的操作就引入什么样的插件，然后在gulp任务中按照我们的意愿来组织。
插件的引入方式也就是nodejs 模块的引入方式，用require即可。插件的安装方式也是用npm安装。

gulp-less

这个插件是用来编译less文件的。
安装此插件:

npm install gulp-less

gulpfile.js中写入

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('style', function() {
  return gulp.src('./main.less')
    .pipe(less())
    .pipe(gulp.dest('./dist/'));

});

在根目录下创建 main.less 这个文件并写入一定的less代码。然后我们用gulp style 运行一下这个style任务。发现我们的main.less 文件编译成了一个css文件，并且文件自动生成在我们设定的 ./dist/目录下，文件名为 main.css 。

gulp-autoprefixer

autoprefixer可以自动为css中的某些代码添加如 -moz- 、 -webkit- 等前缀，保证其兼容性。autoprefixer会参考Can I Use 网站的数据来判定哪些属性需要添加，又该添加什么样的前缀。
安装插件方法不变

npm install gulp-autoprefixer

我们在上一段代码的基础上做出改进
gulpfile.js :

var gulp = require('gulp');
var less = require('gulp-less');

// 导入autoprefixer模块
var autoprefixer = require('gulp-autoprefixer');

gulp.task('style', function() {
  return gulp.src('./main.less')
    .pipe(less())

    //  这里加一节pipe，做一个autoprefixer操作
    .pipe(autoprefixer())
    .pipe(gulp.dest('./dist/'));

});

这样一来，我们一个gulp style 后发现，这个main.less 文件除了自动编译了之外，还自动添加了一些必要的前缀，经过这两道工序后导出到目标文件夹中。
这就是所谓流式的操作了，要加工一个东西就一套工序加工完，而不是加工了一道工序，放回去，然后再取出来再加工，不觉得麻烦啊！直接全部加工好了再放回去不就省事儿多了嘛！省去好多拿和放的过程 (在gulp中指与磁盘的读写，不用频繁的读写磁盘，自然速度会有所提升)

gulp-minifycss

这是压缩css文件的一个gulp插件
安装 :

npm install gulp-minifycss

继续在上面的代码的基础上更改，继续我们的流式操作。
gulpfile.js :

var gulp = require('gulp');
var less = require('gulp-less');
var autoprefixer = require('gulp-autoprefixer');

// 导入minifycss模块
var minifycss = require('gulp-minifycss');

gulp.task('style', function() {
  return gulp.src('./main.less')
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(gulp.dest('./dist/'))

    //  这里加一节pipe，做一个minifycss操作
    .pipe(minifycss())
    .pipe(gulp.dest('./dist/'));    
});

这样的话我们编译后生成的css文件又多了一道压缩的过程，使得最终的css文件大小更小。

结语

好吧！这就是gulp的使用示例，其实还是很简单的，自己需要什么样的构建操作就找相应的gulp插件，然后通过同样简单的方式就可以插入到我们的构建流当中，自动构建好我们的项目。

参考与扩展

gulp中文网 : http://www.gulpjs.com.cn/
gulp plugin search (gulp插件搜索): http://gulpjs.com/plugins/
Gulp不完全入门教程 （推荐） : http://www.ido321.com/1622.html
use-gulp (推荐， 东西很全): https://github.com/Platform-CUF/use-gulp
gulp入门教程 ： http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/