这里是我学习gulp的时候, 在网上查阅资料中, 相对使用较多的比较常见的好用的一些插件, 在这里记录下来!

自动加载插件

使用 gulp-load-plugins
安装：npm install --save-dev gulp-load-plugins
要使用gulp的插件，首先得用require来把插件加载进来，如果我们要使用的插件非常多，那我们的gulpfile.js文件开头可能就会是这个样子的：

1
2
3
4
5
6
7
8
9
10
11
var gulp = require('gulp'),
    //一些gulp插件,abcd这些命名只是用来举个例子
    a = require('gulp-a'), 
    b = require('gulp-b'),
    c = require('gulp-c'),
    d = require('gulp-d'),
    e = require('gulp-e'),
    f = require('gulp-f'),
    g = require('gulp-g'),
    //更多的插件...
    z = require('gulp-z');   1234567891011

虽然这没什么问题，但会使我们的gulpfile.js文件变得很冗长，看上去不那么舒服。gulp-load-plugins插件正是用来解决这个问题。
gulp-load-plugins这个插件能自动帮你加载package.json文件里的gulp插件。例如假设你的package.json文件里的依赖是这样的：

1
2
3
4
5
6
7
8
{
  "devDependencies": {
    "gulp": "~3.6.0",
    "gulp-rename": "~1.2.0",
    "gulp-ruby-sass": "~0.4.3",
    "gulp-load-plugins": "~0.5.1"
  }
}

然后我们可以在gulpfile.js中使用gulp-load-plugins来帮我们加载插件：

1
2
3
var gulp = require('gulp');
//加载gulp-load-plugins插件，并马上运行它
var plugins = require('gulp-load-plugins')();

然后我们要使用gulp-rename和gulp-ruby-sass这两个插件的时候，就可以使用plugins.rename和plugins.rubySass来代替了,也就是原始插件名去掉gulp-前缀，之后再转换为驼峰命名。
实质上gulp-load-plugins是为我们做了如下的转换：

1
2
plugins.rename = require('gulp-rename');
plugins.rubySass = require('gulp-ruby-sass');

gulp-load-plugins并不会一开始就加载所有package.json里的gulp插件，而是在我们需要用到某个插件的时候，才去加载那个插件。最后要提醒的一点是，因为gulp-load-plugins是通过你的package.json文件来加载插件的，所以必须要保证你需要自动加载的插件已经写入到了package.json文件里，并且这些插件都是已经安装好了的。

重命名

使用 gulp-rename
安装：npm install --save-dev gulp-rename
用来重命名文件流中的文件。用gulp.dest()方法写入文件时，文件名使用的是文件流中的文件名，如果要想改变文件名，那可以在之前用gulp-rename插件来改变文件流中的文件名。

1
2
3
4
5
6
7
8
9
10
11
var gulp = require('gulp'),
    rename = require('gulp-rename'),
    uglify = require("gulp-uglify");

gulp.task('rename', function () {
    gulp.src('js/jquery.js')
    .pipe(uglify())  //压缩
    .pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js
    .pipe(gulp.dest('js'));
    //关于gulp-rename的更多强大的用法请参考https://www.npmjs.com/package/gulp-rename
});

js文件压缩

使用 gulp-uglify
安装：npm install --save-dev gulp-uglify
用来压缩js文件，使用的是uglify引擎

1
2
3
4
5
6
7
8
var gulp = require('gulp'),
    uglify = require("gulp-uglify");

gulp.task('minify-js', function () {
    gulp.src('js/*.js') // 要压缩的js文件
    .pipe(uglify())  //使用uglify进行压缩,更多配置请参考：
    .pipe(gulp.dest('dist/js')); //压缩后的路径
});

js模块化构建

使用 gulp-browserify
安装：npm install --save-dev gulp-browserify

前端js代码的模块化一直是前端工程师之痛，因为JS在ES6之前不支持 import 或者 require 这类的模块加载能力，需要借助 一些工具，比如 requireJS、seaJS等。但是 有了 browserify，js代码代码只要编译之后，你可以大胆地 使用require()，就像在node环境里一样，而且它既支持commonJS规范，也支持非commonJS规范，但是为了提高准确率，还是自觉遵守commonJS规范吧！

1
2
3
4
5
6
7
8
9
var gulp = require('gulp');
var browserify = require('gulp-browserify');

