Gulp rev将不会合并具有正确路径的清单文件

Gulp rev是一个用于静态资源版本控制的Gulp插件。它可以通过给静态资源文件名添加哈希值来解决浏览器缓存问题，从而实现静态资源的更新和缓存管理。

具体来说，Gulp rev插件会根据文件内容生成唯一的哈希值，并将该哈希值添加到文件名中，例如将"style.css"重命名为"style-af12b3.css"。这样，当静态资源文件内容发生变化时，文件名也会随之改变，从而迫使浏览器重新下载最新的文件。

然而，Gulp rev插件本身并不会合并具有正确路径的清单文件。清单文件是一个记录了原始文件名与哈希值对应关系的JSON文件，用于在后续的构建过程中更新文件引用。通常，开发者需要使用其他插件或自定义脚本来实现清单文件的合并和路径处理。

在使用Gulp rev插件时，可以结合其他Gulp插件来实现完整的构建流程。例如，可以使用Gulp concat插件来合并多个静态资源文件，使用Gulp rev-collector插件来更新HTML文件中的文件引用，使用Gulp useref插件来处理HTML中的构建注释等。

总结起来，Gulp rev插件是一个用于静态资源版本控制的工具，通过给文件名添加哈希值来解决浏览器缓存问题。但它本身不会合并具有正确路径的清单文件，需要结合其他插件来完成完整的构建流程。

腾讯云相关产品推荐：

云开发（CloudBase）：提供全栈云开发能力，包括云函数、云数据库、云存储等，适用于快速构建云原生应用。
云服务器（CVM）：提供可扩展的云服务器实例，适用于搭建网站、应用程序和数据库等。
云数据库 MySQL版（TencentDB for MySQL）：提供高性能、可扩展的云数据库服务，适用于存储和管理数据。
对象存储（COS）：提供安全、稳定、低成本的云端存储服务，适用于存储和管理大量的非结构化数据。

更多腾讯云产品信息，请访问腾讯云官方网站：https://cloud.tencent.com/

相关·内容

Gulp实现css、js、图片的压缩以及css、js文件的MD5命名

目前做代码压缩合并的工具有很多，诸如gulp，webpack，grunt等等，可以说这些项目构建工具的功能非常之强大：图片压缩、图片转base64、css和js的压缩以及合并，文件的md5重命名 ……。...gulp-rev-collector --save-dev //- 路径替换 npm install gulp-clean --save-dev //- 用于删除文件 npm...目前index.html文件中的css和js的引用路径是这样的，如下图： ? 其他目录下的html文件也是这样的，都引用的是未压缩和md5命名的css和js文件。...所有的css和js文件都加了md5命名了，所有的图片体积也小了，但用肉眼看不出来图片质量有变化。此时dist目录下所有的html文件引用的css和js的引用路径都变成带有md5命名的了。...第六步：代码的改动如果后续代码有改动的话，执行一次gulp clean命令，再执行一次gulp rev 命令： gulp clean命令就可以把dist目录下生成的所有文件全部删除，gulp rev命令会根据新的代码重新生成所有文件到

12.1K8 0

Gulp折腾之路(III)

html里零碎的这些引入合并成一个文件，当然它只负责合并，不负责压缩！...所以合并出来的文件我们要自行压缩，压缩以后调用 gulp-rev 负责在文件名后追加hash（如果项目使用CDN容易造成缓存的话）。...最后调用gulp-rev-replace 抑或 gulp-rev-collector 负责把最终的文件名替换回HTML中去；看起来是不是有些意思呢？...→ unicorn-d41d8cd98f.css gulp-useref识别的就是build开头的注释，build后面首先跟的是类型扩展名，然后后面的路径就是build区块中的所有文件进行合并后的文件路径...-- endbuild -->的内部，所引用的资源得是本地的，如果其中链接一发在线css/js，抱歉打包工作将不能很好的进行了；再有其中如果引用js，也不能将书写js代码，只能是引用本地js文件；如果项目中有多个

1.2K5 0

gulp之自动化静态资源压缩合并加版本号

gulp之自动化压缩合并加版本号这个方案主要是为了实现js/css/image的压缩合并、自动添加版本号、自动加浏览器前缀和压缩html。...'), //js压缩 gulp-imagemin //压缩图片 gulp-htmlmin //压缩html gulp-clean //清空文件夹 gulp-rev //更改版本名 md5后缀 gulp-autoprefixer...//加浏览器前缀 gulp-rev-collector //gulp-rev 的插件，用于html模板更改引用路径目录结构 |- root | |-dist //此目录为下面生成的 | ...'), //压缩html clean = require('gulp-clean'), //清空文件夹 rev = require('gulp-rev'), //更改版本名...'); //gulp-rev 的插件，用于html模板更改引用路径 //清空文件夹 gulp.task('clean', function(){ return gulp.src('dist

