一、前言
有些簡單前端小專案，不需要涉及框架，前端打包壓縮的話本妹子還是喜歡用gulp。
本文將用gulp-rev和gulp-rev-rewrite解決cdn快取問題。
以及列出的是本妹子最常用的gulp外掛，小夥伴們可以參考。
案例地址：github.com/raoenhui/gu…
二、解決瀏覽器快取問題
gulp-rev
1.為靜態檔案新增唯一hash值，如 unicorn.css → unicorn-d41d8cd98f.css。
2.生成map對映檔案，方便後面html更換檔名
gulp.task('js', () =>
gulp.src(['./src/app.js', './src/app2.js'])
.pipe(gulp.dest('dist')) // 將原始檔拷貝到打包目錄
.pipe(rev())
.pipe(gulp.dest('dist')) // 將生成的hash檔案新增到打包目錄
.pipe(rev.manifest('js-rev.json'))
.pipe(gulp.dest('dist')) // 將map對映檔案新增到打包目錄
);
gulp.task('css',()=> {
gulp.src('./src/*.css')
.pipe(gulp.dest('dist')) // 將生成的hash檔案新增到打包目錄
.pipe(rev())
.pipe(gulp.dest('dist'))// write rev'd assets to build dir
.pipe(rev.manifest('css-rev.json'))
.pipe(gulp.dest('dist')) // 將map對映檔案新增到打包目錄
});
複製程式碼gulp-rev-rewrite
根據rev生成的manifest.json map對映檔案, 去替換html檔案中的引用名稱,
gulp.task('html', () => {
const jsManifest = gulp.src('dist/js-rev.json'); //獲取js對映檔案
const cssManifest = gulp.src('dist/css-rev.json'); //獲取css對映檔案
return gulp.src('./*.html')
.pipe(revRewrite({manifest: jsManifest})) // 把引用的js替換成有版本號的名字
.pipe(revRewrite({manifest: cssManifest})) // 把引用的css替換成有版本號的名字
.pipe(gulp.dest('dist'))
});
複製程式碼替換成功
三、gulp其他常用外掛
JS相關
gulp-babel
babel是一個 JavaScript 編譯器。我們主要是用將ES6轉換成可以在瀏覽器中執行的程式碼。而gulp-babel的用法、功能和babel是一樣的。
先執行 npm install --save-dev gulp-babel @babel/core @babel/preset-env @babel/plugin-transform-runtime，裝好babel。
const babel = require('gulp-babel');
gulp.task('js', () =>
gulp.src('src/app.js')
.pipe(babel({
presets: ['@babel/env'],
plugins: ['@babel/transform-runtime']
}))
.pipe(gulp.dest('dist'))
);
複製程式碼gulp-sourcemaps
找到編譯原始檔，方便除錯原始碼。
const sourcemaps = require('gulp-sourcemaps');
gulp.task('js', () =>
gulp.src('src/app.js')
.pipe(sourcemaps.init())
.pipe(babel({
presets: ['@babel/env'],
plugins: ['@babel/transform-runtime']
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist'))
);
複製程式碼gulp-concat
合併js檔案
const concat = require('gulp-concat');
gulp.task('js', function() {
return gulp.src(['./src/app.js', './src/app2.js'])
.pipe(concat('app.js'))
.pipe(gulp.dest('dist'));
});
複製程式碼CSS相關
gulp-postcss
CSS前處理器。
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer'); //新增css相容性寫法
gulp.task('css', function () {
return gulp.src('./src/*.css')
.pipe(postcss([ autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9',
'iOS >= 8',
'Android > 4.4'
],
flexbox: 'no-2009',
}) ]))
.pipe(gulp.dest('./dest'));
});
複製程式碼gulp-clean-css
壓縮CSS
const cleanCSS = require('gulp-clean-css');
gulp.task('css', () => {
return gulp.src('styles/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('dist'));
});
複製程式碼HTML相關
gulp-inline-source
將引用的js、css檔案，插入html中，變成內聯式引用。
const inlinesource = require('gulp-inline-source');
gulp.task('html', function () {
return gulp.src('./*.html')
.pipe(inlinesource({
compress: false //是否壓縮成一行，預設為true壓縮
}))
.pipe(gulp.dest('./out'));
});
複製程式碼gulp-htmlmin
壓縮html
const htmlmin = require('gulp-htmlmin');
gulp.task('minify', () => {
return gulp.src('src/*.html')
.pipe(htmlmin({
removeComments: true, //去除備註
collapseWhitespace: true //去除空白
}))
.pipe(gulp.dest('dist'));
});
複製程式碼其他
del
刪除檔案或資料夾
const del = require('del');
/* 清理一些不是必須的js，css檔案 */
gulp.task('clean', function() {
return del(['./dist/*.js',
'./dist/*.css'
]).then(function() {
console.log('delete unnecessary files for firecrackers');
});
});
複製程式碼gulp-rename
重新命名檔案
const rename = require('gulp-rename');
gulp.task('html', function() {
.pipe(rename({
dirname: ".", // 路徑名
basename: "index", // 主檔名
prefix: "pre-", // 字首
suffix: "-min", // 字尾
extname: ".html" // 副檔名
}))
.pipe(gulp.dest('dist'))
});
複製程式碼其他連結
Happy coding .. :)