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

一些經常使用的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
        }));
});