gulp html自动引用,关于gulp中自动添加版本号及Html文件应用路径替换的问题

电玩女神 2022-10-05 15:56 176阅读 0赞

最近项目做了一段时间了，为了测试的准确性及节约更多的时间，我们需要将前端中静态资源的引用加上hash版本号，以方便测试在工作时不用老是去清理缓存，因为项目工程本来就使用了Gulp，所以就在gulpfile.js中加入了gulp-rev和gulp-rev-collector两个插件来实现这个目的。

最开始的时候还算顺利，不过在测试的时候发现问题，执行任务命令后，只在第一次自动替换了html中的资源链接，而当我们修改了源文件之后，就不行了，貌似找不到需要替换的关键字，所以有了下面的解决方案。

我们先来看看原来加上版本号是什么样的

"/css/style.css" => "/dist/css/style-1d87bebe.css"

"/js/script1.js" => "/dist/script1-61e0be79.js"

"cdn/image.gif" => "//cdn8.example.dot/img/image-35c3af8134.gif"

而现在我们需要改成这样：

"activity/channel/2.css": "activity/channel/2.css?v=4ddaaeae28"

"activity/christmas.css": "activity/christmas.css?v=2d21a0c7ca"

"activity/channel/1.jpg": "activity/channel/1.jpg?v=c8571d8112"

所以，我们现在需要手动更改两个插件的源码：

第一步：打开node\_modules\\gulp-rev\\index.js 第144行

/\*manifest\[originalFile\] = revisionedFile;\*/

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

第二步：打开node\_modules\\rev-path\\index.js 第10行

/\*return filename + '-' + hash + ext;\*/

return filename + ext;

注意：这一步中，很多同学找不到这个rev-path，是因为以前的gulp-rev插件将这部分集成在了里面，而后续的版本将rev-path从gulp-rev里抽离出来了，所以要在项目目录的node\_modules里找这个插件，当然，我们不需要手动安装，这是gulp-rev的依赖，npm会自动安装它。

第三步：打开node\_modules\\gulp-rev-collector\\index.js 第31行

/\*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;

第50行

/\*return pattern.replace(/\[\\-\\\[\\\]\\\{\\\}\$\$\\\*\\+\\?\\.\\^\\$\\|\\/\\\\\]/g, "\\\\$&");\*/

var rp = pattern.replace(/\[\\-\\\[\\\]\\\{\\\}\$\$\\\*\\+\\?\\.\\^\\$\\|\\/\\\\\]/g, "\\\\$&");

rp = pattern + "(\\\\?v=(\\\\d|\[a-z\])\{8,10\})\*";

return rp;

第90行

/\*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\})\*"

);

OK，这样就可以使用gulpfile.js里定义的任务了，下面是我的gulpfile.js

/\* 载入模块 \*/

var gulp = require('gulp'),

less = require('gulp-less'),

mincss = require('gulp-minify-css'),

concat = require('gulp-concat'),

uglify = require('gulp-uglify'),

clean = require('gulp-clean'),

browerify = require('browserify'),

sourcemaps = require('gulp-sourcemaps'),

source = require('vinyl-source-stream'),

buffer = require('vinyl-buffer'),

replace = require('gulp-str-replace'),

imagemin = require('gulp-imagemin'),

browserSync = require('browser-sync'),

rev = require('gulp-rev'), // 为静态资源文件替换带MD5的文件名

revCollector = require('gulp-rev-collector'), // 替换静态资源链接

runSequence = require('run-sequence'); // 顺序执行

/\* 自动刷新 start \*/

