基於gulp的前端自動化開發構建新

關於gulp的使用，已經在以前寫過一篇文章，可是遺留了一個問題。問題是實現文件的增量式更新，就是給html引入的js和css文件打上標記。每次更新標記更新。

上篇文章想經過開發同時實現標記的實時更新，後來借鑑了別人的實現，原來的確是應該將這個過程分爲開發和生產兩個環境的，因而茅塞頓開。因而有了本文。

代碼

package.js文件

 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下

本文結束。