记–gulp自动化配置（解决浏览器缓存）
公司技术分享给我选了个自动化工具gulp,简单粗暴。写一下就当笔记了。。
前端自动化工具有很多 webpack grunk gulp ,gulp个人感觉是最简单的一个了。
4个API gulp.task() 、gulp.src() 、gulp.dest() 、 gulp.watch()；
1、gulp.src() 获取文件流（并非原始文件流，而是储存着原始文件流信息的 虚拟文件流）
.pipe() 导入流
2、gulp.task(‘name’,function(){//新建任务 name->任务名
})
3、gulp.dest() //输出文件流
4、gulp.watch() //监听 任务的执行 | 监听文件的修改
gulp 执行 ==> 默认 gulp | | gulp.default
在新建的gulpfile.js 引入gulp 赋值给变量 —> var gulp = require(‘gulp’),//基础库
Npm 安装所需依赖 同样的方式引入
1、 Html 压缩 gulp-htmlmin
npm install gulp htmlmin —save -dev
var htmlmin = require(‘gulp-htmlmin’)
新建简单压缩任务
gulp.task(‘htmlmin’,function(){
gulp.src(‘src/view/**/*.html’) //匹配需压缩文件
.pipe(htmlmin()) //执行压缩依赖
.pipe(gulp.dest(‘dist/view’))//输出路径
})
也可根据htmlmin api. 添加压缩条件
gulp.task(‘htmlmin’,function(){
var htmlData = {
removeComments: true, // 清除HTML注释
collapseWhitespace: true, // 压缩HTML
removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, // 删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
ignoreCustomFragments: [/<%[\s\S]*?%>/, /<\?[\s\S]*?\?>/, /<\/body>/, /<\/html>/], // 正则表达式数组，匹配的标签将不被处理。 (如 <?php ... ?>, {{ ... }}。
includeAutoGeneratedTags: false, // 插入 HTML 解析器自动生成的标签。
minifyJS: true, // 压缩页面JS
minifyCSS: true // 压缩页面CSS
}
gulp.src(‘src/view/**/*.html’) //匹配需压缩文件
.pipe(htmlmin(htmlData)) //执行压缩依赖
.pipe(gulp.dest(‘dist/view’))//输出路径
})
Css 压缩
npm install gulp-minify-css --save-dev
var cssmin = require(‘gulp-minify-css’),//css压缩
gulp.task('cssmin', function(){
return gulp.src(‘src/css/*.css’)
// .pipe(conCat('css/index.css')) //这句代码就是把所有的css文件压缩到一个css里面，但是这样的话会导致文件太大，引入很多其他页面的css，影响页面的性能，所以看情况是否需要引入
.pipe(cssmin({
advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
keepBreaks: false,//类型：Boolean 默认：false [是否保留换行]
keepSpecialComments: '*'//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
}))
.pipe(gulp.dest('gulpmin/css')
});
Js 压缩
npm install gulp-uglify —save -dev
var jsmin = require(‘gulp-uglify’)
uglify —>压缩过后的文件 再次压缩会出现混乱 应避免
gulp.task('jsmin', function () {
return gulp.src(['src/js/**/*.js','!src/js/commonjs/*.js'])
// .pipe(conCat('js/index.js')) //这句代码就是把所有的js文件压缩到一个js里面，但是这样的话会导致文件太大，引入很多其他页面的js，影响页面的性能，所以看情况是否需要引入
.pipe(babel())
.pipe(uglify())
.pipe(gulp.dest('gulpmin/js'))
});
注意 ：gulp-uglify 压缩 需将es6代码转es5
npm install gulp-babel — save -dev (若报错 检查gulp版本和 babel版本)
高版本babel 不兼容可 npm install -D babel-loader@7 babel-core babel-preset-enva 回退版本
图片压缩
var imagemin = require(‘gulp-imagemin’),//图片压缩
pngquant = require(‘imagemin-pngquant’),//图片深入压缩
imageminOptipng = require(‘imagemin-optipng’),
imageminSvgo = require(‘imagemin-svgo’),
imageminGifsicle = require(‘imagemin-gifsicle’),
imageminJpegtran = require(‘imagemin-jpegtran’),
gulp.task('imagemin', function () {
gulp.src('src/images/**/*.{png,jpg,gif,ico}')
.pipe(cache(imagemin({
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
use: [pngquant(),imageminJpegtran({progressive: true}),
imageminGifsicle({interlaced: true}),imageminOptipng({optimizationLevel:3}), imageminSvgo()] //使用pngquant深度压缩png图片的imagemin插件
})))
.pipe(changed('gulpmin/images')) // 对比文件是否有过改动（此处填写的路径和输出路径保持一致）
.pipe(gulp.dest('gulpmin/images')) // 输出路径
gulp.src('gulpmin/images/**/*.{png,jpg,gif,svg,ico}')
.pipe(gulp.dest('gulpmin/images')
});
==> 解决浏览器静态文件缓存问题
使用hash 文件名后加?v=版本号，或 文件名后md5拼接
所需依赖 gulp-rename 、gulp-rev 、gulp-rev-collector 、gulp-changed
打包时给静态文件名字拼接md5后缀，每次修改的文件重新修改后缀
安装引入依赖
2. 压缩时便历所有的css、js 文件。生成一个json文件，以键值对的方式储存。
3. 在html中匹配引入的文件对应的键 替换成 值。
图片rename 是 应考虑 css中引入时的图片
例如js压缩时
gulp.task('jsmin', function () {
return gulp.src(['src/js/**/*.js','!src/js/commonjs/*.js'])
// .pipe(conCat('js/index.js')) //这句代码就是把所有的js文件压缩到一个js里面，但是这样的话会导致文件太大，引入很多其他页面的js，影响页面的性能，所以看情况是否需要引入
.pipe(babel())
.pipe(uglify())
.pipe(rev())//加md5后缀
.pipe(gulp.dest('gulpmin/js'))
.pipe(rev.manifest())// 生成一个rev-manifest.json文件，记录MD5的文件改名前后的对应关系
.pipe(gulp.dest(‘gulpmin/rev/js')); // 输出遍历后的json
});
坑：gulp-rev 只能匹配 值 而如 多层文件 则不能替换
==> 解决浏览器静态文件缓存问题
使用hash 文件名后加?v=版本号，或 文件名后md5拼接
所需依赖 gulp-rename 、gulp-rev 、gulp-rev-collector 、gulp-changed
打包时给静态文件名字拼接md5后缀，每次修改的文件重新修改后缀
安装引入依赖
2. 压缩时便历所有的css、js 文件。生成一个json文件，以键值对的方式储存。
3. 在html中匹配引入的文件对应的键 替换成 值。
图片rename 是 应考虑 css中引入时的图片
例如js压缩时
gulp.task('jsmin', function () {
return gulp.src(['src/js/**/*.js','!src/js/commonjs/*.js'])
// .pipe(conCat('js/index.js')) //这句代码就是把所有的js文件压缩到一个js里面，但是这样的话会导致文件太大，引入很多其他页面的js，影响页面的性能，所以看情况是否需要引入
.pipe(babel())
.pipe(uglify())
.pipe(rev())//加md5后缀
.pipe(gulp.dest('gulpmin/js'))
.pipe(rev.manifest())// 生成一个rev-manifest.json文件，记录MD5的文件改名前后的对应关系
.pipe(gulp.dest(‘gulpmin/rev/js')); // 输出遍历后的json
});
坑：gulp-rev 只能匹配 值 而如 多层文件 则不能替换
如下图-红色可以替换，绿色多层则不可以替换
需在gulp-rev 的modules包中修改源码
==>node_modules/gulp-rev/index.js ;根据项目添加
z
==>每次打包需清空 build文件夹 （遍历json 不要清空。gulp-rev 只会更改修改文件的键值）
安装依赖 gulp-clean
clean = require(‘gulp-clean’),//清空文件夹
gulp.task(‘default’,[clean],function(){
gulp.start('cssmin','htmlmin','jsmin','imagemin');
})
也可控制清空内容
gulp.task('clean',function(){
return gulp.src(['gulpmin/css/**/*.css', 'gulpmin/js/**/*.js','gulpmin/images/**/*.images','gulpmin/view/**/*.html'], {read: false}).pipe(clean({force: true}))
});
{read:false} :是不读取文件 加快程序 ； clean({foece:true}) :强制删除文件
==>另需注意 gulp 的每个task 为异步进行 如若像同步 则不可省略return
若 使用gulp-rev 解决 浏览器缓存问题，需注意任务的进行顺序。需在json遍历生成后再，替换引入
可使用依赖包控制执行顺序 == > gulpSequence = require(‘gulp-sequence’)
—>使用
gulp.task('default',gulpSequence(
'clean','imagemin','commoncss','commonjs','jsmin','cssmin','htmlmin'
));
gulpSequence(按顺序执行)
var gulp = require('gulp'),//基础库
htmlmin = require('gulp-htmlmin'),//html压缩
cssmin = require('gulp-minify-css'),//css压缩
jshint = require('gulp-jshint'),//js检查
uglify = require('gulp-uglify'),//js压缩
imagemin = require('gulp-imagemin'),//图片压缩
pngquant = require('imagemin-pngquant'),//图片深入压缩
imageminOptipng = require('imagemin-optipng'),
imageminSvgo = require('imagemin-svgo'),
imageminGifsicle = require('imagemin-gifsicle'),
imageminJpegtran = require('imagemin-jpegtran'),
domSrc = require('gulp-dom-src'),
cheerio = require('gulp-cheerio'),
processhtml = require('gulp-processhtml'),
Replace = require('gulp-replace'),
cache = require('gulp-cache'),//图片压缩缓存
clean = require('gulp-clean'),//清空文件夹
conCat = require('gulp-concat'),//文件合并
plumber=require('gulp-plumber'),//检测错误
gutil=require('gulp-util');//如果有自定义方法，会用到
babel = require('gulp-babel'),//es6转es5
rename = require('gulp-rename'),//改名
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector'),
changed = require('gulp-changed');
gulpSequence = require('gulp-sequence')//顺序执行
function errrHandler( e ){
// 控制台发声,错误时beep一下
gutil.beep();
gutil.log(e);
this.emit('end');
}
gulp.task('htmlmin', ['cssmin', 'jsmin'], function () {
var htmlData = {
removeComments: true, // 清除HTML注释
collapseWhitespace: true, // 压缩HTML
removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, // 删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
ignoreCustomFragments: [/<%[\s\S]*?%>/, /<\?[\s\S]*?\?>/, /<\/body>/, /<\/html>/], // 正则表达式数组，匹配的标签将不被处理。 (如 <?php ... ?>, {{ ... }}。
includeAutoGeneratedTags: false, // 插入 HTML 解析器自动生成的标签。
minifyJS: true, // 压缩页面JS
minifyCSS: true // 压缩页面CSS
}
return gulp.src(['gulpmin/rev/**/*.json', 'src/view/**/*.html'])
.pipe(revCollector({
replaceReved: true // 必须增加这个参数，否则更改了源文件之后不会热更新，设置replaceReved标识, 用来说明模板中已经被替换的文件是否还能再被替换,默认是false
}))
.pipe(htmlmin(htmlData))
.pipe(gulp.dest('gulpmin/view'));//文件压缩后需要放到的地方
});
gulp.task('cssmin', function(){
return gulp.src(['src/css/**/*.css','!src/css/commoncss/*.css'])
// .pipe(conCat('css/index.css')) //这句代码就是把所有的css文件压缩到一个css里面，但是这样的话会导致文件太大，引入很多其他页面的css，影响页面的性能，所以看情况是否需要引入
.pipe(plumber({errorHandler:errrHandler}))
.pipe(cssmin({
advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
keepBreaks: false,//类型：Boolean 默认：false [是否保留换行]
keepSpecialComments: '*'
//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
}))
// .pipe(rename(function (path) {
// path.basename += '.min'
// path.extname = '.css'
// }))
.pipe(rev()) // 文件名加MD5后缀
.pipe(gulp.dest('gulpmin/css'))
.pipe(rev.manifest()) // 生成一个rev-manifest.json文件，记录MD5的文件改名前后的对应关系
.pipe(gulp.dest('gulpmin/rev/css')) // 将 rev-manifest.json 保存到 rev
});
gulp.task('jsmin', function () {
// var jsData = {
// mangle: {
// except: ['require' , 'exports' , 'module' ]
// } // 排除混淆关键字
// }
return gulp.src(['src/js/**/*.js','!src/js/commonjs/*.js'])
// .pipe(conCat('js/index.js')) //这句代码就是把所有的js文件压缩到一个js里面，但是这样的话会导致文件太大，引入很多其他页面的js，影响页面的性能，所以看情况是否需要引入
.pipe(babel())
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('gulpmin/js'))
.pipe(rev.manifest())
.pipe(gulp.dest('gulpmin/rev/js'));
});
gulp.task('imagemin', function () {
return gulp.src('src/images/**/*.{png,jpg,gif,ico}')
// .pipe(plumber({errorHandler:errrHandler}))
// .pipe(cache(imagemin({
// progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
// svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
// use: [pngquant(),imageminJpegtran({progressive: true})
// , imageminGifsicle({interlaced: true}),imageminOptipng({optimizationLevel:3}), imageminSvgo()] //使用pngquant深度压缩png图片的imagemin插件
// })))
// .pipe(changed('gulpmin/images')) // 对比文件是否有过改动（此处填写的路径和输出路径保持一致）
// .pipe(gulp.dest('gulpmin/images')) // 输出路径
// gulp.src('gulpmin/images/**/*.{png,jpg,gif,svg,ico}')
// .pipe(gulp.dest('gulpmin/images'))
.pipe(gulp.dest('gulpmin/images'))
});
gulp.task('commoncss',function(){
return gulp.src('src/css/commoncss/*.css')
.pipe(gulp.dest('gulpmin/css/commoncss'))
});
gulp.task('commonjs',function(){
return gulp.src('src/js/commonjs/*.js')
.pipe(gulp.dest('gulpmin/js/commonjs'))
})
//======>>build之前清空h5文件夹
gulp.task('clean',function(){
return gulp.src(['gulpmin/css/**/*.css', 'gulpmin/js/**/*.js','gulpmin/images/**/*.images','gulpmin/view/**/*.html'], {read: false}).pipe(clean({force: true}))
});
// gulp.task('default',['clean'],function(){
// gulp.start('cssmin','jsmin','imagemin','htmlmin');
// });
gulp.task('default',gulpSequence(
'clean','imagemin','commoncss','commonjs','jsmin','cssmin','htmlmin'
));
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
