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

本文结束。