// 处理javascript 
gulp.task('scripts', ['clean'], function() {
    return gulp.src('src/js/**/*.js')
        .pipe(browserify())
        .pipe(gulp.dest(JS_DEST));
});

css文件压缩

使用 gulp-minify-css
安装：npm install --save-dev gulp-minify-css
要压缩css文件时可以使用该插件

1
2
3
4
5
6
7
8
var gulp = require('gulp'),
    minifyCss = require("gulp-minify-css");

gulp.task('minify-css', function () {
    gulp.src('css/*.css') // 要压缩的css文件
    .pipe(minifyCss()) //压缩css
    .pipe(gulp.dest('dist/css'));
});

html文件压缩

使用 gulp-minify-html
安装：npm install --save-dev gulp-minify-html
用来压缩html文件

1
2
3
4
5
6
7
8
var gulp = require('gulp'),
    minifyHtml = require("gulp-minify-html");

gulp.task('minify-html', function () {
    gulp.src('html/*.html') // 要压缩的html文件
    .pipe(minifyHtml()) //压缩
    .pipe(gulp.dest('dist/html'));
});

js代码检查

使用 gulp-jshint
安装：npm install --save-dev gulp-jshint
用来检查js代码

1
2
3
4
5
6
7
8
var gulp = require('gulp'),
    jshint = require("gulp-jshint");

gulp.task('jsLint', function () {
    gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter()); // 输出检查结果
});

文件合并

使用 gulp-concat
安装：npm install --save-dev gulp-concat
用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等，这样就能减少页面的http请求数了

1
2
3
4
5
6
7
8
var gulp = require('gulp'),
    concat = require("gulp-concat");

gulp.task('concat', function () {
    gulp.src('js/*.js')  //要合并的文件
    .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"
    .pipe(gulp.dest('dist/js'));
});

less和sass的编译

less使用 gulp-less
安装：npm install --save-dev gulp-less

1
2
3
4
5
6
7
8
var gulp = require('gulp'),
    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

1
2
3
4
5
6
7
8
var gulp = require('gulp'),
    sass = require("gulp-sass");

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

图片压缩

可以使用 gulp-imagemin插件来压缩jpg、png、gif等图片。
安装：npm install --save-dev gulp-imagemin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png图片压缩插件
var cache = require('gulp-cache');  //只压缩修改的图片，没有修改的图片直接从缓存文件读取

gulp.task('default', function () {
    return gulp.src('src/images/*')
        .pipe(cache(imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true, //类型：Boolean 默认：false 多次优化svg直到完全优化
            svgoPlugins: [{removeViewBox: false}],  //不要移除svg的viewbox属性
            use: [pngquant()] //使用pngquant来压缩png图片   
        })))
        .pipe(gulp.dest('dist'));
});

gulp-imagemin的使用比较复杂一点，而且它本身也有很多插件，建议去它的项目主页看看文档

自动刷新

使用gulp-livereload插件，安装: npm install --save-dev gulp-livereload
当代码变化时，它可以帮我们自动刷新页面
该插件最好配合谷歌浏览器来使用，且要安装 livereload chrome extension 扩展插件,不能下载的请自行FQ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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']);
});

清理编译环境

使用 gulp-clean
安装 npm install gulp-clean --save-dev
提交代码之前我们需要把本地的编译环境清理干净。

1
2
3
4
var clean = require('gulp-clean');
gulp.task('clean',function(){
    return gulp.src(['dist/assets/css','dist/assets/js','dist/assets/img'],{read: false}).pipe(clean());
});

我们可以传入一个目录（或档案）阵列到gulp.src()。因为我们不需要读取已经被删除的档案，我们可以加入read:false 选项来防止gulp读取档案内容让它快一些。

我的gulpfile.js

下面的是我花了一下午研究出来的gulp前端自动化管理的最佳实践的gulpfile.js这个文件的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
'use strict';
/**
 * 1. CSS压缩 合并
 * 2. JS合并 压缩 混淆
 * 3. img复制
 * 4. html压缩
 */

// 导入工具包 require('node_modules里对应模块')
var gulp = require('gulp');  // gulp核心模块
var plugins = require('gulp-load-plugins')(); // gulp插件加载模块
var env = process.env.NODE_ENV || 'development';

// 在这里定义一些常量以供使用
var DEST = 'dist';
var HTML_DEST = 'dist';     // html编译目录
var CSS_DEST = 'dist/static/css';  // css编译目录
var JS_DEST = 'dist/static/js';    // js编译目录
var IMG_DEST = 'dist/static/img';  // img编译目录

