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

关于gulp的使用，已经在之前写过一篇文章，但是遗留了一个问题。问题是实现文件的增量式更新，就是给html引入的js和css文件打上标记。每次更新标记更新。

上篇文章想通过开发同时实现标记的实时更新，后来借鉴了别人的实现，原来的确是应该将这个过程分为开发和生产两个环境的，于是茅塞顿开。于是有了本文。

代码

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-rev": "^8.1.1",
     "gulp-rev-collector": "^1.3.1",
     "gulp-sass": "^4.0.1",
     "gulp-spriter": "^1.1.5",
     "gulp-uglify": "^3.0.0",
     "gulp-util": "^3.0.8",
     "run-sequence": "^2.2.1"
   }
 }

gulpfile.js下的代码

 var gulp = require('gulp'),
     clean = require("gulp-clean"),
     htmlmin = require('gulp-htmlmin'),
     rev = require('gulp-rev'), //添加时间戳
     revCollector = require('gulp-rev-collector'), //时间戳添加后再html 里面替换原有的文件
     sass = require('gulp-sass'),
     base64 = require('gulp-base64'),
     imageMin = require('gulp-imagemin'),
     uglify = require('gulp-uglify'),
     clean_css = require('gulp-clean-css'),
     clean = require('gulp-clean'), //清除原来文件
     babel = require("gulp-babel"),
     browserSync = require('browser-sync').create(),
     plumber = require('gulp-plumber'),
     runSequence = require('run-sequence'),
     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(gulp.dest('src/css/'))
 });

 //清除css文件
 gulp.task("cleancss", function() {
     gulp.src("src/css/", { read: false })
         .pipe(clean())
 })

 //开发环境
 gulp.task('dev', ['cleancss','scss'], function(done) {

     browserSync.init({
         //指定服务器启动根目录
         server: "./src"
     });
     //监听sass编译，修改了才删除
     gulp.watch("src/scss/*.scss", ['scss']);

     //监听任何文件变化，实时刷新页面
     gulp.watch(["src/*.html", "src/imgs/*","src/css/*.css", "src/js/*.js"]).on('change', browserSync.reload);
 });

 //构建生产环境
 //清除图片文件
 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())
 })
 //清除js文件
 gulp.task("cleanjs", function() {
     gulp.src("dist/js/*.js", { read: false })
         .pipe(clean())
 })
 //清除css文件
 gulp.task("cleandistcss", function() {
     gulp.src("dist/css/*.css", { 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/'));
 })
 //转译es6
 gulp.task("es6", function() {
     gulp.src('src/js/*.js')
         .pipe(babel({
             presets: ['es2015']
         }))
         .pipe(uglify())
         .pipe(rev())
         .pipe(gulp.dest('dist/js/'))
         .pipe(rev.manifest())
         .pipe(gulp.dest('dist/rev/js'))
 })
 //给css文件后添加时间戳
 gulp.task('revcss', function() {
     gulp.src('src/css/*.css')
         .pipe(rev())
         .pipe(gulp.dest('./dist/css'))
         .pipe(rev.manifest())
         .pipe(gulp.dest('dist/rev/css'))
 });

 //给js文件后添加时间戳
 gulp.task('rev', function() {

     gulp.src(['./dist/rev/*/*.json', './src/*.html'])
         //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
         .pipe(revCollector())
         //- 执行文件内js名的替换
         .pipe(gulp.dest('./dist/'));
     //- 替换后的文件输出的目录
 });

 //生产环境，异步rev
 gulp.task('build', ['cleanimgs','cleanhtml','cleanjs','cleandistcss','imgs','html','es6','revcss'],function(){
     gulp.start('rev');
 });

目录结构

在src中写开发环境代码，在dist中生成html代码。分别执行gulp dev个gulp build。

src的目录结构

dist的目录结构

rev下

本文结束。