使用Gulp進行代碼壓縮的步驟以及配置

1、安裝步驟

　　1.首先肯定是否安裝了node.js，若是未安裝，請先安裝node.js；

　　2.肯定是否安裝了包管理工具npm，如未安裝請安裝：npm install npm -g；

　　3.安裝gulp：  npm install gulp --save-dev；（至於爲何是--save-dev，由於咱們只是在開發環境中會用到，生產發佈是用不到它的）

　　4.安裝用於html、css、js代碼壓縮經常使用的插件，分別爲：gulp-htmlmin、gulp-cssnano、gulp-uglify；

　　　　npm install --save-dev gulp-htmlmin;

　　　　npm install --save-dev gulp-cssnano;

　　　　npm install --save-dev gulp-uglify;

　　5.在根目錄新建文件 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(['./src/app/*.html'])
 9         .pipe(htmlmin({
10             collapseWhitespace: true,//壓縮HTML
11             removeComments: true,//清除HTML註釋
12             removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
13             removeStyleLinkTypeAttributes: true,//刪除<link>的type="text/css"
14             minifyJS: true,//壓縮頁面JS
15             minifyCSS: true//壓縮頁面CSS
16         }))
17         .pipe(gulp.dest('dist/src/app'));
18 });
19 
20 //壓縮css
21 var cssnano = require('gulp-cssnano');
22 gulp.task('style', function(){
23     gulp.src(['./css/*.css'])
24         .pipe(cssnano())
25         .pipe(gulp.dest('dist/css'));
26 });
27 
28 //壓縮js
29 var uglify = require('gulp-uglify');
30 gulp.task('script', function(){
31     gulp.src(['./src/static/*.js'])
32         .pipe(uglify({
33             mangle: false// 跳過函數名，使其不被壓縮，函數名也壓縮可改成true
34         }))
35         .pipe(gulp.dest('dist/src/static'));
36 });
37 
38 //同步代碼變化
39 gulp.task('dist', function(){
40     gulp.watch(['./src/app/*.html'], ['html']);
41     gulp.watch(['./css/*.css'], ['style']);
42     gulp.watch(['./src/static/*.js'], ['script']);
43 });
44 
45 gulp.task("default", ["html","style","script","dist"]);

　　6.初始化獲得文件package.json：npm init ；（簡單點一路回車便可）

　　7.一切穩當，命令行執行gulp，等待完成便可。

　　注：（1）.這裏的配置進行了適當簡寫，若是項目不是新創建的，而是在項目原有基礎上增長頁面，爲了提高壓縮效率能夠不匹配全部的html、css、js文件，只配置你新增的文件便可，以下例子：

 1 //壓縮html
 2 var htmlmin = require('gulp-htmlmin');
 3 gulp.task('html', function(){
 4     gulp.src(['./src/app/level2HK.html','./src/app/index.html'])
 5         .pipe(htmlmin({
 6             collapseWhitespace: true,//壓縮HTML
 7             removeComments: true,//清除HTML註釋
 8             removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
 9             removeStyleLinkTypeAttributes: true,//刪除<link>的type="text/css"
10             minifyJS: true,//壓縮頁面JS
11             minifyCSS: true//壓縮頁面CSS
12         }))
13         .pipe(gulp.dest('dist/src/app'));
14 });

　　　　gulp.src(['路徑a','路徑b'])中是支持數組形式入參的，固然也能夠直接字符串入參 gulp.src('路徑a')

　　　　（2）本處只列舉了代碼的初步壓縮模塊，適合剛剛接觸gulp的初學者，其實gulp還有其餘不少優秀的插件，如代碼的合併、混淆等等插件，用戶能夠根據本身的項目實際須要進行安裝並進行相應配置；
　　　　如：代碼合併插件　　　　gulp-concat；
　　　　　　文件名稱修改插件　　gulp-rename；
　　　　　　圖片壓縮插件　　　　gulp-imagemin；
　　　　　　sass文件編譯插件　 gulp-sass；
　　　　　　檢查改變狀態　　　　gulp-changed；
　　　　以下對js的壓縮、合併、修更名稱：
　　

1 gulp.task('scripts', function() {
2     return gulp.src('./src/static/*.js')
3         .pipe(concat('main.js'))    //合併全部js到main.js
4         .pipe(gulp.dest('./src/static')) //輸出main.js到文件夾 
5 　　　　 .pipe(rename({suffix: '.min'})) //rename壓縮後的文件名 
6 　　　　 .pipe(uglify()) //壓縮 
7 　　　　 .pipe(gulp.dest('./src/static')); //輸出 
8 });

　　　　以下對圖片的壓縮配置：　　

 1 // 壓縮圖片  
 2 gulp.task('images', function () {  
 3     gulp.src('./src/images/*.*')  
 4         .pipe(changed('dist/images', {hasChanged: changed.compareSha1Digest}))  
 5         .pipe(imageMin({  
 6             progressive: true,// 無損壓縮JPG圖片  
 7             svgoPlugins: [{removeViewBox: false}]// 不移除svg的viewbox屬性  
 8         }))  
 9         .pipe(gulp.dest('dist/images'))  
10         .pipe(browserSync.reload({stream:true}));  
11 });