gulp4.0自动化构建
前言:随便写了一下,这个项目很单纯,脚手架啥的一个没,只有用简单的多页面输出,自动化编译打包压缩混淆等一些列流程。
已完成功能
- 公用foot和head引用
- js(es6转es5)打包压缩混淆
- css打包压缩混淆
- 版本号增加
基本gulp4.02
因为是半路接手,随便处理的,gulp写法大部分还是3.0的写法。
配置:
gulpfile文件
const gulp = require('gulp');
const htmlImport = require('gulp-html-import'); //html引入
const rename = require('gulp-rename'); //替换路径
const uglify = require('gulp-uglify'); // 压缩js
const cleanCSS = require('gulp-clean-css'); // 压缩css
const imagemin = require('gulp-imagemin'); // 压缩图片
const htmlmin = require('gulp-htmlmin'); //压缩html
const autoprefixer = require('gulp-autoprefixer'); //css游览器兼容
const del = require("del"); //每次构建gulp之前,清除目标文件dist
const jshint = require("gulp-jshint"); //js检查
const rev = require('gulp-rev-dxb') //生成映射路径
const revCollector = require('gulp-rev-collector-dxb') //替换版本号路径插件
const babel = require('gulp-babel'); //ES6转ES5
const connect = require('gulp-connect'); //引入gulp-connect模块 浏览器刷新
/**
* 编译html代码
*/
var srcs = {
'html': ['./page/*.html', './page/**/*.html', ],
"css": ['./page/css/*.css', './page/css/**/*.css'],
"revjs": ['./page/js/*.*', './page/js/**/*.*', '!./page/js/layer/*.*', '!./page/js/layer/**/*.*', '!./page/js/map/*.*', '!./page/js/map/**/*.*', '!./page/js/common/*.*'],
"js": ['./page/js/**/*.*', './page/js/**/**/*.*', '!./page/js/*.*', '!./page/js/echarts/*.*'],
"fixed": ['./page/js/layer/*.*', './page/js/layer/**/*.*', './page/js/map/*.*', '!./page/js/map/**/*.*'],
"img": ['./page/images/*.*', './page/images/**/*.*']
}
gulp.task('html', () => {
var options = {
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
removeComments: true, //清除HTML注释
removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
minifyJS: true, //压缩js
minifyCSS: true //压缩css
};
return gulp.src(srcs.html)
.pipe(htmlImport('./page/components/'))
.pipe(rename({
dirname: ''
}))
.pipe(htmlmin(options))
.pipe(gulp.dest('dist/page'))
.pipe(connect.reload());
});
gulp.task('jsbeing', function () {
return gulp.src(srcs.js)
.pipe(gulp.dest('dist/js'))
});
gulp.task('revJS', function () {
return gulp.src(srcs.revjs)
.pipe(jshint()) //检查代码
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(rev()) //js文件生成版本号,
.pipe(gulp.dest('dist/js')) //将js文件输出到dist/js目录下
.pipe(rev.manifest({
path: "../JS.json",
merge: true
})) //并将所有带有版本号的文件放入json中
.pipe(gulp.dest('dist/js'))
.pipe(connect.reload());
});
gulp.task('cssbeing', function () {
return gulp.src(srcs.css)
.pipe(autoprefixer({
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
],
grid: true
}))
// 2. 压缩文件
.pipe(cleanCSS())
.pipe(rev()) //将所有匹配到的文件名全部生成相应的版本号
.pipe(gulp.dest('dist/css')) //将css文件输出到dist目录
.pipe(rev.manifest({
path: "../CSS.json",
merge: true
})) //并将所有带有版本号的文件放入json中
// 3. 另存压缩后的文件
.pipe(gulp.dest('dist/css'))
.pipe(connect.reload());
});
// 图片异步处理
gulp.task('imgbeing', async function () {
gulp.src(srcs.img)
// .pipe(await imagemin()) //压缩图片,建议使用熊猫压缩
.pipe(gulp.dest('dist/images'))
});
gulp.task('rev', function () {
return gulp.src(['dist/*.json', 'dist/page/*.html'])
.pipe(revCollector({
replaceReved: true, //允许替换, 已经被替换过的文件
dirReplacements: {
'css': 'css',
'js': 'js',
'json': 'json'
}
}))
.pipe(gulp.dest('dist/'))
});
gulp.task('clean:dist', function () {
return del(['dist/**','!dist/distM/**'])
});
gulp.task('watchs', function () { //监听变化执行任务
//当匹配任务变化才执行相应任务
gulp.watch(srcs.html, gulp.series('html','rev'));
gulp.watch(srcs.revjs, gulp.series('revJS'));
gulp.watch(srcs.css, gulp.series('cssbeing'));
gulp.watch(srcs.img, gulp.series('imgbeing'));
connect.server({
root: 'dist', //根目录
port: 9898,
livereload: true, //自动更新
});
})
gulp.task('init', gulp.series('clean:dist', gulp.parallel('imgbeing', 'jsbeing', 'revJS', 'cssbeing', 'html')));
gulp.task('build', gulp.series("clean:dist",
gulp.series('init',
gulp.parallel('rev')
)
));
gulp.task('serve', gulp.series('build', 'watchs'));
1.图片压缩在无框架情况下不建议放在task里面处理,建议先通过其他路径压缩。gulp-task不对图片做特殊处理
2.clean我用了一下感觉有坑,所以换成了del
3.版本号处理做了优化,亲测好用。
4.公用组件处理是之前的老方法,建议看看gulp-file-include
5.图片未使用版本号,不是很建议
6.bable配置可以更优化
package.json配置:
项目路径:
因为是已存在项目,所以有些处理怪怪的,建议取其精华,取其精华,去其糟粕