gulp 是一款实用的前端自动化构建工具，能够自动执行编译 scss 和 less，压缩 html、css、js 和 img，检测文件改变同时刷新浏览器等常见的前端任务，提高工作效率；

gulp_logo.png

1、安装 node.js

• 因为 gulp 是基于 Node.js 构建的，所以要使用 gulp 计算机要先安装 node.js；
• 下载完安装包后，运行并一直点下一步就能安装完成；
• 打开控制台，输入node -v 查看到版本号则安装成功；

2、全局安装 gulp

• 在命令行输入：$ npm install gulp-cli -g
• 完成之后输入：$ gulp -v
• 查看到版本号则安装成功；

3、初始化项目

在项目根目录输入：$ npm init
初始化完成会生成一个 package.json 文件，里面记录了对该项目的描述

package.json 属性说明

• name：项目名
• version：项目版本
• description：项目描述
• homepage：项目网站 url
• auther：作者信息（可以放在对象里）
• contributors：其他贡献者姓名
• dependencies：依赖包列表
• devDependencies：开发环境依赖包列表
• respository：包的仓库信息（一个包含 type 和 url 属性的对象，type 指 svn 或 git）
• main：模块 ID，一个指向你程序的主要项目
• keywords：关键字

4、局部安装 gulp

切换到项目根目录，输入：

$ npm install gulp --save-dev //或者向下面一样
$ npm install gulp -D

• -D 是 --save-dev 的缩写，两者意思完全一样（会将依赖信息添加到 package.json 的 devDependencies 中）
• 如果只写 --save（缩写为 -S），不加 -dev 则将依赖信息添加到 package.json 的 dependencies 中（一般保存在这里的是 express/ejs/body-parser 等等）

5、使用 gulp

使用 gulp 必须要会 Gulp API；

• 在 package.json 同级目录下创建一个 gulpfile.js 文件；
• 在 gulpfile.js 文件中可以开始设置 gulp 流程：

var gulp = require('gulp'); //载入 gulp
gulp.task('default', function() {
  // 编写默认任务
});

• 运行 gulp

$ gulp

gulp 后面不加任何参数则执行默认任务

6、gulp 常用插件

js 压缩插件：gulp-uglify

安装：

$ npm install --save-dev jshint gulp-jshint

使用：

var gulp = require('gulp');  //加载gulp
var jsmini= require('gulp-uglify');  //加载 js 压缩插件
gulp.task('jsmini', function () {
    gulp.src('app/script/js/*.js') // 获取文件，且 base 指向 app/script
        .pipe(jsmini()) // 压缩
        .pipe(gulp.dest('minijs/')); // 输出
});

小技巧：可以在文件路径前面加「!」来过滤掉不想操作的文件，！感叹号为排除模式。

css 压缩：gulp-minify-css

安装：

$ npm install --save-dev gulp-minify-css

使用：

var gulp = require('gulp');
var cssmini = require('gulp-minify-css');
gulp.task('cssmini', function () {
    gulp.src('app/style/css/*.css')
        .pipe(cssmini())
        .pipe(gulp.dest('minicss/'));
});

html 压缩：gulp-minify-html

安装：

$ npm install --save-dev gulp-minify-html

使用：

var gulp = require('gulp');
var htmlmini = require('gulp-minify-html');
gulp.task('htmlmini', function () {
    gulp.src('app/views/html/*.html')
        .pipe(htmlmini())
        .pipe(gulp.dest('minihtml/'));
});

js 代码检查：gulp-jshint

安装：

$ npm install --save-dev gulp-jshint

使用：

var gulp = require('gulp');
var jshint= require('gulp-jshint');
gulp.task('jshint', function () {
    gulp.src('app/script/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter());
});

文件合并：gulp-concat

安装：

$ npm install --save-dev gulp-concat

使用：

var gulp = require('gulp');
var concat= require('gulp-concat');
gulp.task('concat', function () {
    gulp.src('app/script/js/*.js') // 要合并的文件
        .pipe(concat('all.js')) // 合并匹配的文件并命名为 all.js
        .pipe(gulp.dest('dist/js'));
});

编译 Less：gulp-less

安装：

$ npm install --save-dev gulp-less

使用：

var gulp = require('gulp');
var less= require('gulp-less');
gulp.task('compile-less', function () {
    gulp.src('less/*.less')
        .pipe(less())
        .pipe(gulp.dest('dist/css'));
});

编译 Sass：gulp-sass

安装：

$ npm install --save-dev gulp-sass

使用：

var gulp = require('gulp');
var sass= require('gulp-sass');
gulp.task('compile-sass', function () {
    gulp.src('sass/*.sass')
        .pipe(sass())
        .pipe(gulp.dest('dist/css'));
});

压缩图片：gulp-imagemin

安装：

$ npm install --save-dev gulp-imagemin

使用：
可压缩 jpg、png、gif 等图片，压缩不同的图片要安装不同的 imagemin 插件
本例使用 png 压缩插件

$npm install --save-dev imagemin-pngquant

gulpfile.js

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
gulp.task('pngmin', function () {
    return gulp.src('app/images/*')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()] //使用pngquant来压缩png图片
        }))
        .pipe(gulp.dest('dist'));
});

自动刷新：gulp-livereload

安装：

$ npm install --save-dev gulp-livereload

使用：
需配合 chrome LiveReload 扩展插件使用
实现所监控文件代码变化时自动刷新页面的功能

var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload');
gulp.task('less', function() {
  gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('css'))
    .pipe(livereload());
});
gulp.task('watch', function() {
  livereload.listen(); //要在这里调用listen()方法
  gulp.watch('less/*.less', ['less']);  //监听目录下的文件，若文件发生变化，则调用less任务。
});