gulp常用插件及其使用(更新2016-05-19)

为什么80%的码农都做不了架构师？>>>   

一些常用的gulp插件

gulp的插件数量虽然没有grunt那么多，但也可以说是应有尽有了，下面列举一些常用的插件。

1 重命名

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

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
});

2 js文件压缩

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

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')); //压缩后的路径
});

3 css文件压缩

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

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'));
});

4 html文件压缩

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

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'));
});

5 js代码检查

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

var gulp = require('gulp'),
    jshint = require("gulp-jshint");

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

6 文件合并

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

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'));
});

7 less和sass的编译

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

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

var gulp = require('gulp'),
    sass = require("gulp-sass");

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

8 图片压缩

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

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');

gulp.task('default', function () {
    return gulp.src('src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist'));
});

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

9 自动刷新

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

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']);
});

10 sourcemaps/css自动前缀

安装：npm install --save-dev gulp-sourcemaps

安装：npm install --save-dev gulp-autoprefixer

var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');

...
gulp.task('demo', function() {
    var css = [...];
    gulp.src(css)
        .pipe(sourcemaps.init())
        .pipe(concat("styles.css"))
        .pipe(cssnano())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./www/build'));   
});

11 base64

安装：npm install --save-dev gulp-base64

var base64 = require('gulp-base64');

gulp.task('style', function() {
    var css = ['./www/libs/am-touch/amazeui.touch.css',
        "./www/css/main.css",
        "./www/css/page.main.css",
        "./www/css/checks.css",
        "./www/css/fullPageLoading.css",
        "./www/css/loading.css"
    ];
    return gulp.src(css)
        .pipe(concat("styles.css"))
        .pipe(autoprefixer())
        .pipe(base64({
            baseDir: "./www/css",
            extensions: ['png'],
            maxImageSize: 20 * 1024, // bytes
            debug: false
        }))
        .pipe(cssnano())
        .pipe(gulp.dest('./www/build'));
});

12 clean

安装：npm install --save-dev gulp-clean

var clean = require('gulp-clean');
gulp.task('clean', function() {
    return gulp.src(['./www/build/*'])
        .pipe(clean({
            force: true
        }));
});

13 plumber

安装：npm install --save-dev gulp-plumber

错误捕获,防止出错后中断gulp

var clean = require('gulp-clean');
gulp.task('clean', function() {
    return gulp.src(['./www/build/*'])
        .pipe(clean({
            force: true
        }));
});

转载于:https://my.oschina.net/wolfx/blog/673905