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