1.1K1 0

Gulp 定制专属提速“外挂”（下）

毕竟Gulp的插件太丰富了，大家也没有太多的精力把所有的插件都去研究一遍。当一个网站进行改版升级的时候，会遇到静态资源版本更新的问题，那么对于前端开发工程师来说，该如何解决这个问题？...gulp-asset-rev用于更改HTML文件引用静态资源的路径；gulp-rev用于修改静态资源的文件名。....pipe(rev()) // 修改静态资源的文件名 .pipe(assetRev()) // 更改HTML文件引用静态资源的路径 .pipe(gulp.dest('dist/js'))...;// 复制到目标文件路径 }); gulp.task('rev',['revJS'],function() { gulp.src("./**/*.html") // 源文件下的所有HTML...', function () { // 需要合并的文件 gulp.src('css/*.css') //合并后的文件名 .pipe(concat('common.css'

1.1K8 0

精通gulp常用插件

/hello.txt') .pipe(rename('gb/goodbye.md')) // 直接修改文件名和路径 .pipe(gulp.dest('..../dist')); gulp-concat 描述：合并文件。 var concat = require('gulp-concat'); gulp.src('..../js/*.js') .pipe(concat('all.js')) // 合并all.js文件 .pipe(gulp.dest('..../js/demo2.js']) .pipe(concat('all.js')) // 按照[]里的顺序合并文件 .pipe(gulp.dest('..../dist/css')) gulp-rev-replace 描述：重写被gulp-rev重命名的文件名。

1.1K2 0

gulp+webpack工作流探索

开发时引入 compass编译 |- images 原图片修改依赖包内容因为rev默认生成的版本号是加在静态文件文件名上的，如main-d3id7340.js这样会造成服务器上有...("ssi/jsi/"+name)); }); //替换html里的路径 gulp.task("replacehtml",function(){ var scriptReg = new RegExp...合并css部分，需要在html里做下处理生成ssi部分，要先创建模板文件，根据压缩css和js时生成的版本号，把相应的名字和版本号替换掉，然后在html里把引用脚本的路径改为ssi引用即可 <link rel=.../"), //用于配置文件发布路径，如CDN或本地服务器 filename: "[name]/[name].js", //根据入口文件输出的对应多个文件名 },

1.4K2 0

精通gulp常用插件

1.2K9 0

Gulp和Webpack对比

文件合并与压缩上面的模块化中，我们提到了模块化其实很大一部分是在做文件的合并与压缩操作，所以我们马上来看看Gulp和Webpack是怎样是想文件的合并和压缩的。...结论是正确的，Gulp可以对css文件以及js文件进行合并压缩处理，而Webpack可以实现对css文件，js文件，html文件等进行合并压缩和图片的压缩，还可以对js文件进行编译（如es6–>es5，...js合并压缩要想实现Gulp对js文件的合并压缩需要安装一个gulp-uglify和gulp-concat两个模块，前者是用于压缩的模块，后者是一个合并的模块。 1....sass文件后保存，则立即执行sass预处理），配合Gulp启动的server则可以实现sass文件修改保存即可在浏览器中查看效果的目的，下一小节会介绍启动本地server。...在项目中通过npm安装**gulp-rev**和**gulp-rev-collector**模块，前者用于生成文件的MD5码文件和按MD5码命名的资源文件，后者是利用MD5码，对文件名进行替换。

2.2K4 0

Gulp 在金蝶云平台项目中的使用经验

，并实时监听源文件，一旦源文件改动会执行相应的操作。...serve 命令，gulp 会执行跟 gulp dev 一样的操作并监听源文件，唯一不同的是它在执行后会监听某个端口，一旦有文件改动它会帮你自动刷新浏览器，帮你省下了按 F5 的力气。...其中对 css 代码处理是为了替换合并后的图片路径。...:dist', 'rev:css', cb ); }); 第三个步骤是 js 文件的打包，打包 RequireJs 代码可以根据依赖进行 js 文件的合并压缩...未解决的问题开发阶段：对 RequireJs 的路径配置（config.js 与 gulp 中的配置）感到困惑迷糊，多创建一个目录就路径不匹配打包不成功。

1.7K0 0

laravel中使用gulp打包发布前端部分

/rev/**/*.json', paths.html]) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件 .pipe(revCollector(.../dist/"; //写的很简单，都发布到dist下。在laravel下可以配置不同文件类型的发布路径。...//- 创建一个名为 concat 的 task return gulp.src(paths.css) //- 需要处理的css文件，放到一个字符串数组里 .pipe(rev(.../- 需要处理的css文件，放到一个字符串数组里 .pipe(rev()) //- 文件名加MD5后缀.../rev/**/*.json', paths.html]) //- 读取 rev-manifest.json 文件以及需要进行css，js名替换的文件 .pipe(revCollector

