关键词：
1 创建项目
安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件，项目目录如下：
2 自动更改版本号插件简介
gulp-rev 为css文件中引入的图片或字体等添加hash编码
gulp-asset-rev为js/css文件生成hash编码并生成 rev-manifest.json文件名对照映射
gulp-rev-collector 为文件替换版本号
3 本地安装插件
安装gulp-rev
npm install gulp-rev --save-dev
安装gulp-asset-rev
npm install gulp-asset-rev --save-dev
安装gulp-rev-collector
npm install gulp-rev-collector --save-dev
4 配置gulpfile.js
5 执行任务
命令提示符执行：
gulp
执行后压缩后的文件目录如下：
css文件如下
html文件如下
然而，我们的预期效果是希望这样子的
6、更改gulp-rev和gulp-rev-collector
打开node_modulesgulp-revindex.js
第144行 manifest[originalFile] = revisionedFile;
更新为: manifest[originalFile] = originalFile + ‘?v=‘ + file.revHash;
打开nodemodulesgulp-rev
ode_modules
ev-pathindex.js
10行 return filename + ‘-‘ + hash + ext;
更新为: return filename + ext;
打开node_modulesgulp-rev-collectorindex.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_modulesgulp-assets-revindex.js
78行 var verStr = (options.verConnecter || "-") + md5;
更新为：var verStr = (options.verConnecter || "") + md5;
80行 src = src.replace(verStr, ‘‘).replace(/(.[^.]+)$/, verStr + "$1");
更新为：src=src+"?v="+verStr;
打开node_modulesgulp-rev-collectorindex.js
第107行 regexp: new RegExp( ‘([/\\‘"])‘ + pattern, ‘g‘ ),
更新为: regexp: new RegExp( ‘([/\\‘"])‘ + pattern+‘(?v=w10)?‘, ‘g‘ ),
修改完成执行gulp，效果如下
7 总结
本文简单的介绍如何压缩静态资源及使用到的对于插件，下一篇介绍使用gulp如何让文件合并。
gulp配置版本号教程之gulp-rev-append
...件1.1、gulp基本使用还未掌握？请参看： gulp详细入门教程1.2、本示例目录结构如下：2、本地安装gulp-rev-append2.1、github：https://github.com/ 查看详情
gulp缓存markdown编辑(代码片段)
gulp添加版本号解决缓存问题第一项配置node[node安装教程:]https://www.cnblogs.com/xinaixia/p/8279015.html运行node-v有版本号即为安装成功第二项配置cnpm运行cmd,安装淘宝镜像npminstallcnpm-g--registry=https://registry.npm.taobao.org第三项项目源目录配置... 查看详情
使用gulp自动化打包合并前端静态资源（cssjs文件压缩添加版本号）
...采用的是第一种加版本号的方式，主要用gulp给静态资源自动加版本号 查看详情
gulp：自动为请求添加版本号以防止浏览器缓存
】gulp：自动为请求添加版本号以防止浏览器缓存【英文标题】：gulp:Automaticallyaddversionnumbertorequestforpreventingbrowsercache【发布时间】：2015-04-1820:34:59【问题描述】：我通过在服务器上使用gulp构建源文件来部署我的项目。为防止缓... 查看详情
gulp自动化打包及静态文件自动添加版本号
前端自动化打包发布已是一种常态，尤其在移动端，测试过程中静态资源的缓存是件很头疼的事情，有时候明明处理的bug测试还是存在，其实就是缓存惹的祸，手机不比pc浏览器，清理缓存还是有点麻烦的。所以自动化实现静态... 查看详情
gulp自动添加版本号过程中的一些要点记录
1、打开node_modulesgulp-revindex.js第144行manifest[originalFile]=revisionedFile;更新为:manifest[originalFile]=originalFile+‘?v=‘+file.revHash; 2、打开node_modulesgulp-rev odemodules ev-pathindex.js10行 查看详情
用python给html里的css及js文件链接自动添加版本号
传统的给文件链接添加版本号的方法是使用gulp-rev，这里提出的解决方案是使用python来替代gulp-rev。 importosimportreimportuuidimportsysdeffile_extension(path):returnos.path.splitext(path)[1]basePath=sys.argv[1]iflen(sys.argv)==1:s 查看详情
gulp自动化压缩合并加版本号解决方案
...gulp常用插件这个方案主要是为了实现js/css的压缩合并、自动添加版本号和压缩html。gulp-csso压缩优化cssgulp-uglify压缩jsgulp-html-minify压缩htmlgulp-rev-all生成版本 查看详情
intellijidea系列教程之常用配置项(代码片段)
Intellijidea系列教程之常用配置项Intellijidea系列教程目录(https://www.cnblogs.com/binarylei/p/10347600.html)Languagelevel和JavaCompiler版本自动变化问题去除IDEA报黄色灰色的重复代码的下划波浪线添加过滤文件或目录一、Languagelevel和JavaCompiler版本... 查看详情
学写网站前端配置之glup(代码片段)
前端使用gulp来自动化开发流程。gulp会非常方便进行前端管理。安装gulp：npminstallgulp-g#将gulp安装至全局因为在本地需要使用require的方式gulp。因此也需要在本地安装一份：npminstallgulp--save-dev #将gulp安装至本地，并保存至package.... 查看详情
前端自动化构建之gulp(代码片段)
...每次都是用脚手架搭好的文件，在无形中体验了一波前端自动化带来的方便。然后前一段时间才开始学习前端自动化。基本介绍gulp说得简单一点就是一个自动化把前端的各种工具以流的方式一步一步的按照设置的规定加载的一... 查看详情
node常用(代码片段)
...掉你手动修改package.json文件的步骤。spminstallmodule-name-save自动把模块和版本号添加到dependencies部分spminstallmodule-name-save-dve自动把模块和版本号添加到devdependenc 查看详情
linux内核版本号关闭自动添加后缀(代码片段)
一、问题描述编译出的内核版本号自动添加了后缀：二、问题解决进入内核配置，关闭该项：对应到宏定义是：CONFIG_LOCALVERSION=""#CONFIG_LOCALVERSION_AUTOisnotset这样改完后版本号会变为：5.10.61+。如果需... 查看详情
linux内核版本号关闭自动添加后缀(代码片段)
一、问题描述编译出的内核版本号自动添加了后缀：二、问题解决进入内核配置，关闭该项：对应到宏定义是：CONFIG_LOCALVERSION=""#CONFIG_LOCALVERSION_AUTOisnotset这样改完后版本号会变为：5.10.61+。如果需... 查看详情
通过gulp为requirejs引入的模块添加版本号
...止浏览器对文件进行缓存，所以通过gulp为项目中的文件添加版本号。 1、分别安装gulp-rev、gulp-rev-collerctor npminstall--save-devgulp-revnpminstall--save-devgulp-rev-collector打包后的效果"/css/style.css"=&g 查看详情
前端构建之--gulp(代码片段)
...关插件：1、del删除文件，用于清空文件2、browser-sync用于自动刷新浏览器3、gulp-htmlmin用于压缩html4、gulp-clean-css压缩css5、gulp-uglify压缩js6、gulp-replace替换路径7、gulp-base64将小图背景图转换为base64的形式，可以自己设置最大多少尺... 查看详情
node常用(代码片段)
...掉你手动修改package.json文件的步骤。spminstallmodule-name-save自动把模块和版本号添加到dependencies部分spminstallmodule-name-save-dve自动把模块和版本号添加到devdependencies部分node工具 查看详情
gulp的简介以及使用方法(代码片段)
...pro)--|html--|css--|images--|jsgulp的目的打包一个项目gulp的作用自动压缩JS文件自动压缩CSS文件自动合并文件自动编译sasses6自动压缩图片自动刷新浏览器gulp的使用gulp依赖于node环境在全局安装gulp环境,说明机器上可以运行gulpcnpminstallgulp... 查看详情