基于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:   8*1024, // 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.

本文结束。