用gulp-rev,gulp-rev-place打包的时候遇到一个路径问题, 5C

图片说明

之所以打包后的home.css不能正常替换 估计是不符合manifest里面的正则匹配 ,然后我测试了一下,将路径改为../home/home.css就能正常替换了,但是这个路径写法比较怪
大佬们,还有别的比较好的办法?
我google了一下,好像没有相关的问题,然后在官方文档上没有找到比较有用的api(当然很可能我比较菜没看懂....)

0

2个回答

0

用gulp-rev-append吧,那样子打版本号确实很不习惯。之前用过gulp-rev,想一步到位的打包老是出问题,文档只有分步打包的事例,太麻烦了


var gulp = require("gulp");
var rev = require('gulp-rev-append');
var replace = require('gulp-replace');
gulp.task('rev', function() {
    gulp.src('src/*.html')
        .pipe(rev())
        .pipe(gulp.dest('./dist'));
});
gulp.task("replace",function(){
    gulp.src('src/*.html').pipe(replace(/(src.+\.js\s*(\?rev=@@hash)?)|(href.+\.css\s*(\?rev=@@hash)?)/g,function(match){
        return match.replace("?rev=@@hash","")+"?rev=@@hash";
    })).pipe(gulp.dest("./tmp"))
});
gulp.task('dist',function(){
   gulp.src(['src/**','!src/*.html']).pipe(gulp.dest('./dist'))
});
gulp.task('default',['rev','dist']);

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
gulp踩的坑之:gulp路径替换 revCollector默认只首次替换成功
//替换html引用文件里面文件名字,第一次写时成功生成了对应版本号manifest.json文件,并成功替换了.html文件里面文件名 gulp.task('rev', function() {     gulp.src(['./rev/*.json', './dist/index.html'])            .pipe(revCollector())         .p
gulp生成资源路径(gulp-edit的使用)
gulp生成资源路径
修复BUG:gulp自动添加版本号修复对CSS中background:url()的匹配问题
前天说要找到一个完美的解决方案,今天发动了各路大神,总算是搞定了. 问题描述: 修改gulp-rev-append插件实现自动修改文件中静态资源链接添加md5版本号。但是前天有一点点很遗憾,对CSS中background:url()的匹配还存在一点点不足,url()必须带单引号或者双引号才能被正确匹配的到,但是CSS的标准写法中,通常不会带单引号或者双引号。 ==============
webpack实例打包中遇到的问题
实例效果:一个简单的demo 项目结构参考vue-cli文件目录 这里我们需要在打包以后出现两个页面。分别是index.html和linsence.html。所以在根目录下新建了这两个页面。(他们实际上模板页面) 这个demo,我们把src下的main和linsence这两个js文件作为入口文件。 main.js中我们需要引入temp组件中的内容。temp中集成了css样式和htm...
gulp常用插件之gulp-rev-collector(给资源文件加时间戳)
https://www.npmjs.com/package/gulp-rev-collector 这个插件就是从manifests中获取静态资源版本数据, 该数据由不同的流产生, 并且替换html中的链接.安装: $ npm install --save gulp-rev-collector使用: 我们可以使用gulp-rev来产生一些无法使用cache的静态资源, 并且为它们生成manife
使用gulp打包增加hash值,解决浏览器缓存问题
前端项目部署后,用户必须强刷浏览器后才能看到最新的代码(和效果),这种体验不是很好,而有的用户根本不知道强刷浏览器这么一回事。 其实最好的办法就是给js和css增加一个版本号,或者说是一个hash值,看了下使用vue-cli搭建的项目,最后打完包后,都会生成一个随机的hash值。其实就是为了避免缓存。 这里使用gulp 的gulp-rev插件就可以给打包的js或者css增加一个hash值,注意...
使用gulp为项目中的文件自动添加版本号之实践思路
关于gulp中在html文件自动添加版本号需要Gulp插件:1、gulp-rev2、gulp-rev-format3、gulp-rev-replace要实现html中增加版本号的效果: 把gulp-rev的配置代码粘贴出来,gulp-rev帮我们生成一个版本清单文件:rev-manifest.json(这个文件名和路径都是可以在配置里修改的哦!在这里我们插件给我们提供的文件名)// 生成版本号
gulp-rev-collector文件替换爬坑之路
1.json文件 {“SecurityPlatform.jpg”: “SecurityPlatform-330213dab9.jpg”, “activitie1.jpg”: “activitie1-71f076339e.jpg”, “activitie2.jpg”: “activitie2-10e484b5dc.jpg”, “activitie3.jpg”: “activitie
webpack打包时遇到的问题
最近在项目打包时总是打包不成功,报错如下图所示: 报错原因:是因为nodejs的版本太高不稳,当时用的nodejs的版本是10.6.0。 解决方式: 在网上搜了一下,v8版本的nodejs相对要稳定一些,建议安装8.9.4版本的nodejs,重新安装node环境之后打包就没有报错了。 其他版本的nodejs下载链接:http://nodejs.org/dist/ 解决方式补充: ...
定制修改gulp-rev返回的rev-manifest.json文件
gulp的gulp-rev插件,用来产生源文件与目标文件的对照,创建的rev-manifest.json文件内容默认是绝对路径的,{ "static/css/animation.css": "static/css/animation-5209a80f8f.css", "static/css/basic.css": "static/css/basic-5017ce03eb.css" }如果想更
pyinstaller遇到的问题
1.在使用时遇到了各种神奇的问题:比如:①'ascii' codec can't decode byte 0xd0 in position 12: ordinal not in range(128)②我不知道发生了什么,我在网上找了各种办法也没有解决问题,最后我用pip install pyinstaller pip install --upgrade pyinstaller在cmd的界...
webpack打包路径问题,生成相对路径
** webpack打包路径问题,生成相对路径** 这里用我们用vue-cli脚手架生成项目举例,go=> 1,找到config文件夹下面的index.js 3,把箭头所指的/去掉 —–搞定 对于所有webpack的同理,只要把打包输出路径的/去掉就可以了 ...
gulp 给静态资源文件添加hash(md5)后缀 防止缓存
一、安装需要的包 npm install gulp gulp-rev run-sequence gulp-rev-collector –save-dev 二、配置gulpfile.jsvar gulp = require('gulp'), runSequence = require('run-sequence'), rev = require('gulp-rev'),
webpack打包中遇到的各种问题收录
1:报错ReferenceError:Unknown plugin “transform-decorators-legacy” specified in “base” 依赖项缺失,解决了这个后,你应该还会遇到另一个 解决方法: npm install babel-plugin-transform-decorators-legacy npm install babel-preset-es2015 ...
gulp改造gulp-rev-append插件实现资源文件链接自动添加MD5版本号
gulp有很多插件可以实现URL添加MD5版本号,使用gulp-rev和gulp-rev-collector是比较方便的方法,结果如下: "/css/base.css" => "/dist/css/base-1d87bebe.css" "/js/mod.js" => "/dist/mod-61e0be79.js" "/images/bg.png" => "/images/bg-35c3af8134.png" 但是由于公司发布系统限制,如果用上面方法实现,每次更新都会积压过多过期无用的文
gulp构建项目(十四):gulp-rename重定义打包生成文件的路径
需求分析:只要是用 * 匹配的文件路径都会直接将原始路径打包到dist,而很多时候我们需要将单纯的文件打包过去就可以了。 一、gulp.src 文件路径规则 1、参数说明 /** * options {Object} * options.base {String} 定义被替换的文件路径 */ gulp.src(globs[, options]) 2、使用说明 /** * gulp.dest...
gulp构建项目(十):gulp-rev-collector-dxb添加版本号(?hash)
需求分析: 浏览器会缓存js、css文件,所以在每次升级js或css文件之后,需要浏览器重新加载这些文件也就是我们常说的刷新缓存。 所以需要在js、css文件后面加上版本号。 一、版本号添加方式 本文将采用第二种方式就行讲解 1、改变文件名称 这种方式必须同时改变资源的文件名和html里面引用的文件名,并且一一对应 可以用 gulp-rev gulp-rev-collector 两...
vue+webpack打包路径问题
最近写了一个vue小项目,不想单独作为一个web项目发布,所以就准备放到资源项目的public文件夹下,遇到一些小问题,在此总结一下。 资源路径如下:public目录配置的访问路径为”/”,在这样的情况下,我们的访问路径就变成了”域名/vue-demo”。访问的时候发下程序未报错,但是页面一片空白。此前也这样发布的项目都没有问题,但这次是怎么回事呢?仔细探索后发现是vue-router搞得鬼。因项目
Maven打包遇到的一些问题
#Maven打包遇到的一些问题 ## 1.将依赖打成一个包参考这篇 ## 2.Fatal error compiling: 无效的目 标版本: 1.7 -> [Help 1]   因为是在cmd中执行,然后maven依赖jdk,我的环境变量中将JAVA_HOME写死,指导了jdk1.6版本。而这个项目需要1.7版本,在POM文件的编译插件中   <plugin> ...
在做App上线打包的时候遇到的问题
在做App上传的时候,遇到了一些问题,因为是第一次做,所以犯了很多错误,把这些错误记录一下,以便日后再犯类似错误或者其他人会这样的问题,以便能够尽快解决 1. No suitable application records were found . Verify your bundle identifier ‘ bundle identifier ( 当时我的是 yuanlaishiz
webpack 图片打包路径问题DIY解决方案
为什么要DIY?因为我也不知道官方怎么解决的啊! 如果你能告诉我的话,真的是帮大忙了! 问题描述 开发环境上的图片地址是放在根目录下面的,不用管,但是生产环境的地址引用一直不对!图片路径报错… 先来看配置文件 生成目录 这种形式:打包路径是对的,但是引用路径是根据publicPath来决定的。 生成的图片路径所有的都是 ./images/[hash].[name].[ext] 问...
使用webpack打包react项目中遇到的问题(二)
问题三:外部扩展库中React is not defined 原因:不小心把react写在了配置文件的extenal中 module.exports = { entry: __dirname + '/src/ManageSystem.js', output: { path: __dirname + '/build', filename:
hbuilder 打包app跳转路径问题(url 跳转问题)
hbuilder 打包app跳转路径问题(url 跳转问题)
gulp自动化添加版本号并修改为参数格式
问题: 当我们修改js和css文件时往往需要清除浏览器的缓存,否则有些效果就看不到更新过后的。 通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化) 替换html中的js,css文件名,生成一个带版本号的文件名,这样加版本号的静态文件就不会存在缓存的问题了。 解决: gulp有自动化添加版本hash的插件gulp-rev,它的效果是更改文
写Vue实战项目时遇到的问题
1、使用v-for循环的时候报错 这是因为我们安装了ESLint插件,对vue进行了eslint检查,只需将这个规则检查屏蔽掉即可,具体操作如下:  文件–》首选项–》设置–》在搜索框中输入:vetur.validation.template–》找到vetur.validation.template:true–》将vetur.validation.template:true在右栏框中进行...
vue-cli打包路径问题
直接用vue-cli生成的项目打包直接放到服务器上,css,js都会存在路径问题,还有css背景图路径,原因是默认打包生成的路径为根路径,相对与服务器的,因此需要分别设置一下。 1.文件的路径不正确:在config目录下的index.js里build对象的assetsPublicPath改为‘./’; 2.背景图片路径找不到:在build文件夹里的"utils.js里面的...
关于Vue打包之后文件路径出错的问题
这里以vue-cli创建的项目为例 1、文件路径不对 找到config文件夹下的index.js文件修改一下位置 看清楚是 build(上边还有个dev 是开发环境下的配置,不需要改动)下的 assetsPublicPath :将‘/’改为‘./’ 2、背景图片路径不对 在css中写的background-img的路径出错 需要找到build文件夹下的utils.
vue3.3打包后,路径出错解决方案
由于3.3废弃baseUrl了,所以不能设置baseUrl module.exports = { publicPath: '/dist/', outputDir: 'dist', assetsDir: 'static', lintOnSave: true, productionSourceMap: false, devServer: { } } 请设置vue...
SSM框架整合时遇到的错误整理
       自己刚开始学习SSM框架整合是遇到了很多问题,虽然在网上大部分都能查找到,但是每次都去查的话还是有点麻烦,故这里记录一下我遇到的问题,可能会不全,慢慢添加吧;1、cvc-complex-type.2.3: Element 'beans' cannot have character [children],because the type's content type is elemen...
vue-cli3.0版本打包修改公用路径及配置(包含vue-cli3.0简单使用)
对应完2.x版本的,就直接把这个3.0的也对应,相对于2.0来说,vue-cli3.0更让我们专注了开发,不需要去关注太多的文件配置。 如下进行一下讲解顺便简单讲一下cli3.0的使用吧 详细的话就看一下教程吧就,我相信你们是最聪明的 ( * ^ ▽ ^ *) 传送门。 demo下载地址 安装 如果安装了1.x 或者 2.x 的话,可以先通过下面的命令行进...
刚开始用PSPICE仿真的时候容易遇到的问题
刚开始用PSPICE仿真的时候容易遇到的问题
【暴雪战网客户端更新报错】——我们在传输数据是遇到一个问题,保险起见,请先检查您的互联网
问题:暴雪战网客户端报错 男票在玩游戏时要更新,结果总是报错!怎么查都报错! 后来百度了半天!终于找到原因了! 如果你的路由器是斐讯这个辣鸡牌子!对!没错就是那个P2P导流的斐讯 = = 用这个路由器联网就会出现以下情况: 我们在传输数据是遇到一个问题,保险起见,请先检查您的互联网连接后再试一次。 解决办法 非常简单。。。。。。换个路由器 由于家里只有一个,于是用手机开的热点,手机热点...
使用gulp添加时间戳,压缩css、js
这是一个gulp的配置文件,可以对整个项目资源实现添加时间戳功能,也能压缩css和js文件
vue首页加载慢优化:预渲染prerender-spa-plugin使用,及解决编译报错,静态资源404,assetsPublicPath相对路径webpack配置问题
最近,终于有时间也有机会,去做一下vue框架的首页加载慢,白屏时间长的优化问题。具体优化方案很多,搜一下就有介绍。这儿重点介绍下预渲染的优化方式。 PreRender预渲染是此次优化的重点方式。 使用的是prerender-spa-plugin插件,git地址:https://github.com/chrisvfritz/prerender-spa-plugin 网上此控件的使用也有很多例子...
Parcel打包器应用经验分享
在大型项目中使用parcel打包工具后的心得,与踩过的坑。 优点: 1. 正如官网所说的 快速,零配置的 Web 应用程序打包器 事实确实这样,parcel比webpack更加轻量级,项目中用到的任何关于sass、less、图片、路径、及各种解析都是零配置,拿来即用型。 只需要在package.json中引入对应的parcel、parcel-bundler,然后根据官网提示配置即可。 ...
gulp-rev改格式(暂时不知道对不对)
暂时不知道对不对
matlab打包java程序时遇见的一些问题解决方法
想使用java调用matlab函数来绘制股票曲线图,碰见几个问题,下面分享一下解决方法。1、matlab打包函数网上很多教程,这里就不赘述了。可以参考打包过程说说遇见的问题打包的m文件最好是写成函数,不要用脚本matlab中的java一般是matlab安装时自带的,可以通过在命令行中输入version -java查看,然后在操作系统命令行中输入java -version查看系统中安装的java,看...
webpack打包字体路径不对问题
webpack打包字体路径不对问题
webpack 踩坑之对于打包的图片路径错误
一、什么是webpack?    webpack是模块打包工具二、webpack安装        版本:4.6.0npm install webpack --save-dev npm install webpack-cli --save-dev三、配置文件webpack.config.jspubliPath的默认地址为当前目录。module.exports = { entry:{ ...
labview 相对路径控制vi,打包非常常用,打包不成功的人,其实就是应用的路径问题,这个能帮到你
labview 相对路径控制vi,打包非常常用,经常遇到问打包不成功的人,其实就是应用的路径问题,这个能帮到你