// 处理html
gulp.task('minify-html', function () {
    var options = {
        removeComments: true, //清除HTML注释
        collapseWhitespace: true, //压缩HTML
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
        minifyJS: true, //压缩页面JS
        minifyCSS: true //压缩页面CSS
    };
    // 返回一个stream, 以实现异步执行
    return gulp.src('src/*.html') // 要压缩的html文件
        .pipe(plugins.htmlmin(options)) // 压缩html
        .pipe(gulp.dest(HTML_DEST))
        .pipe(plugins.livereload())
        .pipe(plugins.notify({
            message: 'minify-html task complete'
        }));
})

// 处理JS: 压缩合并混淆
gulp.task('scripts', function () {
    return gulp.src('src/static/js/*.js') // 要压缩的js文件
        .pipe(plugins.jshint()) // js代码规范
        .pipe(plugins.jshint.reporter('default')) // 输出检查结果
        .pipe(plugins.browserify()) // js模块化构建
        .pipe(plugins.uglify()) // 使用uglify进行压缩
        .pipe(gulp.dest(JS_DEST)) // 压缩后的路径
        .pipe(plugins.livereload())
        .pipe(plugins.notify({
            message: 'Scripts task complete'
        }));
});

// 处理css: 压缩合并
gulp.task('minify-css', function () {
    return gulp.src(['src/static/css/*.css', 'src/static/css/**/*.css']) // 要压缩的css文件
        .pipe(plugins.autoprefixer()) // 自动处理浏览器前缀
        .pipe(plugins.minifyCss())  // 压缩css
        .pipe(gulp.dest(CSS_DEST))
        .pipe(plugins.livereload()) 
        .pipe(plugins.notify({
            message: 'minify-css task complete'
        }));
});

// 处理图片
var pngquant = require('imagemin-pngquant');
gulp.task('images', function () {
    return gulp.src(['src/static/img/**/*', 'src/static/img/*'])
        .pipe(plugins.cache(plugins.imagemin({  // 只压缩修改的图片, 没修改的从缓存取
            optimizationLevel: 5,  // 优化等级(取值范围：0-7)  类型：Number  默认：3
            progressive: true,  // 无损压缩jpg图片  类型：Boolean 默认：false
            interlaced: true,  // 隔行扫描gif进行渲染 类型：Boolean 默认：false
            svgoPlugins: [{removeViewBox: false}],  //不要移除svg的viewbox属性
            use: [pngquant()]  // 使用pngquant深度压缩png图片的imagemin插件
        })))
        .pipe(gulp.dest(IMG_DEST))
        .pipe(plugins.livereload())
        .pipe(plugins.notify({
            message: 'Images task complete'
        }))
});

//  直接拷贝不需要处理的文件夹
gulp.task('copy', function () {
    return gulp.src('src/static/plugins/**/*')
        .pipe(gulp.dest('dist/static/plugins'))
});

// 清理dist目录
gulp.task('clean', function () {
    // read 设置为 false，则不会去读取文件
    return gulp.src([HTML_DEST, CSS_DEST, JS_DEST, IMG_DEST], { read: false })
        .pipe(plugins.clean())
        .pipe(plugins.notify({
            message: 'Clean task complete'
        }));
});

// 开启一个静态文件服务
gulp.task('server', function () {
    gulp.src('dist')
        .pipe(plugins.webserver({
            livereload: true,
            directoryListing: {
                path: 'index.html', //你web资源的起始页，在dist目录下
                enable: true
            },
            open: true  // 自动打开浏览器
        }));
});

// 监听文件变化
gulp.task('watch', function () {

    // 监听livereload
    plugins.livereload.listen();

    // 监听html
    gulp.watch('src/*.html', ['minify-html']);

    // 监听css
    gulp.watch(['src/static/css/*.css', 'src/static/css/**/*.css'], ['minify-css']);

    // 监听js
    gulp.watch('src/static/js/*.js', ['scripts']);

    // 监听图片
    gulp.watch(['src/static/img/**/*', 'src/static/img/*'], ['images']);
});

// build任务
gulp.task('build', function (cb) {
    plugins.sequence('clean', ['minify-html', 'scripts', 'images', 'minify-css', 'copy', 'watch'])(cb)
});

// 主任务
gulp.task('main', function (cb) {
    plugins.sequence('build', ['server'])(cb)
});

// 默认任务
gulp.task('default', ['main']);