1.7K7 0

基于gulp的前端自动化方案

你的项目目录关系到你的gulp脚本里的任务路径，我脚本里写的是匹配所有的目录和文件。我简单举个例子：这里js/common里的js文件也会被处理。如果只想处理特定目录的文件，请修改任务里的路径。...} } 编写gulp脚本新建 gulpfile.js文件,并引入所需模块，这里我把路径统一写在PATHS中。...具体关于路径的写法，可以去看gulp官网的api：https://www.gulpjs.com.cn/docs/api/ gulp-minify-css这个官网提示已经弃用，改用gulp-clean-css...'),// 精简html htmlmin = require('gulp-htmlmin'),//压缩html rev = require('gulp-rev-append'),//增加版本号.../node_modules/**']) .pipe(rev()) .pipe(gulp.dest(PATHS.DEST)); }); 同步执行task 因为gulp所有的任务都是异步完成的

1.1K6 0

这是学习Git 和 GitHub真正需要的

使用场景：分支临时切换存储临时改动：git stash 恢复改动：git stash pop 2.3 GIT忽略清单将不需要被git管理的文件名字添加到此文件中，在执行git命令的时候，git就会忽略这些文件...git忽略清单文件名称：.gitignore 将工作目录中的文件全部添加到暂存区：git add ....npm install gulp 文件夹结构 dist文件夹 src文件夹 gulpfile.js文件安装gulp-cli npm install gulp-cli 复制功能方法 const gulp...= require('gulp'); // 使用gulp.task()方法建立任务 gulp.task('first', () => { // 获取要处理的文件 gulp.src('..../src/css/base.css') // 将处理后的文件输出到dist目录 .pipe(gulp.dest('.

1K3 0

gulp 自动添加版本号

本文介绍利用 gulp-rev 和 gulp-rev-collector 进行版本管理 npm官网介绍使用后的效果如下： "/css/style.css" => "/dist/css/style-1d87bebe.css...: 对目标文件进行MD5计算序列值，更改文件名，生成键值对json文件（manifest文件，如上） gulp-rev-collector: 根据manifest文件的对应关系，替换目标文件内的引用链接...v=c8571d8112" 即在不更改文件名，在引用的文件名后加?v=hashVal的方式。...v=' + file.revHash; 第二步：打开nodemodules\gulp-rev\nodemodules\rev-path\index.js 第10行 (如果找不到此文件，则找到路径nodemodules...权限问题，建议删除node_modules文件夹，把gulp插件重新构建 npm install 如果不行，看下是否是windows下的gulp操作虚拟机中的文件，如果是，尝试在虚拟机中重新安装node

1.2K5 0

gulp rev manifest 添加目录前缀

