前端自動化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任務。
});