就前端的发展而言会越来越朝着后端的标准化靠近，后端的工程化以及模块化都很成熟。基于这样一个思路，开始探索如何优化目前的开发流程。而使用的工具就是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.
本文结束。