现有项目中有react技术栈与jquery技术栈的使用。 jquery技术栈是静态页面资源的方式引用。
为了让这些jquery栈享受到前端工程化的便利，利用gulp配置，对现有页面进行了配置升级。
开发工程gulp-webpack一体化
目标：
- 现有开发目录为源文件
- 部署时，统一部署到deploy文件夹中
- 增加js,css,等文件hash版本号，更新文件缓存
- 压缩html
- 压缩css,压缩js，混淆代码
- 文件合并
- 压缩图片
- 每次部署前，清空deploy.
- 替换包含文件内容
- 处理gulp的通知
- 处理代码风格
- 监控文件变化，执行相应任务
实现过程：
引入相应依赖包
var gulp = require('gulp');
var runSequence = require('run-sequence');// 同步执行任务
var rev = require('gulp-rev-dxb');// 更改版本号 // gulp-rev
var revCollector = require('gulp-rev-collector');// gulp-rev插件，用于html模板更改引用路径
var rename = require('gulp-rename');// 文件重命名
var autoprefixer = require('gulp-autoprefixer');
var uglify = require('gulp-uglify');// js压缩
var sourcemaps = require('gulp-sourcemaps');
var clean = require('gulp-clean');// 清空文件夹
var sass = require('gulp-sass');
var pump = require('pump');
var watch = require('gulp-watch');
var jshint = require('gulp-jshint');// js 风格
var gulpif = require('gulp-if');
var changed = require('gulp-changed');
var notify = require('gulp-notify');// 处理消息
var cache = require('gulp-cache');// 只压缩修改的图片
var htmlclean = require('gulp-htmlclean');// 精简html
var htmlmin = require('gulp-htmlmin');// 压缩html
var revAppend = require('gulp-rev-append');
var concat = require('gulp-concat');// 文件合并
var imagemin = require('gulp-imagemin');// 压缩图片
var stylish = require('jshint-stylish');
var cleanCSS = require('gulp-clean-css');
var replace = require('gulp-string-replace');
var fileinclude = require('gulp-file-include')
知识点
Gulp自动添加版本号
预期效果：
"css/Albumdetail.css": "css/Albumdetail.css?v=df04a5981a",
"css/aboutapp.css": "css/aboutapp.css?v=4e7e0a5e44",
"css/bootstrap-theme.css": "css/bootstrap-theme.css?v=b9b46bcc4d",
实际效果
"css/Albumdetail.css": "css/Albumdetail-df04a5981a.css",
"css/aboutapp.css": "css/aboutapp-4e7e0a5e44.css",
"css/bootstrap-theme.css": "css/bootstrap-theme-b9b46bcc4d.css",
插件 gulp-rev + gulp-rev-collector 更新为 gulp-rev-dxb + gulp-rev-collector 实现了预期效果。
替换文件字符串内容
源文件：
<link rel="stylesheet" href="/commonstatic/static/base/css3.0/base_WXorange.css">
<link rel="stylesheet" href="/commonstatic/static/base/en-iconfont3.0/iconfont.css">
目标文件：
文件版本与替换合并
// Html替换css、js文件版本
gulp.task('revHtml', function (cb) {
return gulp.src(['rev/**/*.json', htmlSrc])// '../static/**/*.html'
.pipe(replace(/\/commonstatic/ig, function () {
const regularProd=/(beta1|*.cn|prod)$/i;
const commonstatic = (regularProd.test(process.env.YG_ENV)) ? 'https://static.*.cn' : 'http://static.*.alpha' ;
return commonstatic;
}))
.pipe(revCollector({
replaceReved: true,
}))
.pipe(gulp.dest(staticDesc));
});
压缩html
gulp.task('minify-html', function () {
return gulp.src(htmlDesc)
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
minifyJS: true, //压缩页面JS
minifyCSS: true, //压缩页面CSS
minifyURLs: true
}))
.pipe(gulp.dest(staticDesc));
});
压缩css,压缩js，混淆代码
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(autoprefixer({
browsers: ['last 10 versions', 'Firefox >= 20', 'Opera >= 36', 'ie >= 9', 'Android >= 4.0', ],
cascade: true, //是否美化格式
remove: false //是否删除不必要的前缀
}))
.pipe(cleanCSS({
compatibility: 'ie8',
keepSpecialComments: '*' //保留所有特殊前缀
}))
.pipe(uglify({
compress: {
// warnings: false,
drop_console: true, // 过滤 console
drop_debugger: true // 过滤 debugger
}
}))
文件合并
// 合并，压缩文件
gulp.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
压缩图片
//压缩图片
gulp.task('minifyImg', function(){
return gulp.src(imgSrc)
.pipe(imagemin())
.pipe(gulp.dest(imgDest))// '../public/dist/images'
.pipe(notify({ message: 'image minify complete' }));
});
每次部署前，清空deploy.
// 清空目标文件
gulp.task('cleanDst', function () {
return gulp.src([staticDesc, './rev'], {read: false})
.pipe(clean({force: true}))
.pipe(notify({ message: 'clean Dst minify complete' }));
});
替换包含文件内容
gulp.src([cfg.htmlSrcGulp])
.pipe(fileinclude({
prefix: '@@',
basepath: `${staticSrc}commonModule/`
}))
.pipe(gulp.dest(cfg.htmlDestGulp));
处理gulp的通知
.pipe(notify({ message: '.... complete' }));
处理代码风格
// 检查js语法
gulp.task('jslint', function() {
return gulp.src(jsSrc)
.pipe(jshint({
"undef": false,
"unused": false
}))
.pipe(jshint.reporter(stylish)) //高亮提示
.pipe(jshint.reporter('fail'))
.pipe(notify({ message: 'jslint minify complete' }));
});
监控文件变化，执行相应任务
gulp.watch(cfg.htmlSrcGulp,function(event){
commonSet(cfg);
})
移动未处理的文件夹
// 将非js、非css移动到目标目录
gulp.task('mvNotDealAsset', function () {
return gulp.src(otherSrc)
.pipe(gulp.dest(staticDesc));
});
sass任务
gulp.task('sass', function() {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
build
gulp.task('build', function (done) {
runSequence(
['jslint'],
['cleanDst'],
['revCss'],
['revJs'],
['revHtml'],
['filemodule'],
['mvNotDealAsset'],
done);
});
package配置
devDependencies 依赖
"gulp": "^3.9.1",
"gulp-autoprefixer": "^2.3.1",
"gulp-cache": "^1.1.3",
"gulp-changed": "^1.2.1",
"gulp-clean": "^0.3.2",
"gulp-clean-css": "^3.9.0",
"gulp-concat": "^2.6.1",
"gulp-csslint": "^0.1.5",
"gulp-file-include": "^2.1.0",
"gulp-html-replace": "^1.6.2",
"gulp-htmlclean": "^2.7.22",
"gulp-htmlmin": "^5.0.1",
"gulp-if": "^1.2.5",
"gulp-imagemin": "^6.1.0",
"gulp-jshint": "^2.0.4",
"gulp-minify-html": "^1.0.4",
"gulp-notify": "^3.2.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-replaces": "^0.1.5",
"gulp-rev": "^7.1.2",
"gulp-rev-append": "^0.1.8",
"gulp-rev-collector": "^1.2.2",
"gulp-rev-collector-dxb": "^1.3.2",
"gulp-rev-dxb": "^9.0.1",
"gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.5",
"gulp-string-replace": "^1.1.2",
"gulp-uglify": "^3.0.0",
"gulp-watch": "^4.3.11",
Npm Script 启动
"gulp:alpha": "cd $PWD/scripts && YG_ENV=alpha gulp build:alpha",
"gulp:prod": "cd $PWD/scripts && YG_ENV=prod gulp build:prod",
"build:alpha": "npm run gulp:alpha && APP_ROOT=$PWD umi build",
"build:prod": "npm run gulp:prod && APP_ROOT=$PWD umi build",
