采用gulp加多版本号,更新静态文件版本号

采用gulp加多版本号,更新静态文件版本号。详解前端自动化学工业具gulp自动增加版本号,gulp版本号

事先,笔者介绍了读书安装并配置前端自动化学工业具Gulp,以为gulp确实比grunt的配备轻巧非常多,于是本身决定再深远学习一下gulp,就去网络查了资料,发现gulp还是能自动增多版本号,那个职能就为自家平日在立异css或js时老是在客商端存在缓存导致立异后的作用无法实时展现的抑郁。所以就赶忙去试了须臾间,果真能够,很喜欢呀,真是为品种开支,为意义的火速表现提供了多数的有益。

兑现原理:

1、修改js和css文件;

2、通过对js,css文件内容开展hash运算,生成多个文书的独一hash字符串(假如文件修改则hash号会产生变化);

3、替换html中的js,css文件名,生成一个带本子号的文件名。

现行反革命互连网的方案都以生成二个新的dist目录,里面蕴含了要发布的html、js、css等公事。可是在实质上的百货店的种类中,会有动静无法生成新的HTML实行公布,供给在原来的HTML文件上进行js
、css版本的替换.
这里享受下自个儿在其实项目中经过转移插件然后在原目录结构下展开版本的调控方案。(在此间,作者有一点点不太清楚原来的书文者的意趣,因为您既然修改了js或css,那么html中引进那一个文件的版本号必然会发生变化,也便是html也随后变化了,假让你不对新的html实行发布,那线上的html中的版本号依旧老的本子号,就从不起到履新缓存的功能,那我们辛费劲苦的配置gulp来增添那几个本子号干嘛?)

原html文件代码

<link rel="stylesheet" href="../css/default.css">
<script src="../js/app.js"></script>

预期效果与利益:在原目录结构下html文件代码

<link rel="stylesheet" href="../css/default.css?v=5a636d79c4">
<script src="../js/app.js?v=3a0d844594"></script>
background:url("../images/none.png?v=8f204d4")

兑现格局:

1、安装gulp和gulp插件

npm install --save-dev gulp
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev gulp-asset-rev
npm install --save-dev run-sequence

2、编写gulpfile.js

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

//定义css、js源文件路径
var cssSrc = 'css/*.css',
  jsSrc = 'js/*.js';

//为css中引入的图片/字体等添加hash编码
gulp.task('assetRev', function(){
  return gulp.src(cssSrc)  //该任务针对的文件
   .pipe(assetRev()) //该任务调用的模块
   .pipe(gulp.dest('src/css')); //编译后的路径
});

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


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


//Html替换css、js文件版本
gulp.task('revHtml', function () {
  return gulp.src(['rev/**/*.json', 'View/*.html'])
    .pipe(revCollector())
    .pipe(gulp.dest('View'));
});


//开发构建
gulp.task('default', function (done) {
  condition = false;
  runSequence(    //需要说明的是,用gulp.run也可以实现以上所有任务的执行,只是gulp.run是最大限度的并行执行这些任务,而在添加版本号时需要串行执行(顺序执行)这些任务,故使用了runSequence.
    ['assetRev'],
    ['revCss'],
    ['revJs'],
    ['revHtml'],
    done);
});

执行gulp命令后的效劳

//rev目录下生成了manifest.json对应文件
{
 "default.css": "default-803a7fe4ae.css"
}


<link rel="stylesheet" href="../css/default-803a7fe4ae.css">
<script src="../js/app-3a0d844594.js"></script>

很明显那不是大家须要的作用

3、更改gulp-rev和gulp-rev-collector**
**

打开node_modules\gulp-rev\index.js

第144行 manifest[originalFile] = revisionedFile;

更新为: manifest[originalFile] = originalFile + ‘?v=’ +
file.revHash;

打开nodemodules\gulp-rev\nodemodules\rev-path\index.js

10行 return filename + ‘-‘ + hash + ext;

更新为: return filename + ext;

