Gulp:基于流的自动化构建工具

前言

先说说为何会使用gulp。

当你沉醉于撸代码之时，是否想过正规的前端代码须要走哪些流程，复杂的不说了，有几点想必你也思考过，好比：

一、代码的压缩合并、图片压缩怎么搞；

二、代码校验，是否规范；

三、Less是什么鬼？咋用呢？

做为一名新世纪富有朝气的九零后大军一员，虽为码农，心却蓬勃啊。对于新技术和新工具必然有着极大的兴趣，gulp在当下已不算太新鲜的技术，这次正逢机会，必然拿来练练手。

咱们第四迭代构建工具用的是Grunt，此次第五迭代采用gulp，相对于前者，gulp属于晚辈，易于使用，配置简单，上手快，速度快。

一、什么是Gulp

Gulp.js是一种基于流，代码优于配置的新一代构建工具。 官网给出的解释是：一、自动化； 二、平台移植性； 三、富生态系统；四、简单，详细的解释咱们后面讲。

二、Gulp特性

· 易于使用

遵循代码优于配置策略，维护Gulp更像是写代码，Gulp可让简单的任务简单，复杂的任务更可管理；

· 构建快速

优于Gulp基于Node.js，经过流式操做，减小频繁的IO操做，更快构建项目（Grunt即是频繁IO）；

· 插件高质

Gulp 有严格的插件指导策略，确保插件能简单高质的工做。而且你可使用NPM享用超过2000个插件，甚至能够本身开发并发布；

· 易于学习

构建就像流管道同样，轻松加愉快。少许的API，使用起来so easy；

三、Gulp安装和使用

一、Gulp是基于Node.js的，因此先安装Node.js，这里不作赘述，经过英文官网下载或者中文网下载安装。

二、确保正确安装了Nodejs环境，而后用如下命令全局方式安装Gulp：

$ npm install gulp -g

三、若是想在安装的时候把gulp写进项目package.json文件的依赖中，则能够加上-save-dev：

$ npm install --save-dev gulp

四、在项目根目录建立gulpfile.js文件：

var gulp = require('gulp');

gulp.task('default', function() {

    console.log('hello world');

});

五、运行Gulp：

$ gulp

默认任务（名为'default'）将被执行，控制台输出 hello world。

若是须要运行指定任务，使用 gulp taskname命令。

四、Gulp API

使用gulp仅需知道4个API便可：gulp.task()，gulp.src()，gulp.dest()，gulp.watch()，因此很容易就能掌握，下面针对这四种作一个简单介绍：

gulp.src(globs[, options])

gulp.src() 方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息，本文暂不对文件流进行展开，你只需简单的理解能够用这个方法来读取你须要操做的文件就好了，globs 参数是文件匹配模式(相似正则表达式)，用来匹配文件路径(包括文件名)，固然这里也能够直接指定某个具体的文件路径。当有多个匹配模式时，该参数能够为一个数组。 options 为可选参数。一般状况下咱们不须要用到，暂不考虑。

gulp.dest(path[,options])

gulp.dest() 方法是用来写文件的，path 为写入文件的路径，options 为一个可选的参数对象，一般咱们不须要用到，暂不考虑。

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

gulp.task 方法用来定义任务， name 为任务名， deps 是当前定义的任务须要依赖的其余任务， 为一个数组。当前定义的任务会在全部依赖的任务执行完毕后才开始执行。 若是没有依赖，则可省略这个参数， fn 为任务函数，咱们把任务要执行的代码都写在里面。该参数也是可选的。

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

gulp.watch() 用来监视文件的变化，当文件发生变化后，咱们能够利用它来执行相应的任务，例如文件压缩等。 glob 为要监视的文件匹配模式，规则和用法与 gulp.src() 方法中的glob相同。opts 为一个可选的配置对象，一般不须要用到，暂不考虑。 tasks 为文件变化后要执行的任务，为一个数组。

五、经常使用插件

1. 编译Less (gulp-less)

2. Autoprefixer (gulp-autoprefixer)

3. 缩小化(minify)CSS (gulp-minify-css)

4. JSHint (gulp-jshint)

5. 拼接 (gulp-concat)

6. 丑化(Uglify) (gulp-uglify)

7. 图片压缩 (gulp-imagemin)

8. 即时重整(LiveReload) (gulp-livereload)

9. 清理档案 (gulp-clean)

10. 图片快取，只有更改过得图片会进行压缩 (gulp-cache)

11. 更动通知 (gulp-notify)

插件搜索：http://gulpjs.com/plugins/

插件安装（用less举例）：$ npm install gulp-less（安装更多只需拼接其后）