最新消息:欢迎光临!

gulp添加版本号

tools findever 1200浏览 0评论

* 安装nodejs
* cd至项目根目录
* 初始化package.json
    npm init -f
* 安装插件
    npm install -g gulp
    npm install –save-dev gulp
    npm install –save-dev gulp-rev
    npm install –save-dev gulp-rev-collector
    npm install –save-dev run-sequence

* 更改gulp-rev和gulp-rev-collector
    1.打开node_modules\gulp-rev\index.js
        第144行: manifest[originalFile] = revisionedFile;
        更新为: manifest[originalFile] = originalFile + ‘?v=’ + file.revHash;
    2.打开nodemodules\rev-path\index.js
        10行: return filename + ‘-‘ + hash + ext;
        更新为: return filename + ext;
    3.打开node_modules\gulp-rev-collector\index.js
        31行:if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), ” ) !== path.basename(key) ) {
        更新为: if ( !_.isString(json[key]) || path.basename(json[key]).split(‘?’)[0] !== path.basename(key) ) {
        90行:var patterns = [ escPathPattern(key) ];

        更新为:var patterns = [ escPathPattern(key)+ ‘(\\?v=[\\da-z]+)?’ ];

* 项目根目录下编写gulpfile.js

//引入gulp和gulp插件
var gulp = require('gulp'),
    runSequence = require('run-sequence'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector');

//定义css、js文件路径,是本地css,js文件的路径,可自行配置
var cssUrl = 'public/**/*.css',
    jsUrl = 'public/**/*.js';

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

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

//nosql更换css、js文件版本
gulp.task('revNosqlHtml', function () {
    return gulp.src(['rev/**/*.json', 'apps/nosql/views/**/*.php'])  /*html、php文件路径*/
        .pipe(revCollector())
        .pipe(gulp.dest('apps/nosql/views'));  /*更换css、js文件版本*/
});

//开发构建
gulp.task('dev', function (done) {
    runSequence(
        ['revCss'],
        ['revJs'],
        ['revNosqlHtml'],
        done);});
gulp.task('default', ['dev']);

然后通过phpstorm中右键gulpfile.js执行任务,或者直接命令行执行gulp即可。支持版本号的自动更新哦,不会出现叠加情况

转载请注明:Findever » gulp添加版本号

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址