基于gulp的前端自动化开发构建

就前端的发展而言会越来越朝着后端的标准化靠近，后端的工程化以及模块化都很成熟。基于这样一个思路，开始探索如何优化目前的开发流程。而使用的工具就是gulp。

个人觉得gulp比较webpack更为简单实用，gulp依靠插件工作，webpack除了插件还有各种loader。当然这不是重点，重点是能够确实解决问题。目前公司对前端开发并没有一个明确的要求，所以个人根据现有的开发流程以及开发认识，写了如下的代码。

目录结构，src内部的相关文件和代码，最终编译到dist中，dist就是发布的代码

然后是package.json文件

 {
   "name": "gulpf",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "babel-core": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "browser-sync": "^2.23.6",
     "del": "^3.0.0",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^5.0.0",
     "gulp-babel": "^7.0.1",
     "gulp-base64": "^0.1.3",
     "gulp-clean": "^0.4.0",
     "gulp-clean-css": "^3.9.3",
     "gulp-htmlmin": "^4.0.0",
     "gulp-imagemin": "^4.1.0",
     "gulp-plumber": "^1.2.0",
     "gulp-sass": "^4.0.1",
     "gulp-spriter": "^1.1.5",
     "gulp-uglify": "^3.0.0",
   }
 }

然后是gulpfile.js具体的代码

 var gulp = require('gulp'),
     clean=require("gulp-clean"),
     htmlmin = require('gulp-htmlmin'),
     sass=require('gulp-sass'),
     base64=require('gulp-base64'),
     imageMin = require('gulp-imagemin'),
     uglify = require('gulp-uglify'),
     clean_css = require('gulp-clean-css'),
     babel = require("gulp-babel"),
     browserSync = require('browser-sync').create(),
     plumber = require('gulp-plumber'),
     autoprefixer = require('gulp-autoprefixer');
 //编译sass
 gulp.task('scss', function () {
     gulp.src('src/scss/*.scss')

         .pipe(plumber({ errHandler: e => {
                 gutil.log(e); // 抛出异常
             }}))
         .pipe(sass())
         .pipe(base64({
                 extensions:     ['svg','png','jpg','jpeg'],
                 maxImageSize:   *, // bytes
                 debug:          true
             }))
         .pipe(autoprefixer({
             browsers: ['last 2 versions'],
             cascade: false
         }))
         .pipe(clean_css())
         .pipe(gulp.dest('dist/css/'))
 }); 

 //转译es6
 gulp.task("es6",function(){
     gulp.src('src/js/*.js')
         .pipe(babel({
             presets: ['es2015']
         }))
         .pipe(uglify())
         .pipe(gulp.dest('dist/js/'))
 })

 //清除图片文件
 gulp.task("cleanimgs",function(){
     gulp.src("dist/imgs/",{read:false})
     .pipe(clean())
 })
 //清除html文件
 gulp.task("cleanhtml",function(){
     gulp.src("dist/html/*.html",{read:false})
     .pipe(clean())
 })
 //拷贝压缩imgs
 gulp.task("imgs",function(){
     gulp.src('src/imgs/*')
         .pipe(imageMin({progressive: true}))
         .pipe(plumber({ errHandler: e => {
                 gutil.log(e); // 抛出异常
             }}))
         .pipe(gulp.dest('dist/imgs/'))
 })
 //拷贝html
 gulp.task("html",function(){
     var options = {
         removeComments: true,//清除HTML注释
         collapseWhitespace: true,//压缩HTML
         collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
         removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
         removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
         removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
         minifyJS: true,//压缩页面JS
         minifyCSS: true//压缩页面CSS
     };
     gulp.src('src/*.html')
         .pipe(htmlmin(options))
         .pipe(gulp.dest('dist/'));
 })

 //默认任务
 gulp.task('default',['cleanimgs','scss','es6','imgs','cleanhtml','html'],function(done) {  

     browserSync.init({
         //指定服务器启动根目录
         server: "./dist"
     });
     //监听sass编译，修改了才删除
     gulp.watch("src/scss/*.scss", ['cleancss','scss']);
     //监听sass编译
     gulp.watch("src/js/*.js", ['es6']);
     //监听图片变化
     gulp.watch("src/imgs/*", ['cleanimgs','imgs']);
     //监听html变化
     gulp.watch("src/*.html", ['html']);
     //监听任何文件变化，实时刷新页面
     gulp.watch(["src/scss/*.scss","src/js/*.js","src/*.html","src/imgs/*"]).on('change',browserSync.reload);
 }); 

上述代码实现的功能有

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.

本文结束。