使用gulp進行代碼壓縮

gulp是一個很不錯的前端自動化工具，可以幫我們完成一些重復性操作，比如html、css和js代碼的壓縮、合並、混淆等，雖然這些操作可以通過一些在線工具幫我們實現，但不斷重復地復制粘貼肯定比不上一句命令來得方便，所以編寫gulp任務可以大大提高程序員的開發效率。

因為gulp依賴於node環境，所以想使用gulp必須先安裝好node。另外gulp本身是一個輕量化內核，自身擁有的api不多，所以很多功能需要依賴插件完成。關於html、css和js代碼壓縮的插件有三個，分別是gulp-htmlmin、gulp-cssnano、gulp-uglify，這三個插件的具體說明可以在npm的官網npmjs.com上查看。

在項目根目錄下安裝：

npm install --save-dev [xxx]

因為gulp和它的插件都是開發階段使用的，整個項目並不依賴它們，所以盡量加上“-dev”。

一下是gulpfile.js主文件（所有gulp任務都寫在這個文件里）：

'use strict';

var gulp = require('gulp');

//壓縮html
var htmlmin = require('gulp-htmlmin');
gulp.task('html', function(){
    gulp.src('./*.html')
        .pipe(htmlmin({
            collapseWhitespace: true,
              removeComments: true
        }))
        .pipe(gulp.dest('dist'));
});

//壓縮css
var cssnano = require('gulp-cssnano');
gulp.task('style', function(){
    gulp.src(['./css/style.css','./css/piano.css'])
        .pipe(cssnano())
        .pipe(gulp.dest('dist/css'));
});

//壓縮js
var uglify = require('gulp-uglify');
gulp.task('script', function(){
    gulp.src(['./js/common.js','./js/piano.js'])
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

//同步代碼變化
gulp.task('dist', function(){
    gulp.watch('./*.html', ['html']);
    gulp.watch(['./css/style.css','./css/piano.css'], ['style']);
    gulp.watch(['./js/common.js','./js/piano.js'], ['script']);
});

執行任務直接在cmd中輸入gulp [任務名]