打开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) ) {

打开node_采用gulp加多版本号,更新静态文件版本号。modules\皇家赌场手机版 ,gulp-assets-rev\index.js

78行 var verStr = (options.verConnecter || “-“) + md5;

更新为:var verStr = (options.verConnecter || “”) + md5;

80行 src = src.replace(verStr, ”).replace(/(\.[^\.]+)$/, verStr +
“$1”);

更新为:src=src+”?v=”+verStr;

再施行gulp命令,获得的结果如下(效果不错):

<link rel="stylesheet" href="../css/default.css?v=803a7fe4ae">
<script src="../js/app.js?v=3a0d844594"></script>
background:url("../images/none.png?v=8f204d4")

但是若是我们转移了css和js后,再实践gulp命令,获得的结果会如下:

<link rel="stylesheet" href="../css/default.css?v=33379df310?v=803a7fe4ae">
<script src="../js/app.js?v=3a0d844594?v=3a0d844594"></script>

有未有觉察,会在版本号前边再加多三个本子号,因为gulp只替换了原先文件名,那样又不适合预期效果了,所以我们想到,还须要修改插件的交替正则表明式。

4、继续改造gulp-rev-collector

打开node_modules\gulp-rev-collector\index.js

第107行 regexp: new RegExp( ‘([\/\\\\\'”])’ + pattern, ‘g’ ),

更新为: regexp: new RegExp( ‘([\/\\\\\'”])’ +
pattern+'(\\?v=\\w{10})?’, ‘g’ ),

于今您随意实践多少遍gulp命令,获得的html效果都以

<link rel="stylesheet" href="../css/default.css?v=5a636d79c4">
<script src="../js/app.js?v=3a0d844594"></script>

以下是本身自身写的二个不仅可以够编写翻译less,又有啥不可削减、重命名css和js,同一时候能够压缩html并活动加多版本号的gulp.js配置文件,当然也是参照了原著者的点子:

//引入gulp和gulp插件
var gulp = require('gulp'),
  less = require('gulp-less'),
  assetRev = require('gulp-asset-rev'),
  minifyCss = require('gulp-minify-css'),
  uglify = require('gulp-uglify'),
  htmlmin = require('gulp-htmlmin'),
  rename = require('gulp-rename'),
  imagemin = require('gulp-imagemin'),
  runSequence = require('run-sequence'),
  rev = require('gulp-rev'),
  revCollector = require('gulp-rev-collector');

//定义css、js源文件路径
var cssSrc = 'css/*.css',
  cssMinSrc = 'dist/css/*.css',
  jsSrc = 'js/*.js',
  jsMinSrc = 'dist/js/*.js',
  lessSrc = 'less/*.less',
  imgMinSrc = 'dist/images/*.{png,jpg,gif,ico}',
  htmlSrc = '*.html';

//编译less 定义一个less任务(自定义任务名称)
gulp.task('less', function(){
  return gulp.src(lessSrc)  //该任务针对的文件
   .pipe(less()) //该任务调用的模块
   .pipe(gulp.dest('css'));//编译后的路径
});

//为css中引入的图片/字体等添加hash编码
gulp.task('assetRev', function(){
  return gulp.src(cssSrc)  //该任务针对的文件
   .pipe(assetRev()) //该任务调用的模块
   .pipe(gulp.dest('src')); //编译后的路径
});

//压缩css
gulp.task('cssMin', function() {
  return gulp.src(cssSrc)   //压缩的文件
    .pipe(rename({suffix: '.min'}))  
    .pipe(minifyCss()) //执行压缩
    .pipe(gulp.dest('dist/css'));  //输出文件夹
});

//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
  return gulp.src(cssMinSrc)
    .pipe(rev()) //文件名加MD5后缀
    .pipe(rev.manifest())  //必须有这个方法 生成一个rev-manifest.json
    .pipe(gulp.dest('dist/css'));  //将rev-manifest.json 保存到 dist/css 目录内
});

//压缩js
gulp.task('uglify',function(){
  return gulp.src(jsSrc)
   .pipe(rename({suffix: '.min'}))
   .pipe(uglify())
   .pipe(gulp.dest('dist/js'));
});

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

//压缩html
gulp.task('htmlMin',function(){
  var options = {
    collapseWhitespace:true,  //从字面意思应该可以看出来,清除空格,压缩html,这一条比较重要,作用比较大,引起的改变压缩量也特别大。
    collapseBooleanAttributes:true,  //省略布尔属性的值,比如:<input checked="checked"/>,那么设置这个属性后,就会变成 <input checked/>。
    removeComments:true,  //清除html中注释的部分,我们应该减少html页面中的注释。
    removeEmptyAttributes:true,  //清除所有的空属性。
    removeScriptTypeAttributes:true,  //清除所有script标签中的type="text/javascript"属性。
    removeStyleLinkTypeAttributes:true,  //清楚所有Link标签上的type属性。
    minifyJS:true,  //压缩html中的javascript代码。
    minifyCSS:true  //压缩html中的css代码。
  };
  return gulp.src(htmlSrc)
   .pipe(htmlmin(options))
   .pipe(gulp.dest('dist/html'));
});

//Html替换css、js文件版本
gulp.task('revHtml', function () {
  return gulp.src(['dist/**/*.json', 'dist/html/*.html'])
    .pipe(revCollector())
    .pipe(gulp.dest('dist/html'));
});

//压缩image
gulp.task('imageMin', function () {
  gulp.src('images/*.{png,jpg,gif,ico}')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
});

gulp.task('revImage', function(){
  return gulp.src(imgMinSrc)
    .pipe(rev())
    .pipe(rev.manifest())  //必须有这个方法
    .pipe(gulp.dest('dist/images'));
});

gulp.task('default', function (done) {
  //condition = false;
  runSequence(  //此处不能用gulp.run这个最大限度并行(异步)执行的方法,要用到runSequence这个串行方法(顺序执行)才可以在运行gulp后顺序执行这些任务并在html中加入版本号
    'less',
    'assetRev',
    'cssMin',
    'revCss',
    'uglify',
    'revJs',
    'imageMin',
    'revImage',
    'htmlMin', 
    'revHtml',    
    done);
});

时下,不知怎么须要求运营五回gulp才能够给html中引进的图形增添版本号,所以还在追寻中,也请大神给教导带领,多谢!

以上正是本文的全体内容,希望对我们的学习抱有支持,也愿意大家多多帮助帮客之家。

在此之前,作者介绍了学习安装并陈设前端自动化学工业具Gulp,认为gulp确实比grunt的配备简单比较多…

前面,作者介绍了深造安装并安顿前端自动化工具Gulp,以为gulp确实比grunt的布局轻松相当多,于是本身调节再深远学习一下gulp,就去互连网查了资料,发掘gulp还能活动增多版本号,那个功用就为自身平时在创新css或js时老是在客户端存在缓存导致立异后的作用无法实时显示的沉郁。所以就急匆匆去试了一晃,果真能够,很欢娱啊,真是为品种支出,为职能的高效表现提供了繁多的有益。

皇家赌场手机版 1

废话:大多终了要给工程扩大版本号,清理浏览器缓存,所以利用那一个鬼来搞一把

落到实处原理:

1,说明:使用gulp为js和css静态文件增添版本号,进级服务器代码后,能够绝不强制更新浏览器或清空缓存,优化客户体验。

理之当然这里必要你用nodeJS的npm工具安装一些事物

1、修改js和css文件;

    本文首要仿效http://www.jb51.net/article/100652.htm,
可是碰见有些小坑,特此记录

不会nodejs,你先百度一把!

2、通过对js,css文件内容举办hash运算,生成一个文书的独一hash字符串(如果文件修改则hash号会发生变化);

2,预期效果与利益:在原目录结构下html文件代码

积谷防饥干活:你必要用npm包安装这个插件。

3、替换html中的js,css文件名,生成一个带本子号的文件名。

<link href =”../css/index.css?v=8f204d4″>

npminstall–save-dev gulpnpminstall–save-dev
gulp-revnpminstall–save-dev gulp-rev-collectornpminstall–save-dev
gulp-asset-revnpminstall–save-dev run-sequence

现行反革命英特网的方案都以生成一个新的dist目录,里面富含了要宣布的html、js、css等公事。不过在实质上的厂商的连串中,会有动静无法生成新的HTML实行发布,须求在原本的HTML文件上拓宽js
、css版本的替换.
这里享受下本身在其实项目中经过转移插件然后在原目录结构下张开版本的主宰方案。(在此地,我有一些不老子@楚原文者的意趣,因为您既然修改了js或css,那么html中引进这么些文件的版本号必然会发生变化,约等于html也随即变动了,假如你不对新的html举办发表,那线上的html中的版本号照旧老的本子号,就从不起到履新缓存的作用,这我们辛辛勤苦的配置gulp来加多那几个本子号干嘛?)

3,落成格局:

理当如此作者首先次安装失利了,运行不了gulp;

原html文件代码

前提:须求安装node.js

于是,笔者用了大局安装gulp 命令为:

<link rel="stylesheet" href="../css/default.css">
<script src="../js/app.js"></script>

1、安装gulp和gulp插件

npm-g install gulp

预料成效:在原目录结构下html文件代码

开发node命令行,cd 步入到品种根文件夹,

自己用的win7,所以在CMD中运转一把就开采安装成功了

<link rel="stylesheet" href="../css/default.css?v=5a636d79c4">
<script src="../js/app.js?v=3a0d844594"></script>
background:url("../images/none.png?v=8f204d4")

npm install–save-dev gulp

npm install–save-dev gulp-rev

npm install–save-dev gulp-rev-collector

npm install–save-dev gulp-asset-rev

npm install–save-dev run-sequence

好了,开头为大家工程扩张版本号

金玉满堂格局:

花色布局目录为:

第一步:打开node_modules\gulp-rev\index.js

1、安装gulp和gulp插件

皇家赌场手机版 2

找到下边包车型客车代码,将注释掉的改为上边包车型大巴内容,此处为改换再次回到的本子号格式

npm install --save-dev gulp
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev gulp-asset-rev
npm install --save-dev run-sequence

2、编写gulpfile.js

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

2、编写gulpfile.js

小编是在templates文件夹( 存放html代码 )同级文件夹内成立的gulpfile.js

第二步:打开node_modules\rev-path\index.js

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

//定义css、js源文件路径
var cssSrc = 'css/*.css',
  jsSrc = 'js/*.js';

//为css中引入的图片/字体等添加hash编码
gulp.task('assetRev', function(){
  return gulp.src(cssSrc)  //该任务针对的文件
   .pipe(assetRev()) //该任务调用的模块
   .pipe(gulp.dest('src/css')); //编译后的路径
});

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


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


//Html替换css、js文件版本
gulp.task('revHtml', function () {
  return gulp.src(['rev/**/*.json', 'View/*.html'])
    .pipe(revCollector())
    .pipe(gulp.dest('View'));
});


//开发构建
gulp.task('default', function (done) {
  condition = false;
  runSequence(    //需要说明的是,用gulp.run也可以实现以上所有任务的执行,只是gulp.run是最大限度的并行执行这些任务,而在添加版本号时需要串行执行(顺序执行)这些任务,故使用了runSequence.
    ['assetRev'],
    ['revCss'],
    ['revJs'],
    ['revHtml'],
    done);
});

//引入gulp和gulp插件,

vargulp = require(‘gulp’),

  assetRev = require(‘gulp-asset-rev’),

  runSequence = require(‘run-sequence’),

  rev = require(‘gulp-rev’),

  revCollector = require(‘gulp-rev-collector’);

//定义css、js源文件路线

varcssSrc = ‘css/*.css’,  //
注意这里修改为你的源文件路线,举例我的门类css文件,设置为
static/css/main/*.css ,js同理。

  jsSrc = ‘js/*.js’;

//为css中引进的图形/字体等增添hash编码

gulp.task(‘assetRev’, function(){

  returngulp.src(cssSrc)  //该职分针对的公文

   .pipe(assetRev()) //该任务调用的模块

   .pipe(gulp.dest(‘src/css’)); //编写翻译后的路径

});

//CSS生成文件hash编码并扭转 rev-manifest.json文件名对照映射

gulp.task(‘revCss’, function(){

  returngulp.src(cssSrc)

    .pipe(rev())

    .pipe(rev.manifest())

    .pipe(gulp.dest(‘rev/css’));

});

//js生成文件hash编码并扭转 rev-manifest.json文件名对照映射

gulp.task(‘revJs’, function(){

  returngulp.src(jsSrc)

    .pipe(rev())

    .pipe(rev.manifest())

    .pipe(gulp.dest(‘rev/js’));

});

//Html替换css、js文件版本

gulp.task(‘revHtml’, function() {

  returngulp.src([‘rev/**/*.json’, ‘View/*.html’])

    .pipe(revCollector())

    .pipe(gulp.dest(‘View’)); //
注意这里是变化的新的html文件,要是设置为您的种类html文件所在文件夹,会覆盖旧的html文件,

});

//开垦构建

gulp.task(‘default’, function(done) {

  condition = false;

  runSequence(   
//须要表明的是,用gulp.run也能够兑现上述全部职务的执行,只是gulp.run是最大限度的并行实行这几个职责,而在增多版本号时索要串行实行(顺序实践)这么些任务,故使用了runSequence.

    [‘assetRev’],

    [‘revCss’],

    [‘revJs’],

    [‘revHtml’],

    done);

});

找到下边包车型大巴代码,将注释掉的改为下边包车型地铁剧情,此处为转移关联的下划线(老姿找了半天找不到那个rev-path,是因为在此在此之前的gulp-rev插件将那某些合一在了中间,而继续的版本将rev-path从gulp-rev里抽离出来了,所以要在等级次序目录的node_modules里找那几个插件,大家无需手动安装,那是gulp-rev的依赖,npm会自动安装!)

实践gulp命令后的机能

3,修改插件

/*returnfilename+’-‘+ hash + ext;*/returnfilename+ ext;

//rev目录下生成了manifest.json对应文件
{
 "default.css": "default-803a7fe4ae.css"
}


<link rel="stylesheet" href="../css/default-803a7fe4ae.css">
<script src="../js/app-3a0d844594.js"></script>

原来的小谈起了此处实行gulp查看更新功用,建议先不要实施。修改产生后再执行。

第三步:打开node_modules\gulp-rev-collector\index.js

很醒目那不是我们需求的效力

— 1 

找到上面包车型地铁代码,将注释掉的改为上面包车型地铁开始和结果,此文件最佳改四个地方

3、更改gulp-rev和gulp-rev-collector**
**

打开node_modules\gulp-rev\index.js

一处:

打开node_modules\gulp-rev\index.js

134行:

/*if( !_.isString(json[key]) ||
path.basename(json[key]).replace(new RegExp( opts.revSuffix ),”) !== 
path.basename(key) ) {          isRev =0;  }*/if(
!_.isString(json[key]) || path.basename(json[key]).split(‘?’)[0]
!== path.basename(key) ) {          isRev =0;  }

第144行 manifest[originalFile] = revisionedFile;

manifest[originalFile] = revisionedFile;

二处:

更新为: manifest[originalFile] = originalFile + ‘?v=’ +
file.revHash;

更新为:

//return

打开nodemodules\gulp-rev\nodemodules\rev-path\index.js

manifest[originalFile] = originalFile + ‘?v=’ + file.revHash;

pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g,”\\$&”);//禁止重复增添版本号varrp

pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g,”\\$&”); 
  rp = pattern +”(\\?v=(\\d|[a-z]){8,10})*”;returnrp;

三处:

/*patterns.push( escPathPattern( (path.dirname(key) ===’.’?”:
closeDirBySep(path.dirname(key)) ) + path.basename(key,
path.extname(key)) )                            + opts.revSuffix       
                    + escPathPattern( path.extname(key) )               
        );*/patterns.push( escPathPattern( (path.dirname(key)
===’.’?”: closeDirBySep(path.dirname(key)) ) + path.basename(key,
path.extname(key)) )                            + opts.revSuffix       
                    + escPathPattern( path.extname(key) )
+”(\\?v=(\\d|[a-z]){8,10})*”);

上述都做过多了,就能够创设多少个文件,当然这么些目录最棒创建在工程名下第超级目录

比方作者的目录为:

第四步:成立三个gulpfile.js文件所在目录如下。

内容为:

//引进gulp和gulp插件vargulp =require(‘gulp’),  assetRev
=require(‘gulp-asset-rev’),  runSequence =require(‘run-sequence’),  rev
=require(‘gulp-rev’),  revCollector
=require(‘gulp-rev-collector’);//定义css、js源文件路线何况能够流传四个不等的文件夹varcssSrc
=’css/*.css’,  jsSrc =’js/lib/config.js’,  jsSrcc
=’js/loacal/*/*.js’,  ico
=’img/icon/*.ico’;//为css中引进的图样/字体等增加hash编码gulp.task(‘assetRev’,function(){returngulp.src(cssSrc)//该职务针对的文件.pipe(assetRev())//该义务调用的模块.pipe(gulp.dest(‘css’));//编写翻译后的门道});//CSS生成文件hash编码并生成
rev-manifest.json文件名对照映射gulp.task(‘revCss’,function(){returngulp.src(cssSrc) 
  .pipe(rev())    .pipe(rev.manifest())   
.pipe(gulp.dest(‘rev/css’));});//js生成文件hash编码并生成
rev-manifest.json文件名对照映射gulp.task(‘revJs’,function(){returngulp.src([jsSrcc,jsSrc]) 
  .pipe(rev())    .pipe(rev.manifest())   
.pipe(gulp.dest(‘rev/js’));});//js生成文件hash编码并生成
rev-manifest.json文件名对照映射gulp.task(‘revIco’,function(){returngulp.src(ico) 
  .pipe(rev())    .pipe(rev.manifest())   
.pipe(gulp.dest(‘rev/ico’));});//Html替换css、js文件版本gulp.task(‘revHtml’,function(){returngulp.src([‘rev/**/*.json’,’html/*/*.html’]) 
  .pipe(revCollector())   
.pipe(gulp.dest(‘html’));});//开垦营造gulp.task(‘default’,function(done){ 
condition =false; 
runSequence(//表达,用gulp.run也足以实现以上全数任务,只是gulp.run是最大限度的并行试行那个义务,而在增加版本号时需求串行实施(顺序实践)那些职分,故使用了runSequence.[‘assetRev’], 
  [‘revCss’],    [‘revJs’],    [‘revIco’],    [‘revHtml’],   
done);});

ok,最终转手就径直运维就足以了

D:\DFF\PROJECT\KJW_HTML>gulp[19:41:14] Using gulpfile
D:\DFF\PROJECT\KJW_HTML\gulpfile.js[19:41:14]
Starting’default’…[19:41:14] Starting’assetRev’…[19:41:14]
Finished’assetRev’after123ms[19:41:14] Starting’revCss’…[19:41:14]
Finished’revCss’after25ms[19:41:14] Starting’revJs’…[19:41:14]
Finished’revJs’after75ms[19:41:14] Starting’revIco’…[19:41:14]
Finished’revIco’after3.06ms[19:41:14] Starting’revHtml’…[19:41:16]
Finished’revHtml’after1.34s[19:41:16]
Finished’default’after1.58sD:\DFF\PROJECT\KJW_HTML>

你运转完后就足以见到有着静态文件前面都有版本号了,因为微微不用改的能源目录不用变,如jq和别的职能插件

加完之后:

摘要:
 越来越多前端学习请加群:JS/NDEJS/HTML5/(前端)458633781 或关心心魅体公众号:ilittlekiss

10行 return filename + ‘-‘ + hash + ext;

— 2 

更新为: return filename + ext;

打开 node_modules\rev-path\index.js  

打开node_modules\gulp-rev-collector\index.js

细心:原来的小说这里的路径是打开nodemodules\gulp-rev\nodemodules\rev-path\index.js,根据你的具体情状举行修改。

31行 if ( !_.isString(json[key]) ||
path.basename(json[key]).replace(new RegExp( opts.revSuffix ), ” )
!==  path.basename(key) ) {

9行 return modifyFilename(pth, (filename, ext) =>
`${filename}-${hash}${ext}`);

更新为: if ( !_.isString(json[key]) ||
path.basename(json[key]).split(‘?’)[0] !== path.basename(key) ) {

更新为:return modifyFilename(pth, (filename, ext) =>
`${filename}${ext}`);

打开node_modules\gulp-assets-rev\index.js

17行 return modifyFilename(pth, (filename, ext) =>
filename.replace(new RegExp(`-${hash}$`), ”) + ext);

78行 var verStr = (options.verConnecter || “-“) + md5;

更新为: return modifyFilename(pth, (filename, ext) => filename +
ext);

更新为:var verStr = (options.verConnecter || “”) + md5;

— 3

80行 src = src.replace(verStr, ”).replace(/(\.[^\.]+)$/, verStr +
“$1”);

打开node_modules\gulp-rev-collector\index.js

更新为:src=src+”?v=”+verStr;

40行:var cleanReplacement =  path.basename(json[key]).replace(new
RegExp( opts.revSuffix ), ” );

再施行gulp命令,获得的结果如下(效果不错):

更新为:var cleanReplacement =
 path.basename(json[key]).split(‘?’)[0];

<link rel="stylesheet" href="../css/default.css?v=803a7fe4ae">
<script src="../js/app.js?v=3a0d844594"></script>
background:url("../images/none.png?v=8f204d4")

— 4

只是借使大家更换了css和js后,再实施gulp命令,获得的结果会如下:

打开node_modules\gulp-assets-rev\index.js

<link rel="stylesheet" href="../css/default.css?v=33379df310?v=803a7fe4ae">
<script src="../js/app.js?v=3a0d844594?v=3a0d844594"></script>

78行 var verStr = (options.verConnecter || “-“) + md5;

有未有察觉,会在版本号后边再加多二个版本号,因为gulp只替换了原本文件名,那样又不切合预期效应了,所以大家想到,还亟需修改插件的更迭正则表明式。

更新为:var verStr = (options.verConnecter || “”) + md5;

4、继续改变gulp-rev-collector

80行 src = src.replace(verStr, ”).replace(/(\.[^\.]+)$/, verStr +
“$1”);

打开node_modules\gulp-rev-collector\index.js

更新为:src=src+”?v=”+verStr;

第107行 regexp: new RegExp( ‘([\/\\\\\'”])’ + pattern, ‘g’ ),

— 5、更改gulp-rev-collector

更新为: regexp: new RegExp( ‘([\/\\\\\'”])’ +
pattern+'(\\?v=\\w{10})?’?’), ‘g’ ),

打开node_modules\gulp-rev-collector\index.js

这几天你随意实行稍微遍gulp命令,得到的html效果都以

第163行

<link rel="stylesheet" href="../css/default.css?v=5a636d79c4">
<script src="../js/app.js?v=3a0d844594"></script>

regexp: new RegExp( prefixDelim + pattern, ‘g’ ),

以下是自家自身写的三个不仅能够编写翻译less,又足以削减、重命名css和js,相同的时候能够压缩html并自行加多版本号的gulp.js配置文件,当然也是参照了原来的书文者的不二秘诀:

更新为 regexp: new RegExp( prefixDelim + pattern +
‘(\\?v=\\w{10})?’, ‘g’ ),

//引入gulp和gulp插件
var gulp = require('gulp'),
  less = require('gulp-less'),
  assetRev = require('gulp-asset-rev'),
  minifyCss = require('gulp-minify-css'),
  uglify = require('gulp-uglify'),
  htmlmin = require('gulp-htmlmin'),
  rename = require('gulp-rename'),
  imagemin = require('gulp-imagemin'),
  runSequence = require('run-sequence'),
  rev = require('gulp-rev'),
  revCollector = require('gulp-rev-collector');

//定义css、js源文件路径
var cssSrc = 'css/*.css',
  cssMinSrc = 'dist/css/*.css',
  jsSrc = 'js/*.js',
  jsMinSrc = 'dist/js/*.js',
  lessSrc = 'less/*.less',
  imgMinSrc = 'dist/images/*.{png,jpg,gif,ico}',
  htmlSrc = '*.html';

//编译less 定义一个less任务(自定义任务名称)
gulp.task('less', function(){
  return gulp.src(lessSrc)  //该任务针对的文件
   .pipe(less()) //该任务调用的模块
   .pipe(gulp.dest('css'));//编译后的路径
});

//为css中引入的图片/字体等添加hash编码
gulp.task('assetRev', function(){
  return gulp.src(cssSrc)  //该任务针对的文件
   .pipe(assetRev()) //该任务调用的模块
   .pipe(gulp.dest('src')); //编译后的路径
});

//压缩css
gulp.task('cssMin', function() {
  return gulp.src(cssSrc)   //压缩的文件
    .pipe(rename({suffix: '.min'}))  
    .pipe(minifyCss()) //执行压缩
    .pipe(gulp.dest('dist/css'));  //输出文件夹
});

//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
  return gulp.src(cssMinSrc)
    .pipe(rev()) //文件名加MD5后缀
    .pipe(rev.manifest())  //必须有这个方法 生成一个rev-manifest.json
    .pipe(gulp.dest('dist/css'));  //将rev-manifest.json 保存到 dist/css 目录内
});

//压缩js
gulp.task('uglify',function(){
  return gulp.src(jsSrc)
   .pipe(rename({suffix: '.min'}))
   .pipe(uglify())
   .pipe(gulp.dest('dist/js'));
});

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

//压缩html
gulp.task('htmlMin',function(){
  var options = {
    collapseWhitespace:true,  //从字面意思应该可以看出来,清除空格,压缩html,这一条比较重要,作用比较大,引起的改变压缩量也特别大。
    collapseBooleanAttributes:true,  //省略布尔属性的值,比如:<input checked="checked"/>,那么设置这个属性后,就会变成 <input checked/>。
    removeComments:true,  //清除html中注释的部分,我们应该减少html页面中的注释。
    removeEmptyAttributes:true,  //清除所有的空属性。
    removeScriptTypeAttributes:true,  //清除所有script标签中的type="text/javascript"属性。
    removeStyleLinkTypeAttributes:true,  //清楚所有Link标签上的type属性。
    minifyJS:true,  //压缩html中的javascript代码。
    minifyCSS:true  //压缩html中的css代码。
  };
  return gulp.src(htmlSrc)
   .pipe(htmlmin(options))
   .pipe(gulp.dest('dist/html'));
});

//Html替换css、js文件版本
gulp.task('revHtml', function () {
  return gulp.src(['dist/**/*.json', 'dist/html/*.html'])
    .pipe(revCollector())
    .pipe(gulp.dest('dist/html'));
});

//压缩image
gulp.task('imageMin', function () {
  gulp.src('images/*.{png,jpg,gif,ico}')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
});

gulp.task('revImage', function(){
  return gulp.src(imgMinSrc)
    .pipe(rev())
    .pipe(rev.manifest())  //必须有这个方法
    .pipe(gulp.dest('dist/images'));
});

gulp.task('default', function (done) {
  //condition = false;
  runSequence(  //此处不能用gulp.run这个最大限度并行(异步)执行的方法,要用到runSequence这个串行方法(顺序执行)才可以在运行gulp后顺序执行这些任务并在html中加入版本号
    'less',
    'assetRev',
    'cssMin',
    'revCss',
    'uglify',
    'revJs',
    'imageMin',
    'revImage',
    'htmlMin', 
    'revHtml',    
    done);
});

此时此刻,不知怎么必须要运行三回gulp才得以给html中引进的图样增加版本号,所以还在搜索中,也请大神给指引辅导,感谢!

4,执行gulp

如上便是本文的全体内容,希望对大家的学习抱有协助,也可望大家多多协助脚本之家。

1 实行gulp,查看html文件是还是不是正确增多版本号。

你大概感兴趣的小说:

  • gulp-htmlmin压缩html的gulp插件实例代码
  • 基于gulp合併压缩Seajs模块的格局表明
  • gulp-uglify
    与gulp.watch()合营使用时报错(重复压缩难点)
  • 依据Node.js的JavaScript项目构建筑工程具gulp的应用教程
  • nodejs完毕简单的gulp打包

2 每回换代完代码,实践gulp,再次创下新到服务器上就可以。

Leave a Comment.