Gulp及其插件介绍

1 gulp介绍

gulp是一个前端的自动化构建工具，可以完成对前端资源的压缩、合并、格式化以及版本管理，也可以监听前端资源的变化去做一些自动化的构建工作

gulp也是一个基于nodejs的自动任务运行器，所以使用gulp的时候要有一套node的环境，这里对node的安装就不再赘述了。结合社区里好多优秀的gulp插件可以实现前端资源自动整合打包版本管理的功能，这里是gulp的官方: http://www.gulpjs.com.cn/

2 gulp 的安装

使用npm进行安装

npm install --global gulp 

（也可以装在本地，建议装在全局里)

3 gulp的基本使用

• gulp是以任务为单位的。如何执行一个任务

  1. 首先新建一个名叫gulpfile.js的文件，当在当前目录下运行“gulp”指令的时候就会执行gulpfile.js里的任务

  2. 引入gulp：

     var gulp = require(‘gulp’)；

  3. 编写一个任务：基本形式如下图所示，task函数的第一个变量是“任务名”，第二个参数为可选参数，是一个由其他任务名组成数组，设置这个任务执行前要执行的任务（其中的任务并发执行），第三个参数为任务执行的方法，就是该任务具体的操作。如下，编写了一个名叫default的任务（default任务为gulp默认任务）。

gulp.task(‘default’, function(){

    //在这里写default任务具体要做的事情
    console.log(‘gulp start’);
}

1. 执行gulp：可以直接运行“gulp”指令来执行default任务（当单独执行gulp的时候会执行default任务），如果想执行其他任务：“gulp ”，例如有两个任务叫dev和rev，执行“gulp dev rev”（先执行dev）

   • gulp大部分是对文件IO操作，gulp是对文件流进行操作，不同的操作之间用pipe链接起来，这样就不用生成中间文件，方便又快捷。如果像编写一个dev任务用来对目录下的index.html文件进行压缩并且复制到/views/目录下’，代码如下

   gulp.task(‘dev’, function(){
gulp.src(‘index.html’)
           .pipe(gulp_uglify())
           .pipe(gulp.dest(‘/views/index.html’))
})

   • gulp.src是把文件读取成文件流，使用pipe去链接下一个操作，也就是把读出来的文件流进行压缩（gulp_uglify的操作），然后再将文件流产递给下面的dest方法，gulp.dest是写文件，将文件流写在/views/index.html文件中。

4 gulp主要方法及插件介绍

主要参考：http://www.cnblogs.com/2050/p/4198792.html

4.1 gulp.src

这个是用来获取文件流的，将参数中匹配出来的文件分别读成文件流，语法如下

//globs参数是文件匹配的字符串，符合glob语法
gulp.src(globs[, options]); 

具体的glob语法：http://www.cnblogs.com/liulangmao/p/4552339.html

4.2 gulp.task

这个方法用来新建一个任务
第一个参数是任务名
第二个参数可选，是在这个任务执行之前要执行的任务的集合
第三个参数为任务的具体操作函数

gulp.task(name[, deps], fn)

gulp.task(‘fileCopy’, function(){

    gulp.src(“/src/*.js”)
        .pipe(gulp.dest(“/dist/”))

})
//将src下边的所有js文件复制到dist目录下

4.3 gulp.dest

这个方法是用来将文件流写到指定的位置，结合上面的例子，把所有js文件复制到dist目录下

gulp.dest(path[,options])

4.4 gulp.watch

这个方法是用来监听文件变化的，当文件变化要进行一些操作，算是gulp的一个特殊的任务。

gulp.watch(glob[, opts], tasks)

第一个参数是文件匹配的字符串，和src一样，也遵循glob语法
第二个参数可选，一般不用
第三个参数是文件变化之后要执行的任务的集合。

gulp.task(‘dispose’, function(){

    //dispose1的操作   
})；
gulp.task(‘reload’, function(){

    //dispose2的操作   
})；
gulp.watch(“/src/*.js”, [“dispose”, “reload”])
//当src目录下的js文件变化了，执行dispose和reload两个任务

4.5 插件

常见的插件请参考总结：http://www.cnblogs.com/zichi/p/6250504.html