gulp常用插件总结

近期在学习使用gulp，通过写这篇总结文章，让自己加深对gulp常用插件的印象。

1. gulp-refresh

插件地址：gulp-refresh

注：1.该插件需要配合Chrome浏览器的扩展程序LiveReload使用。
2.测试文件需要在服务器上打开。
3.将LiveReload的空心圈点击成实心圈。

插件作用：实现浏览器自动刷新。
使用方法：1.安装gulp-refresh 2.安装完成以后，在gulpfile.js文件中引用。

npm install --save-dev gulp-refresh

var gulp = require('gulp'),
    refresh = require('gulp-refresh');
gulp.task('refresh', function() {
    return gulp.src('app.html')
        .pipe(refresh());
});
gulp.task('watch', function() {
    refresh.listen();
    gulp.watch('app.html', ['refresh']);
});

3.运行gulp watch，执行任务(task):watch,监听app.html文件。当文件保存时，执行任务(task)：refresh，重新加载app.html，浏览器通过LiveReload监听，实现浏览器自动刷新。

2. gulp-htmlmin

插件地址：gulp-htmlmin

插件作用：压缩html文件。
使用方法：1.安装gulp-htmlmin 2.安装完成以后，在gulpfile.js文件中引用。

npm install --save-dev gulp-htmlmin

var gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin');
gulp.task('minify-html', function() {
    return gulp.src('app.html') // 源文件
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('dist')); // 压缩后的文件放到该路径下
});

3.运行gulp minify-html，对文件进行压缩。

4.压缩后的路径和文件

3. gulp-clean-css

插件地址：gulp-clean-css

插件作用：压缩css文件。
使用方法：1.安装gulp-clean-css 2.安装完成以后，在gulpfile.js文件中引用。

npm install --save-dev gulp-clean-css

var gulp = require('gulp'),
    cleanCss = require('gulp-clean-css');
gulp.task('minify-css', function() {
    return gulp.src('css/*.css') // 选中css文件夹下的所有css文件
        .pipe(cleanCss({compatibility: true}))
        .pipe(gulp.dest('dist/css')); // 压缩后的文件放到该路径下
});

3.运行gulp minify-css，对文件进行压缩。

4.压缩后的路径和文件。

4. gulp-uglify

插件地址：gulp-uglify

插件作用：压缩js文件。
使用方法：1.安装gulp-uglify 2.安装完成以后，在gulpfile.js文件中引用。

npm install --save-dev gulp-uglify

var gulp = require('gulp'),
    uglify = require('gulp-uglify');
gulp.task('minify-js', function() {
    return gulp.src('js/*.js') // 选中js文件夹下的所有js文件
        .pipe(uglify())
        .pipe(gulp.dest('dist/js')); // 压缩后的文件放到该路径下
});

3.运行gulp minify-js，对文件进行压缩。

4.压缩后的路径和文件

5.gulp-rename

插件地址：gulp-rename

插件作用：重命名文件。
使用方法：1.安装gulp-rename 2.安装完成以后，在gulpfile.js文件中引用。

npm install --save-dev gulp-rename

var gulp = require('gulp'),
    rename = require('gulp-rename');
gulp.task('rename', function() {
    return gulp.src('app.text') // 选中要修改名字的文件
        .pipe(rename({
            dirname: 'text/rename', // 路径名
            basename: 'filename', // 文件名（）
            prefix: 'prefix-', // 文件名前缀
            suffix: '-suffix', // 文件名后缀
            extname: '.md', // 文件扩展名
        }))
        .pipe(gulp.dest('dist')); // 修改完成的文件放到该路径下
        // 最终文件rename后路径为： ./dist/text/rename/prefix-filename-suffix.md
});

3.运行gulp-rename，重命名文件。

4.重命名后的文件名和路径。

6.gulp-concat

插件地址：gulp-concat

插件作用：将多个文件合并为一个文件。
使用方法：1.安装gulp-concat 2.安装完成以后，在gulpfile.js文件中引用。

npm install --save-dev gulp-concat

var gulp = require('gulp'),
    concat = require('gulp-concat');
gulp.task('concat', function() {
    return gulp.src('js/*.js') // 选中js文件卡下的所有js文件
        .pipe(concat('all.js')) // 将选中的文件合并成一个文件 all.js
        .pipe(gulp.dest('dist')); // 将文件放到该路径下
});

3.运行gulp-concat，合并文件。

4.合并后的文件

7.gulp-autoprefixer

插件地址：gulp-autoprefixer

插件作用：自动添加css浏览器前缀。
使用方法：1.安装gulp-autoprefixer 2.安装完成以后，在gulpfile.js文件中引用。

npm install --save-dev gulp-autoprefixer

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer');
gulp.task('autoprefix', function() {
    return gulp.src('css/*.css') // 选中css文件夹下的所有文件
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist/css')); // 将文件放到该路径下
});

3.运行gulp autoprefix

4.生成文件

综合使用

这里将综合使用多个插件，能更加理解gulp基于流的概念。

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    sass = require('gulp-sass'),
    cleanCss = require('gulp-clean-css'),
    autoprefixer = require('gulp-autoprefixer'),
    rename = require('gulp-rename');
gulp.task('test', function() {
    gulp.src('sass/*.scss') // 选中sass文件夹下的所有scss文件
        .pipe(concat('all.scss')) // 合并成all.scss
        .pipe(sass().on('error', sass.logError)) // .scss => .css
        .pipe(autoprefixer({ // 添加浏览器前缀
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(cleanCss({ compatibility: 'ie8' })) // 压缩css
        .pipe(rename({ suffix: '.min' })) // 重命名css all.css => all.min.css
        .pipe(gulp.dest('dist/css/')); // 保存到该目录下
});

源文件。