使用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任務都寫在這個文件裏）：

 1 'use strict';
 2 
 3 var gulp = require('gulp');
 4 
 5 //壓縮html
 6 var htmlmin = require('gulp-htmlmin');
 7 gulp.task('html', function(){
 8     gulp.src('./*.html')
 9         .pipe(htmlmin({
10             collapseWhitespace: true,
11               removeComments: true
12         }))
13         .pipe(gulp.dest('dist'));
14 });
15 
16 //壓縮css
17 var cssnano = require('gulp-cssnano');
18 gulp.task('style', function(){
19     gulp.src(['./css/style.css','./css/piano.css'])
20         .pipe(cssnano())
21         .pipe(gulp.dest('dist/css'));
22 });
23 
24 //壓縮js
25 var uglify = require('gulp-uglify');
26 gulp.task('script', function(){
27     gulp.src(['./js/common.js','./js/piano.js'])
28         .pipe(uglify())
29         .pipe(gulp.dest('dist/js'));
30 });
31 
32 //同步代碼變化
33 gulp.task('dist', function(){
34     gulp.watch('./*.html', ['html']);
35     gulp.watch(['./css/style.css','./css/piano.css'], ['style']);
36     gulp.watch(['./js/common.js','./js/piano.js'], ['script']);
37 });

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