一、前言
有些简单前端小项目，不需要涉及框架，前端打包压缩的话本妹子还是喜欢用 gulp。本文将用 gulp-rev 和 gulp-rev-rewrite 解决 cdn 缓存问题。以及列出的是本妹子最常用的 gulp 插件，小伙伴们可以参考。案例地址：https://github.com/raoenhui/g…
二、解决浏览器缓存问题
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’))
});
其他链接
案例地址：https://github.com/raoenhui/gulpExample.git
原文地址：https://raoenhui.github.io/js/2019/03/03/gulp
Happy coding .. :)