gulp之自動化靜態資源壓縮合併加版本號

這個方案主要是為了實現js/css/image的壓縮合併、自動新增版本號、自動加瀏覽器字首和壓縮html。

先把下面這裡外掛程式 npm i （外掛程式名） -d安裝到專案環境內

目錄結構

|- root

|    |-dist  //此目錄為下面生成的

|         |-css

|         |-js

|         |-images

|         |-rev

|         |-index.html

|    |-node_modules

|    |-src   //資源目錄

|         |-css

|         |-js

|         |-images

|         index.html

|     gulpfile.js

|     package.json

gulpfile.js檔案

var gulp = require('gulp'),

gulpsequence = require('gulp-sequence'),    //同步執行任務
csso = require('gulp-csso'),    //css壓縮
jshint = require('gulp-jshint'),    //js檢查
uglify = require('gulp-uglify'),    //js壓縮 
imagemin = require('gulp-imagemin'),    //壓縮
htmlmin = require('gulp-htmlmin'),   //壓縮html
clean = require('gulp-clean'),    //清空資料夾
rev = require('gulp-rev'),    //更改版本名 md5字尾
autofx = require('gulp-autoprefixer'),    //加瀏覽器字首
revcollector = require('gulp-rev-collector');    //gulp-rev 的外掛程式，用於html模板更改引用路徑
//清空資料夾
gulp.task('clean', function())
.pipe(clean());
});//壓縮css/加瀏覽器字首
gulp.task('css', function()))
.pipe(csso())
.pipe(rev())
.pipe(gulp.dest('dist/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('dist/rev/css'));
});//壓縮js
gulp.task('js', function());
//壓縮image
gulp.task('image', function()')
.pipe(imagemin())
.pipe(rev())
.pipe(gulp.dest('dist/images'))
.pipe(rev.manifest())
.pipe(gulp.dest('dist/rev/images'));
});//改變css引用路徑
gulp.task('revcss',function()))
.pipe(gulp.dest('dist/css'));
});//改變html引用路徑
gulp.task('rev', function()))
.pipe(htmlmin())
.pipe(gulp.dest('dist/'));
});gulp.task('default', gulpsequence('clean', 'css', 'js', 'image', 'revcss', 'rev'));    //按順序執行任務

gulp之自動化靜態資源壓縮合併加版本號

這個方案主要是為了實現js css image的壓縮合併 自動新增版本號 自動加瀏覽器字首和壓縮html。先把下面這裡外掛程式 npm i 外掛程式名 d安裝到專案環境內 目錄結構 root dist 此目錄為下面生成的 css js images rev index.html node modul...

gulp自動化壓縮合併 加版本號解決方案

雖然網上有很多的 gulp 構建文章，但是很多都已經隨著 gulp 外掛程式的更新無法執行了。因此，我寫了這個比較簡單的構建方案。這個方案主要是為了實現js css的壓縮合併 自動新增版本號和壓縮html。主要通過上面外掛程式實現功能，其他外掛程式配合使用。gulpfile.js var gulp ...

Gulp 自動化構建

use gulp 官網 編譯 sass 合併優化壓縮 css 校驗壓縮 js 優化新增檔案指紋 md5 元件化頭部底部 include html 實時自動重新整理 gulp是前端開發過程中對 進行自動化構建的利器。它不僅能對資源進行優化，而且在開發過程中能夠通過配置自動完成很多重複的任務，讓我們可以...