小程序如何开发_详解前端主动化东西gulp主动添加版本号

  • 栏目:公司新闻 时间:2021-01-12 16:08 分享新闻到:
<返回列表

详解前端自动化工具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'));
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_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+'(, '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}',
 ';
//编译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 = {
 colla凡科抠图eWhitespace:true, //从字面意思应该可以看出来,清除空格,压缩html,这一条比较重要,作用比较大,引起的改变压缩量也特别大。
 colla凡科抠图eBooleanAttributes: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 () {
 '])
 .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中引入的图片添加版本号,所以还在摸索中,也请大神给指点指点,谢谢!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


分享新闻到:

更多阅读

小程序如何开发_详解前端主动化东西gu

公司新闻 2021-01-12
详细说明前端开发全自动化工厂具gulp全自动加上版本号号 -小坏 本文关键详细介绍了详细...
查看全文

淘宝抠图软件推荐-降低网站跳失率的策略

公司新闻 2021-01-12
连锁加盟店面微信小程序 对于连锁加盟店> 微商代理城 基本版 方式版 悦享版 多商家版 各大...
查看全文

广州凡科互联网科技股份有限公司招聘银

公司新闻 2021-01-11
招聘人数:4职位信息1、 负责银行、保险、互金平台等关系统维护,能根据公司业务需求,独...
查看全文
返回全部新闻


区域站点: 南丰县手机网页设计   南宫市网页制作软件dw   囊谦县在线网页制作   南和县在线网页设计工具   南华县手机网页设计   南江县网页制作软件dw   南京市在线网页制作   南靖县在线网页设计工具   南康市手机网页设计   南乐县网页制作软件dw   南陵县在线网页制作   南宁市在线网页设计工具   南平市手机网页设计   南皮县网页制作软件dw   南市区在线网页制作   南通市在线网页设计工具   南投县手机网页设计   南雄市网页制作软件dw   南溪县在线网页制作   南阳市在线网页设计工具   南漳县手机网页设计   南召县网页制作软件dw   南郑县在线网页制作   那坡县在线网页设计工具   那曲县手机网页设计   纳雍县网页制作软件dw   讷河市在线网页制作   内黄县在线网页设计工具   内江市手机网页设计   内丘县网页制作软件dw   内乡县在线网页制作   嫩江市在线网页设计工具   聂荣县手机网页设计   尼玛县网页制作软件dw   尼木县在线网页制作   宁安市在线网页设计工具   宁波市手机网页设计   宁城县网页制作软件dw   宁德市在线网页制作   宁都县在线网页设计工具   宁国市手机网页设计   宁海县网页制作软件dw   宁化县在线网页制作   宁晋县在线网页设计工具   宁陵县手机网页设计   宁明县网页制作软件dw   宁南县在线网页制作   宁强县在线网页设计工具   宁陕县手机网页设计   宁武县网页制作软件dw   宁乡市在线网页制作   宁阳县在线网页设计工具   宁远县手机网页设计   农安县网页制作软件dw   磐安县在线网页制作   盘锦市在线网页设计工具   盘山县手机网页设计   磐石市网页制作软件dw   盘州市在线网页制作   蓬安县在线网页设计工具   澎湖县手机网页设计   蓬莱市网页制作软件dw   彭山县在线网页制作   蓬溪县在线网页设计工具   彭阳县手机网页设计   彭泽县网页制作软件dw   彭州市在线网页制作   偏关县在线网页设计工具   平安县手机网页设计   平昌县网页制作软件dw   平定县在线网页制作   屏东县在线网页设计工具   平度市手机网页设计   平果县网页制作软件dw   平和县在线网页制作   平湖市在线网页设计工具   平江县手机网页设计   平乐县网页制作软件dw   平凉市在线网页制作   平利县在线网页设计工具   平罗县手机网页设计   平陆县网页制作软件dw   屏南县在线网页制作   平泉市在线网页设计工具   屏山县手机网页设计   平顺县网页制作软件dw   平塘县在线网页制作   平潭县在线网页设计工具   平武县手机网页设计   萍乡市网页制作软件dw   平乡县在线网页制作   平阳县在线网页设计工具   平遥县手机网页设计   平阴县网页制作软件dw   平邑县在线网页制作   平远县在线网页设计工具   平舆县手机网页设计   皮山县网页制作软件dw   普安县在线网页制作   浦北县在线网页设计工具   浦城县手机网页设计   普洱市网页制作软件dw   普格县在线网页制作   浦江县在线网页设计工具   普兰县手机网页设计   普宁市网页制作软件dw   莆田市在线网页制作   迁安市在线网页设计工具   乾安县手机网页设计   潜江市网页制作软件dw   潜山市在线网页制作  

友情链接: 建站快车登陆 国外建站网站 h5建站 网站建立 手机版

Copyright © 2002-2020 在线网页制作_在线网页设计工具_手机网页设计_网页制作软件dw_网页特效 版权所有 (网站地图) 备案号:粤ICP备10235580号