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

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

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

代码

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-rev": "^8.1.1",
26     "gulp-rev-collector": "^1.3.1",
27     "gulp-sass": "^4.0.1",
28     "gulp-spriter": "^1.1.5",
29     "gulp-uglify": "^3.0.0",
30     "gulp-util": "^3.0.8",
31     "run-sequence": "^2.2.1"
32   }
33 }

gulpfile.js下的代码

  1 var gulp = require('gulp'),
  2     clean = require("gulp-clean"),
  3     htmlmin = require('gulp-htmlmin'),
  4     rev = require('gulp-rev'), //添加时间戳
  5     revCollector = require('gulp-rev-collector'), //时间戳添加后再html 里面替换原有的文件
  6     sass = require('gulp-sass'),
  7     base64 = require('gulp-base64'),
  8     imageMin = require('gulp-imagemin'),
  9     uglify = require('gulp-uglify'),
 10     clean_css = require('gulp-clean-css'),
 11     clean = require('gulp-clean'), //清除原来文件
 12     babel = require("gulp-babel"),
 13     browserSync = require('browser-sync').create(),
 14     plumber = require('gulp-plumber'),
 15     runSequence = require('run-sequence'),
 16     autoprefixer = require('gulp-autoprefixer');
 17 //编译sass 
 18 gulp.task('scss', function() {
 19     gulp.src('src/scss/*.scss')
 20 
 21         .pipe(plumber({
 22             errHandler: e => {
 23                 gutil.log(e); // 抛出异常
 24             }
 25         }))
 26         .pipe(sass())
 27         .pipe(base64({
 28             extensions: ['svg', 'png', 'jpg', 'jpeg'],
 29             maxImageSize: 8 * 1024, // bytes 
 30             debug: true
 31         }))
 32         .pipe(autoprefixer({
 33             browsers: ['last 2 versions'],
 34             cascade: false
 35         }))
 36         .pipe(gulp.dest('src/css/'))
 37 });
 38 
 39 //清除css文件
 40 gulp.task("cleancss", function() {
 41     gulp.src("src/css/", { read: false })
 42         .pipe(clean())
 43 })
 44 
 45 
 46 
 47 //开发环境
 48 gulp.task('dev', ['cleancss','scss'], function(done) {
 49 
 50     browserSync.init({
 51         //指定服务器启动根目录  
 52         server: "./src"
 53     });
 54     //监听sass编译，修改了才删除
 55     gulp.watch("src/scss/*.scss", ['scss']);
 56 
 57     //监听任何文件变化，实时刷新页面  
 58     gulp.watch(["src/*.html", "src/imgs/*","src/css/*.css", "src/js/*.js"]).on('change', browserSync.reload);
 59 });
 60 
 61 
 62 //构建生产环境
 63 //清除图片文件
 64 gulp.task("cleanimgs", function() {
 65     gulp.src("dist/imgs/", { read: false })
 66         .pipe(clean())
 67 })
 68 //清除html文件
 69 gulp.task("cleanhtml", function() {
 70     gulp.src("dist/html/*.html", { read: false })
 71         .pipe(clean())
 72 })
 73 //清除js文件
 74 gulp.task("cleanjs", function() {
 75     gulp.src("dist/js/*.js", { read: false })
 76         .pipe(clean())
 77 })
 78 //清除css文件
 79 gulp.task("cleandistcss", function() {
 80     gulp.src("dist/css/*.css", { read: false })
 81         .pipe(clean())
 82 })
 83 //拷贝压缩imgs
 84 gulp.task("imgs", function() {
 85     gulp.src('src/imgs/*')
 86         .pipe(imageMin({ progressive: true }))
 87         .pipe(plumber({
 88             errHandler: e => {
 89                 gutil.log(e); // 抛出异常
 90             }
 91         }))
 92         .pipe(gulp.dest('dist/imgs/'))
 93 })
 94 //拷贝压缩html
 95 gulp.task("html", function() {
 96     var options = {
 97         removeComments: true, //清除HTML注释
 98         collapseWhitespace: true, //压缩HTML
 99         collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
100         removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
101         removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
102         removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
103         minifyJS: true, //压缩页面JS
104         minifyCSS: true //压缩页面CSS
105     };
106     gulp.src('src/*.html')
107         .pipe(htmlmin(options))
108         .pipe(gulp.dest('dist/'));
109 })
110 //转译es6
111 gulp.task("es6", function() {
112     gulp.src('src/js/*.js')
113         .pipe(babel({
114             presets: ['es2015']
115         }))
116         .pipe(uglify())
117         .pipe(rev())
118         .pipe(gulp.dest('dist/js/'))
119         .pipe(rev.manifest())
120         .pipe(gulp.dest('dist/rev/js'))
121 })
122 //给css文件后添加时间戳
123 gulp.task('revcss', function() {
124     gulp.src('src/css/*.css')
125         .pipe(rev())
126         .pipe(gulp.dest('./dist/css'))
127         .pipe(rev.manifest())
128         .pipe(gulp.dest('dist/rev/css'))
129 });
130 
131 
132 //给js文件后添加时间戳
133 gulp.task('rev', function() {
134 
135     gulp.src(['./dist/rev/*/*.json', './src/*.html'])
136         //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
137         .pipe(revCollector())
138         //- 执行文件内js名的替换
139         .pipe(gulp.dest('./dist/'));
140     //- 替换后的文件输出的目录
141 });
142 
143 //生产环境，异步rev
144 gulp.task('build', ['cleanimgs','cleanhtml','cleanjs','cleandistcss','imgs','html','es6','revcss'],function(){
145     gulp.start('rev');
146 });

目录结构

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

src的目录结构

dist的目录结构

rev下

本文结束。