gulp-rev 生成的manifest默认为： "index.css": "index.css?...v=04aff97a7b", 　　为避免同名文件覆盖版本号，对替换的路径增加一级目录，如下 "css/index.css": "css/index.css?...v=04aff97a7b", 修改gulp-rev下index.js， 123行增加manifest传入参数: opts = objectAssign({ path: 'rev-manifest.json...JSON, pwd_base: '' //增加一级目录 }, opts, pth); 146行增加： originalFile = opts.pwd_base + originalFile; 　　gulp...文件配置增加目录： .pipe(rev.manifest({ pwd_base: 'css/' }))

1.4K6 0

gulp自动化打包（下）

，前边压缩合并的js是自己写的js），然后打zip包，发送至目的地。...那么这里配置的输入输出路径即为：路径以gulpfile.js为参考位置。...使用gulp-git 如果想打包git版本库中的某一个版本，或者某一个分支，就需要用到git.checkout,但是在checkout之前，需要首先提交git版本，如果在git-bash下，会进行如下操作...打zip包经过合并压缩等操作之后，项目会自动生成dist目录，dist目录下即为打包生成的各种文件，接下来的目标是将dist目录下的所有文件打成一个zip包，代码如下： gulp.task('zip_new...2.要想达到第一点里面的同步执行（一个任务完成才开始下一个），一定要保证前面的所有任务，即除了ftp任务，其余的方法一定要是return出来的，即：正确写法： gulp.task('js', function

1.3K2 0

Git 中文参考（五）

一种特别有用的方法是查看添加的文件是否具有通过现有文件的复制和粘贴创建的行。有时这表明开发人员很草率，并没有正确地重构代码。...Unspecified 没有模式匹配路径，没有任何说明路径是否具有属性，路径的属性被称为未指定。当多个模式与路径匹配时，后一行会覆盖较早的行。这个覆盖是按属性完成的。...path/语法是没有意义的;使用path/**代替）在确定为路径分配了哪些属性时，Git 会查询$GIT_DIR/info/attributes文件（具有最高优先级），.gitattributes...但是，merge.default配置变量可以将不同的合并驱动程序命名为与未指定merge属性的路径一起使用。 String 使用指定的自定义合并驱动程序执行 3 向合并。...合并驱动程序可以通过占位符%P了解合并结果的路径名。 conflict-marker-size 此属性控制冲突合并期间留在工作树文件中的冲突标记的长度。仅将值设置为正整数具有任何有意义的效果。

2161 0

前端工程化 | 揭秘程序员的提速“外挂”

前端开发的工作往往需要把LESS/SASS编译成CSS文件，对多个JS、CSS文件进行合并与压缩处理，对JS、CSS进行语法的检查等，上面提到的这些都是一些重复性的操作，在开发过程中占据了大量的时间，降低了开发效率...JavaScript、SASS、LESS、HTML、IMG、CSS等文件的编译、检查、压缩、合并、格式化、浏览器自动刷新、项目打包，并监听文件在改动后重复指定这些操作。...，利用Node.js流的威力，你可以快速构建项目并减少频繁的IO（文件写入与读取）操作；高质量：Gulp有严格的插件指南确保插件如你期望的那样简洁高质的工作，而且Gulp的每个插件只完成一个功能，各个功能通过流进行整合并完成复杂的任务...解决方法是用管理员权限运行此文件，鼠标右击window图标，点击命令提示符（管理员）。之后把你的安装包所在路径输入进去就行了，这样打开安装包就不会报错了。 ? ?...安装：执行命令npm install --global gulp进行全局安装Gulp。执行gulp -v的命令，出现版本号即为正确安装。 ?

1.3K11 0

Node.js基础

2.3 PATH环境变量存储系统中的目录，在命令行中执行命令的时候系统会自动去这些目录中查找命令的位置。 ?...如果文件读取正确，err 是 null，返回doc doc是文件读取的结果写入文件内容 fs.writeFile('文件路径文件名称"，'数据'，callback); const...，系统会自动在该路径开辟一个文件 5.3系统模块path路径操作为什么要进行路径拼接不同操作系统的路径分隔符不统一 /public/uploads/avatar Windows上是\...6.第三方模块 6.1什么是第三方模块写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包。...6.6 Gulp能做什么项目上线，HTML、CSS、 JS文件压缩合并语法转换(es6、 less .

1.8K2 0

模块加载及第三方包

', 'utf-8', (err, doc) => { // 如果文件读取出错err是一个对象包含错误信息 //如果文件读取正确 err是null //doc是文件读取的结果 ...1.3.第三方模块 1 什么是第三方模块别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包。...6 Gulp能做什么项目上线，HTML、CSS、JS文件压缩合并语法转换（es6、less ...）...1 node_modules文件夹的问题文件夹以及文件过多过碎，当我们将项目整体拷贝给别人的时候,，传输速度会很慢很慢....会假设它是系统模块 Node.js会去node_modules文件夹中首先看是否有该名字的JS文件再看是否有该名字的文件夹如果是文件夹看里面是否有index.js 如果没有

1.9K3 0

npm、npm scripts

区别在于：当你把项目发布上线后，别人使用 npm install使用你的项目时，并不会下载devDependencies里的模块。 4、node_modules的查找路径是怎样的?...npm2安装依赖的时候比较简单直接，直接按照包的依赖的树形结构下载填充至本地目录，缺陷在于太深的目录树结构会严重影响效率，甚至在window下可能会超出系统路径限制的长度，另外有删node_modules...使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并 gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器 gulp不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成...gulp是基于Nodejs的自动任务运行器，能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新...//文件合并 npm install gulp-rename --save-dev //重命名 //gulpfile.js //引入插件 var gulp = require('gulp'),

2.2K4 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Gulp rev将不会合并具有正确路径的清单文件

相关·内容

Gulp实现css、js、图片的压缩以及css、js文件的MD5命名

Gulp折腾之路(III)

gulp之自动化静态资源压缩合并加版本号

Gulp 定制专属提速“外挂”（下）

精通gulp常用插件

gulp+webpack工作流探索

精通gulp常用插件

Gulp和Webpack对比

Gulp 在金蝶云平台项目中的使用经验

laravel中使用gulp打包发布前端部分

基于gulp的前端自动化方案

这是学习Git 和 GitHub真正需要的

gulp 自动添加版本号

gulp rev manifest 添加目录前缀

gulp自动化打包（下）

Git 中文参考（五）

前端工程化 | 揭秘程序员的提速“外挂”

Node.js基础

模块加载及第三方包

npm、npm scripts

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