gulp.task('browser', function () \{

return browserSync(\{

port: 3000,

open: true,

startPath: '/',

server: \{

directory: true,

routes: \{

'/': '/'

\},

middleware: function (req, res, next) \{

console.log('middleWare.');

next();

\},

baseDir: './'

\},

//指定浏览器

browser: 'chrome',

//延迟刷新，默认为0

reloadDelay: 1,

//是否载入css修改，默认true

injectChanges: true

\});

gulp.task('bro', function () \{

return gulp.src('./src/\*')

.pipe(browserSync.reload(\{

stream: true

\}));

\});

/\* 自动刷新 end \*/

var fs = require('fs');

var fileContent = fs.readFileSync('./package.json');

var jsonObj = JSON.parse(fileContent);

var argv = process.argv.pop();

var DEBUGGER = (argv === '-D' || argv === '-d') ? true : false;

/\* 基础路径 \*/

var paths = \{

css : 'src/common/css/',

less : 'src/less/',

scripts : "src/js/",

img : "src/images/",

html : "src/html/",

build : "src/build/",

src : 'src/'

\};

/\* 项目资源文件目录 \*/

var cssSrc = paths.src + 'css/block\_css/\*.css',

jsSrc = paths.src + 'angular/modules/\*\*/\*.js';

if(DEBUGGER) \{

resProxy = "http://localhost:3000/build";

prefix = "http://localhost:3000/build";

/\* 清理css文件 \*/

gulp.task('clean-css', function () \{

return gulp.src(\[paths.build + "css/\*.css", paths.src + "css/style.min.css"\])

.pipe(clean());

\});

/\* 清理js文件 \*/

gulp.task('clean-js', function () \{

return gulp.src(\[paths.build + "js/\*.js"\])

.pipe(clean());

\});

/\* 编译LESS \*/

gulp.task('runLess', \['clean-css'\], function () \{

return gulp.src(\[paths.less + '\*\*/\*.less', paths.css + '\*\*/\*.css'\])

.pipe(less())

.pipe(concat('main.min.css'))

.pipe(mincss())

.pipe(replace(\{

original : \{

resProxy : /\\@\{3\}RESPREFIX\\@\{3\}/g,

prefix : /\\@\{3\}PREFIX\\@\{3\}/g

\},

target : \{

resProxy : resProxy,

prefix : prefix

\}))

.pipe(gulp.dest(paths.build + "/css"))

.pipe(browserSync.reload(\{stream:true\}));

\});

/\* 合并、压缩CSS \*/

gulp.task('handleCss', \['clean-css'\], function () \{

return gulp.src(\[paths.src + 'css/block\_css/\*.css'\])

.pipe(concat('style.min.css'))

.pipe(mincss())

.pipe(gulp.dest('./src/css'))

.pipe(rev())

.pipe(gulp.dest(paths.build + 'css'))

.pipe(rev.manifest())

.pipe(gulp.dest('./rev/css'));

\});

/\* 合并、压缩 JS \*/

gulp.task('handleJs', \['clean-js'\], function () \{

return gulp.src(\[paths.src + 'angular/app.js', paths.src + 'angular/modules/\*\*/\*.js'\])

.pipe(concat('app.min.js'))

.pipe(uglify())

.pipe(rev())

.pipe(gulp.dest(paths.build + 'js'))

.pipe(rev.manifest())

.pipe(gulp.dest('./rev/js'));

\});

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

// gulp.task('revCss', \['handleCss'\], function()\{

// return gulp.src('./src/css/style.min.css')

// .pipe(rev())

// .pipe(gulp.dest(paths.src + 'build/css'))

// .pipe(rev.manifest())

// .pipe(gulp.dest(paths.src + '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', './src/\*.html'\])

.pipe(revCollector())

.pipe(gulp.dest('./src'));

\});

// 处理manage目录中的链接替换

gulp.task('revManageHtml', function () \{

return gulp.src(\['./rev/\*\*/\*.json', './src/manage/\*.html'\])

.pipe(revCollector())

.pipe(gulp.dest('./src/manage'));

\});

/\* 监听HTML文件变化 \*/

gulp.task('html', function () \{

return gulp.src(paths.html + "\*\*/\*.html")

.pipe(replace(\{

original : \{

resProxy : /\\@\{3\}RESPREFIX\\@\{3\}/g,

prefix : /\\@\{3\}PREFIX\\@\{3\}/g

\},

target : \{

resProxy : resProxy,

prefix : prefix

\}))

.pipe(gulp.dest(paths.build+'/html'))

.pipe(reload(\{stream:true\}));

\});

/\* 压缩图片 \*/

gulp.task('images', function () \{

return gulp.src(paths.img + "\*\*/\*")

.pipe(imagemin())

.pipe(gulp.dest(paths.build + "/images"));

\});

/\* 解决js模块化及依赖问题 \*/

gulp.task('browserify', function () \{

var b = browserify(\{

entries: \["./src/js/index.js"\],

debug: true

\});

return b.bundle()

.pipe(source("index.js"))

.pipe(buffer())

.pipe(sourcemaps.init(\{loadMaps: true\}))

.pipe(gulp.dest("./build/js"))

.pipe(uglify())

.pipe(sourcemaps.write("."))

.pipe(replace(\{

original : \{

resProxy : /\\@\{3\}RESPREFIX\\@\{3\}/g,

prefix : /\\@\{3\}PREFIX\\@\{3\}/g

\},

target : \{

resProxy : resProxy,

prefix : prefix

\}))

.pipe(gulp.dest("./build/js"))

.pipe(reload(\{stream:true\}));

\});

/\* Css样式文件监控任务 \*/

gulp.task('watchCss', function () \{

gulp.watch('./src/css/block\_css/\*.css', function (done) \{

condition = false;

runSequence(\['handleCss'\], \['revHtml'\], \['bro'\], done);

\});

/\* 默认启动任务 \*/

gulp.task('default', \['runLess', 'html', 'images', 'browserify'\], function () \{

gulp.watch(\['\*\*/\*.less', '\*\*/\*.css'\], \['runLess'\]);

gulp.watch('\*\*/\*.html', \['html'\]);

gulp.watch('\*\*/\*.js', \['browserify'\]);

\});

/\* 本地服务,自动刷新 \*/

gulp.task('server', function (done) \{

condition = false;

runSequence(\['browser'\], \['handleCss'\], \['handleJs'\], \['revHtml'\], \['revManageHtml'\], \['bro'\], done);

gulp.watch('./src/css/block\_css/\*.css', function () \{ //监控所有CSS文件

runSequence(\['handleCss'\], \['revHtml'\], \['revManageHtml'\], \['bro'\], done);

\});

gulp.watch(\['./src/angular/\*\*/\*.js', './src/angular/\*.js'\], function () \{ //监控所有JS文件

runSequence(\['handleJs'\], \['revHtml'\], \['revManageHtml'\], \['bro'\], done);

\});

gulp.watch(\[

'./src/\*.html',

'./src/views/\*.html',

'./src/views/\*\*/\*.html',

'./src/manage/\*.html'\], \['bro'\]);

\});

gulp html自动引用,关于gulp中自动添加版本号及Html文件应用路径替换的问题

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 gulp html自动引用,关于gulp中自动添加版本号及Html文件应用路径替换的问题

相关 gulp文件

相关 gulp-load-plugins自动加载插件

相关 gulp排除文件(文件路径匹配模式globs)

相关前端 - gulp应用

相关 gulp应用

相关 SpringBoot中html引用JS/CSS文件路径问题

相关基于流的自动构建工具——gulp

相关 gulp 压缩打包css、html和图片

相关 gulp 压缩打包js文件、gulp方法