公司有个老项目,jq写的,左边是菜单,右边的内容。原本所有的内容都是单独写的.html,然后load到主页面里的,
居然还有这神操作,真是一百分。问题很多,比如缓存严重到爆炸,前端无法调试(.js变成xhr了,没法在source里找到,就不能打断点调试咯)。
终于等到产品提出能不能缓存不要这么严重!yesyes可以的,于是我就开始了该项目的改头换面之旅。
1.用gulp-html-extend 把公共的菜单都写到一个layout.html里,然后所有页面都用此模板
2.用gulp-concat, gulp-minify-css等压缩合并js,css
3.本来用gulp-rev,改变引入文件的后缀,但是用的时候发现跟gulp-html-extend合作并不完美(有部分md5没加上...)。然后用了gulp-rev-collector直接改变了文件名,并用manifest.json改变html里的文件名
4.然后区分一下dev和prod。 dev不改变后缀名,可以直接用dev-tool里的disabled cache来禁止缓存。prod会改变后缀名,给运维发布
文件目录
├── src // 源代码
│ ├── content
│ ├── js
│ ├── css
│ ├── images
│ ├── layout.html // 模板html
│ └── login.html // 登录
├── static // 第三方不打包资源
│ ├── dataJson // 模拟接口json
│ └── theme // 主题文件
├── .gitignore // git 忽略项
├── gulpfile.js // gulp入口文件
└── package.json // package.json
gulpfile.js
package.json
具体的gulp代码如下
```js
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var rev2 = require('gulp-rev-append');
var cssmin = require('gulp-minify-css');
var extender = require('gulp-html-extend');
var zip = require('gulp-zip');
var rev = require('gulp-rev')
var revCollector = require('gulp-rev-collector')
var clean = require('gulp-clean')
var less = require('gulp-less')
var del = require('del');
var pump = require('pump')
var tplhtml = 'src/content/*/*.html'
var jspath = 'src/js/**/*.js'
var jsPrefix = 'src/js/'
var cssPrefix = 'src/css/'
// 公共插件的js 合并成publicPlugin.js
var jspathArr = [jsPrefix + "bootstrap.min.js",
jsPrefix + "TweenMax.min.js"] // 还有很多
// 公共插件的css 合并成public.css
var cssPathArr = [cssPrefix + "bootstrap.css",
cssPrefix + "xenon-core.css"] // 还有很多
var jsSelfArr = ['src/js/data*/*.js', 'src/js/data*/**/*.js', 'src/js/common*/*.js']
// 大数组排除 小数组
function getExcept (bigArr, minArr) {
let arr = []
minArr.forEach(item => {
arr.push('!' + item)
})
bigArr = bigArr.concat(arr)
return bigArr
}
/*---------开发环境 -------------*/
// 合并 压缩 公共css
gulp.task('css', function () {
// 复制bootstrap
gulp.src('src/css/bootstrap.css')
.pipe(gulp.dest('static/css'))
// 编译less
gulp.src('src/css/custom.less')
.pipe(less())
.pipe(gulp.dest('static/css'))
return gulp.src(cssPathArr)
.pipe(concat('public.css')) //合并css
.pipe(gulp.dest('./static/css'))
});
// 公共的插件合并
gulp.task('js', ['js:concat'], function() {
let arr = ['src/js/publicPlugin.js'].concat(jsSelfArr)
return gulp.src(arr)
.pipe(gulp.dest('./static/js'))
});
gulp.task('js:concat', function() {
return gulp.src(jspathArr)
.pipe(concat('publicPlugin.js'))
.pipe(gulp.dest('./src/js'))
})
gulp.task('extender', ['js', 'css'], function() {
gulp.src([tplhtml])
.pipe(extender({annotations:false, verbose:false}))
.pipe(gulp.dest('static/content'));
gulp.src('src/login.html')
.pipe(gulp.dest('static'));
});
//监听文件修改
gulp.task('watch.css', function () {
gulp.watch(['src/css/**'], ['css', 'copy']);
});
gulp.task('watch.js', function () {
gulp.watch(['src/js/**/*.js', 'src/js/**/**/*.js'], ['js', 'copy']);
});
gulp.task('watch.html', function () {
gulp.watch([tplhtml], ['extender']);
gulp.watch('src/login.html', ['extender']);
});
/*---------开发环境 end-------------*/
/*---------生产环境 -------------*/
// 公共的插件合并,自开发的js添加md5
gulp.task('js:rev', ['js:concat'], function() {
let arr = ['src/js/publicPlugin.js'].concat(jsSelfArr)
return gulp.src(arr)
.pipe(rev())
.pipe(gulp.dest('./static/js'))
.pipe(rev.manifest())
.pipe(gulp.dest('./static/js')) // manifest位置
});
// 合并 压缩 公共css
gulp.task('css:rev', ['clean-css'],function () {
gulp.src('src/css/bootstrap.css')
.pipe(gulp.dest('static/css'))
// 编译less
gulp.src('src/css/custom.less')
.pipe(less())
.pipe(gulp.dest('static/css'))
return gulp.src(cssPathArr)
.pipe(concat('public.css')) //合并css
.pipe(rev())
.pipe(gulp.dest('./static/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('./static/css')) // manifest位置
});
gulp.task('rev', ['clean-html', 'js:rev', 'css:rev'], function() {
gulp.src(['./static/**/*.json', tplhtml])
.pipe(extender({annotations:false, verbose:false}))
.pipe(revCollector())
.pipe(gulp.dest('static/content'));
gulp.src(['./static/**/*.json', 'src/login.html'])
.pipe(revCollector())
.pipe(gulp.dest('static'));
});
// 复制 除要编译的css, js以外的
gulp.task('copy',function(){
let allCss = getExcept(['src/css/**'], cssPathArr)
let allJs = getExcept(['src/js/**', 'src/js/**/*.js'], jsSelfArr)
gulp.src('src/data/*.json')
.pipe(gulp.dest('static/data'))
gulp.src('src/images/**')
.pipe(gulp.dest('static/images'))
gulp.src(allCss)
.pipe(gulp.dest('static/css'))
gulp.src(allJs)
.pipe(gulp.dest('static/js'))
});
gulp.task('clean-js', function () {
return del(['static/js/**/**/*.js'])
});
gulp.task('clean-css', function () {
return del(['static/css/*.css'])
});
gulp.task('clean-html', function () {
return del(['static/content/**/*.html'])
});
gulp.task('clean', function () {
return del(['static/**/*.js', 'static/**/*.css', 'static/*']);
});
// 开发环境
gulp.task('default', function(){
gulp.start(['js', 'css', 'extender', 'copy', 'watch.css', 'watch.js', 'watch.html']);
});
// 生产环境
gulp.task('build', ['clean'], function(){
gulp.start(['rev', 'copy']);
})
复制代码
layout.html 模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- @@placeholder= title -->
...
<!-- @@placeholder= styles -->
...
</html>
复制代码
content.html 主内容
<!-- @@master ../../layout.html {"path" : "../../", "menu" : "car"}-->
<!-- @@block = title-->
<title>camel车辆管理</title>
<!-- @@close-->
<!-- @@block = styles-->
<link rel="stylesheet" href="../../css/style.css" />
<link rel="stylesheet" href="../../css/webuploader.css" />
<!-- @@close-->
<!-- @@block = content-->
<!-- @@close-->
复制代码