公司有个老项目，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.jsongulpfile.jspackage.json具体的gulp代码如下```jsvar 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.jsvar jspathArr = [jsPrefix + "bootstrap.min.js", jsPrefix + "TweenMax.min.js"] // 还有很多// 公共插件的css 合并成public.cssvar 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}/*---------开发环境 -------------*/// 合并 压缩 公共cssgulp.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添加md5gulp.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位置});// 合并 压缩 公共cssgulp.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 模板
... ...复制代码
content.html 主内容
camel车辆管理 复制代码