gulp管理 jquery后台管理项目

公司有个老项目，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-->
复制代码