基於gulp的前端自動化開發構建

就前端的發展而言會愈來愈朝着後端的標準化靠近，後端的工程化以及模塊化都很成熟。基於這樣一個思路，開始探索如何優化目前的開發流程。而使用的工具就是gulp。

我的以爲gulp比較webpack更爲簡單實用，gulp依靠插件工做，webpack除了插件還有各類loader。固然這不是重點，重點是可以確實解決問題。目前公司對前端開發並無一個明確的要求，因此我的根據現有的開發流程以及開發認識，寫了以下的代碼。

目錄結構，src內部的相關文件和代碼，最終編譯到dist中，dist就是發佈的代碼

而後是package.json文件

 1 {
 2   "name": "gulpf",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1"
 8   },
 9   "author": "",
10   "license": "ISC",
11   "devDependencies": {
12     "babel-core": "^6.26.0",
13     "babel-preset-es2015": "^6.24.1",
14     "browser-sync": "^2.23.6",
15     "del": "^3.0.0",
16     "gulp": "^3.9.1",
17     "gulp-autoprefixer": "^5.0.0",
18     "gulp-babel": "^7.0.1",
19     "gulp-base64": "^0.1.3",
20     "gulp-clean": "^0.4.0",
21     "gulp-clean-css": "^3.9.3",
22     "gulp-htmlmin": "^4.0.0",
23     "gulp-imagemin": "^4.1.0",
24     "gulp-plumber": "^1.2.0",
25     "gulp-sass": "^4.0.1",
26     "gulp-spriter": "^1.1.5",
27     "gulp-uglify": "^3.0.0",
28   }
29 }

而後是gulpfile.js具體的代碼

 1 var gulp = require('gulp'),
 2     clean=require("gulp-clean"),  
 3     htmlmin = require('gulp-htmlmin'),
 4     sass=require('gulp-sass'),
 5     base64=require('gulp-base64'),
 6     imageMin = require('gulp-imagemin'),
 7     uglify = require('gulp-uglify'),
 8     clean_css = require('gulp-clean-css'),
 9     babel = require("gulp-babel"),
10     browserSync = require('browser-sync').create(),
11     plumber = require('gulp-plumber'),
12     autoprefixer = require('gulp-autoprefixer');
13 //編譯sass 
14 gulp.task('scss', function () {  
15     gulp.src('src/scss/*.scss')
16 
17         .pipe(plumber({ errHandler: e => {
18                 gutil.log(e); // 拋出異常
19             }}))  
20         .pipe(sass())
21         .pipe(base64({
22                 extensions:     ['svg','png','jpg','jpeg'],
23                 maxImageSize:   8*1024, // bytes 
24                 debug:          true
25             }))
26         .pipe(autoprefixer({
27             browsers: ['last 2 versions'],
28             cascade: false
29         }))
30         .pipe(clean_css())
31         .pipe(gulp.dest('dist/css/'))  
32 }); 
33 
34 //轉譯es6
35 gulp.task("es6",function(){
36     gulp.src('src/js/*.js')  
37         .pipe(babel({
38             presets: ['es2015']
39         }))
40         .pipe(uglify()) 
41         .pipe(gulp.dest('dist/js/')) 
42 })
43 
44 //清除圖片文件
45 gulp.task("cleanimgs",function(){
46     gulp.src("dist/imgs/",{read:false})
47     .pipe(clean())
48 })
49 //清除html文件
50 gulp.task("cleanhtml",function(){
51     gulp.src("dist/html/*.html",{read:false})
52     .pipe(clean())
53 })
54 //拷貝壓縮imgs
55 gulp.task("imgs",function(){
56     gulp.src('src/imgs/*')  
57         .pipe(imageMin({progressive: true})) 
58         .pipe(plumber({ errHandler: e => {
59                 gutil.log(e); // 拋出異常
60             }}))    
61         .pipe(gulp.dest('dist/imgs/')) 
62 })
63 //拷貝html
64 gulp.task("html",function(){
65     var options = {
66         removeComments: true,//清除HTML註釋
67         collapseWhitespace: true,//壓縮HTML
68         collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input />
69         removeEmptyAttributes: true,//刪除全部空格做屬性值 <input id="" /> ==> <input />
70         removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
71         removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
72         minifyJS: true,//壓縮頁面JS
73         minifyCSS: true//壓縮頁面CSS
74     };
75     gulp.src('src/*.html')
76         .pipe(htmlmin(options))
77         .pipe(gulp.dest('dist/'));
78 })
79 
80 //默認任務
81 gulp.task('default',['cleanimgs','scss','es6','imgs','cleanhtml','html'],function(done) {  
82  
83     browserSync.init({  
84         //指定服務器啓動根目錄  
85         server: "./dist"  
86     });  
87     //監聽sass編譯，修改了才刪除
88     gulp.watch("src/scss/*.scss", ['cleancss','scss']);
89     //監聽sass編譯  
90     gulp.watch("src/js/*.js", ['es6']);
91     //監聽圖片變化
92     gulp.watch("src/imgs/*", ['cleanimgs','imgs']);
93     //監聽html變化
94     gulp.watch("src/*.html", ['html']);
95     //監放任何文件變化，實時刷新頁面  
96     gulp.watch(["src/scss/*.scss","src/js/*.js","src/*.html","src/imgs/*"]).on('change',browserSync.reload);  
97 }); 

上述代碼實現的功能有

1，實時刷新瀏覽器，無論是html變化，css變化，仍是js變化

2，使用sass，轉譯sass爲css，而且自動加瀏覽器前綴而且壓縮

3，對es6進行轉譯而且壓縮

4，對小圖片進行base64轉化，減小http請求數

5，壓縮html文件內容

6，gulp-plumber這個插件的做用是，避免插件錯誤，終端gulp執行

固然，本代碼還有優化的餘地，好比雪碧圖的使用，好比合並相關的css和js文件，再好比給js文件和css加MD5進行增量式更新，放置緩存。而且直接替換html中代碼。

卻是嘗試了給js和css添加md5，可是最終效果不穩定，因此沒有寫文章中，本文就算是工程化構建代碼的一個1.0版本吧，至少對本身開發仍是有很大幫助的。後續會考慮研究加上md5.

本文結束。