前端自動化Gulp工具常用插件

npm init命令初始化當前文件夾后，在當前文件夾新建gulpfile.js文件。當前目錄下的所有操作流都在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壓縮

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

小技巧，第二個參數'！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

可以用來檢查JS的代碼

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

gulp.task('jsLint', function () {
    gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter()); // 輸出檢查結果
});

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文件轉換為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文件轉換為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產生的插件，所以前綴是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的使用比較復雜一點，它本身也有很多插件（更多imagemin插件），這里只是簡單介紹一下，要想壓縮不同格式的圖片，必須對應安裝不同的插件，這里只安裝了pngquant插件。按照nodejs的模塊化思想，每個require只包含一個功能，這樣就可以達到按需加載的目的。

gulp-livereload（自動刷新）

---

gulp-livereload安裝：

npm install --save-dev gulp-livereload

當代碼變化時，它可以幫助我們自動刷新頁面，該插件最好配合谷歌瀏覽器，且要安裝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(); //要在這里調用listen()方法
  gulp.watch('less/*.less', ['less']);  //監聽目錄下的文件，若文件發生變化，則調用less任務。
});