ssm+gulp+IDEA

最新推荐文章于 2019-08-13 10:29:06 发布

lxqnl1314

最新推荐文章于 2019-08-13 10:29:06 发布

阅读量373

点赞数

分类专栏：前端文章标签： gulp

本文链接：https://blog.csdn.net/lxqnl1314/article/details/80913707

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、IDEA添加nodejs

2、添加gulp

3、编写gulpfile.js

//引入gulp和gulp插件
var gulp = require('gulp'),
    runSequence = require('run-sequence'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector');
// var uglify = require('gulp-uglify');
//定义css、js文件路径，是本地css,js文件的路径，可自行配置
var cssUrl = 'css/**/*.css',
    jsUrl = 'js/**/*.js',
    jspUrl = 'page/**/*.jsp';
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
    return gulp.src(cssUrl)
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('dist/css'));
});

//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){
    return gulp.src(jsUrl)
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('dist/js'));
});

/*gulp.task('minify-js', function () {
    gulp.src('webapp/js/demo.js') // 要压缩的js文件
        .pipe(uglify())  //使用uglify进行压缩,更多配置请参考：
        .pipe(rename('demo.min.js'))
        .pipe(gulp.dest('dist/js/demo')); //压缩后的路径
});*/

//Html更换css、js文件版本
gulp.task('revHtml', function () {
    return gulp.src(['dist/**/*.json', jspUrl])  /*page是本地jsp文件的路径，可自行配置*/
        .pipe(revCollector())
        .pipe(gulp.dest('dist/release'));  /*jsp更换css、js文件版本,page也是和本地jsp文件的路径一致*/
});
//开发构建
gulp.task('dev', function (done) {
    condition = false;
    runSequence(
        ['revCss'],
        ['revJs'],
        ['revHtml'],
        done);});
gulp.task('default', ['dev']);

4、修改gulp-rev(版本8.1.1)和gulp-rev-collector(版本1.3.1)下的index.js

gulp-rev：index.js 135行

// manifest[originalFile] = revisionedFile;
manifest[originalFile] = originalFile + '?v=' + file.revHash;

gulp-rev-collector：index.js 40行

// var cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
var cleanReplacement =  path.basename(json[key]).split('?')[0];

5、添加gulp项目或选中gulpfile.js右键添加

6、执行gulp 任务 gulp dev

预期效果：

{
  "bootstrap-tabs.css": "bootstrap-tabs.css?v=6f18f80afe",
  "demo.css": "demo.css?v=ec4deb3353",
  "family.css": "family.css?v=54fcc69573",
  "font-awesome.css": "font-awesome.css?v=4b21e4156b",
  "jquery.scrollbar.min.css": "jquery.scrollbar.min.css?v=fb0bbfdd9e",
  "login/login2.css": "login/login2.css?v=5b740b4b22",
  "material-dashboard.css": "material-dashboard.css?v=2a0d48d6a1",
  "nouislider.css": "nouislider.css?v=87bbb7d1c3",
  "nth.tabs.css": "nth.tabs.css?v=06c2b17f02"
}

<link rel="stylesheet" type="text/css" href="<%=basePath%>/css/family.css?v=54fcc69573"/>
<link rel="stylesheet" href="<%=basePath%>/css/material-dashboard.css?v=2a0d48d6a1">