上一節(jié)講到了Gulp的入門使用，那么這一節(jié)我們會講一些常見插件的使用。

npm init命令初始化當(dāng)前文件夾后，在當(dāng)前文件夾新建gulpfile.js文件。當(dāng)前目錄下的所有操作流都在gulpfile.js文件中定義。

gulp自動化

gulp-uglify （JS壓縮）

gulp-uglify安裝:

npm install --save-dev gulp-uglify

gulp-uglify用來壓縮js文件，使用的是uglify引擎。

var gulp = require('gulp');  //加載gulp
var uglify = require('gulp-uglify');  //加載js壓縮

// 定義一個任務(wù) compass
gulp.task('compass', function () {
    gulp.src(['js/*.js','!js/*.min.js'])  //獲取文件，同時過濾掉.min.js文件
        .pipe(uglify())
        .pipe(gulp.dest('javascript/'));  //輸出文件
});

小技巧，第二個參數(shù)'！js/*.min.js'是用來過濾掉后綴為min.js，！感嘆號為排除模式。

gulp-minify-css（CSS壓縮）

gulp-minify-css安裝：

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

可以使用它來壓縮CSS文件

var gulp = require('gulp');
var minify = require('gulp-minify-css');

gulp.task('cssmini', function () {
    gulp.src(['css/*.css', '!css/*.min.css'])  //要壓縮的css
        .pipe(minify())
        .pipe(gulp.dest('buildcss/'));
});

gulp-minify-html（html壓縮）

gulp-minify-html安裝：

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

可以使用它來壓縮html文件.

var gulp = require('gulp');
var htmlmini = require('gulp-minify-html');

gulp.task('htmlmini', function () {
    gulp.src('*.html')
        .pipe(htmlmini())
        .pipe(gulp.dest('minihtml'));
})

gulp-jshint（JS代碼檢查）

gulp-jshint安裝：

// npm install --save-dev gulp-jshint 已過時
npm install --save-dev jshint gulp-jshint

可以用來檢查JS的代碼

var gulp = require('gulp');
var jshint = require("gulp-jshint");
 
gulp.task('jsLint', function () {
    gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter()); // 輸出檢查結(jié)果
});

gulp-concat（文件合并）

gulp-concat安裝：

npm install --save-dev gulp-concat

合并CSS與JS文件，減少http請求。

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

gulp-less（編譯Less）

gulp-less安裝：

npm install --save-dev gulp-less

把less文件轉(zhuǎn)換為css。

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

gulp-sass（編譯Sass）

gulp-sass安裝：

npm install --save-dev gulp-sass

把scss文件轉(zhuǎn)換為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'));
});

gulp-imagemin（壓縮圖片）

gulp-imagemin安裝：

npm install --save-dev gulp-imagemin

可以使用gulp-imagemin的插件來壓縮jpg、png、gif等圖片。（imagemin也是有插件的，是基于imagemin產(chǎn)生的插件，所以前綴是imagenin開頭）

壓縮png插件-imagemin-pngquant安裝：

$npminstall--save-devimagemin-pngquant

gulpfile.js:

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png圖片壓縮插件

gulp.task('default', function () {
    return gulp.src('src/images/*')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()] //使用pngquant來壓縮png圖片
        }))
        .pipe(gulp.dest('dist'));
});

gulp-imagemin的使用比較復(fù)雜一點，它本身也有很多插件（更多imagemin插件），這里只是簡單介紹一下，要想壓縮不同格式的圖片，必須對應(yīng)安裝不同的插件，這里只安裝了pngquant插件。按照nodejs的模塊化思想，每個require只包含一個功能，這樣就可以達(dá)到按需加載的目的。

gulp-livereload（自動刷新）

gulp-livereload安裝：

npm install --save-dev gulp-livereload

當(dāng)代碼變化時，它可以幫助我們自動刷新頁面，該插件最好配合谷歌瀏覽器，且要安裝livereload chrome extension擴展插件，否則無效。

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(); //要在這里調(diào)用listen()方法
  gulp.watch('less/*.less', ['less']);  //監(jiān)聽目錄下的文件，若文件發(fā)生變化，則調(diào)用less任務(wù)。
});

結(jié)語

gulp插件基本介紹到這里結(jié)束了，每個插件的具體用法還需要大家去探索，細(xì)節(jié)問題會比較多，遇到問題時最好能去看下英文的API手冊，這樣使用起來更加方便。有什么遺漏或錯誤，請多指教。