使用gulp解决RequireJS项目前端缓存问题（一）
1、前言
前端缓存一直是个令人头疼的问题，你有可能见过下面博客园首页的资源文件链接：
有没有发现文件名后面有一串不规则的东东，没错，这就是运用缓存机制，我们今天研究的就是这种东西。
先堵为快，猛戳链接下载Demo ：https://github.com/hua126mail/gulpRequireJsCache
以dist为根目录，运行http://localhost/html/index.html,如果出现“Good！成功加载index.js”，则表示成功了。
不熟悉gulp的同学，可以参考这个比较详细的教程：http://www.ydcss.com/archives/18
不熟悉RequireJS的同学，可以参考官方教程:http://www.requirejs.cn/
2、项目主要目录：
gulpRequireJsCache
|
|-- dist //存放发布的文件
|
|-- rev //存放控制版本号的 rev-manifest.json
|
|-- src //项目源文件
|
|-- gulpfile.js //gulp主文件，定义的任务都在这里
|
|-- package.json //gulp依赖包配置文件
|
|-- landing.html
根据执行命令npm install --save-dev后，主目录下会多一个node_modules文件夹，至此，gulp基本配置完成。 gulpfile文件：
var gulp = require('gulp'),
sass = require('gulp-sass'), //编译sass
cssmin = require('gulp-clean-css'), //压缩css
autoprefixer = require('gulp-autoprefixer'), //添加浏览器前缀
rev = require('gulp-rev'), //添加版本号
revCollector = require('gulp-rev-collector'), //添加版本号
clean = require('gulp-clean'), //清理文目标文件夹
csso = require('gulp-csso'), //合并css属性
csslint = require('gulp-csslint'), //css语法检查
csscomb = require('gulp-csscomb'), //css 样式表的各属性的顺序
imagemin = require('gulp-imagemin'), //图片压缩
cache = require('gulp-cache'), //缓存处理
htmlmin = require('gulp-htmlmin'), //压缩html
replace = require('gulp-replace'), //替换路径
uglify = require('gulp-uglify'), //压缩js
jshint = require('gulp-jshint') //js语法检查
;
gulp.task("cleanCss",function(){
return gulp.src('dist/css',{read:false})
.pipe(clean());
});
gulp.task('sass', ['cleanCss'],function () { //执行完cleanCss任务后再执行sass任务
gulp.src('src/sass/**/*.scss')
.pipe(sass())
.pipe(cssmin())
.pipe(autoprefixer())
//.pipe(csscomb())
.pipe(csso())
.pipe(csslint())
.pipe(rev())
.pipe(gulp.dest('dist/css'))
.pipe(rev.manifest())//- 生成一个rev-manifest.json
.pipe(gulp.dest('rev/css'));
});
gulp.task("cleanImg",function(){
return gulp.src('dist/img',{read:false})
.pipe(clean());
});
gulp.task('imgmin',['cleanImg'], function () {
gulp.src('src/img/**/*.{png,jpg,gif,ico}')
.pipe(cache(imagemin())) //没有修改的图片直接从缓存文件读取
.pipe(rev())
.pipe(gulp.dest('dist/img'))
.pipe(rev.manifest())//- 生成一个rev-manifest.json
.pipe(gulp.dest('rev/img'));
});
gulp.task("cleanJs",function(){
return gulp.src(['dist/js/*','!dist/js/lib'],{read:false})
.pipe(clean());
})
gulp.task('jsmin', ['cleanJs'], function () {
gulp.src(['src/js/**/*.js','!src/js/**/*.min.js'])
.pipe(jshint())
.pipe(uglify())
.pipe(rev({merge:true}))
.pipe(gulp.dest('dist/js'))
.pipe(rev.manifest())//- 生成一个rev-manifest.json
.pipe(gulp.dest('rev/js'));
gulp.src(['src/js/lib/**/*.js'])
.pipe(gulp.dest('dist/js/lib'))
});
gulp.task('htmlmin',function () {
var options = {
removeComments: true,//清除HTML注释
//collapseWhitespace: true,//压缩HTML
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
gulp.src('src/html/**/*.html')
.pipe(htmlmin(options))
.pipe(rev())
.pipe(gulp.dest('dist/html'))
.pipe(rev.manifest())//- 生成一个rev-manifest.json
.pipe(gulp.dest('rev/html'));
});
gulp.task('replaceURL', function(){
gulp.src(['dist/html/**/*.html'])
.pipe(replace('../css', '/css'))
.pipe(replace('../js', '/js'))
.pipe(replace('/src', '/dist'))
.pipe(gulp.dest('dist/html'));
gulp.src(['dist/css/**/*.css'])
.pipe(replace('../css', '/css'))
.pipe(replace('../js', '/js'))
.pipe(replace('/src', '/dist'))
.pipe(gulp.dest('dist/css'));
gulp.src(['dist/js/**/*.js'])
.pipe(replace('../css', '/css'))
.pipe(replace('../js', '/js'))
.pipe(replace('/src', '/dist'))
.pipe(gulp.dest('dist/js'));
});
gulp.task('revUrl', function() {
gulp.src(['rev/{css,img,js}/*.json', 'dist/html/**/*.html']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
.pipe(revCollector()) //- 执行文件内css名的替换
.pipe(gulp.dest('dist/html')); //- 替换后的文件输出的目录
gulp.src(['rev/{css,img,js}/*.json', 'dist/css/**/*.css']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
.pipe(revCollector()) //- 执行文件内css名的替换
.pipe(gulp.dest('dist/css')); //- 替换后的文件输出的目录
gulp.src(['rev/{css,img,js}/*.json', 'dist/js/**/*.js']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
.pipe(revCollector()) //- 执行文件内css名的替换
.pipe(gulp.dest('dist/js')); //- 替换后的文件输出的目录
});
gulp.task("autowatch",function(){
gulp.watch(['src/sass/**/*.scss'],['sass']); //监听sacc文件改变后，编译、去缓存
});
/*
* 单步步骤：
* 1.gulp sass 编译scss文件
* 2.gulp jsmin 压缩js
* 3.gulp imgmin 压缩图片
* 4.gulp htmlmin 压缩HTML文件
* 5.gulp replaceURL 替换相对路径为绝对路径
* 6.gulp revUrl 引用manifest给HTML添加版本号
*
*
* gulp sass jsmin htmlmin imgmin replaceURL revUrl
*
*
*
* 如果改了scss文件：则执行：gulp sass
* 如果改了js文件：则执行：gulp jsmin
* 如果改了img文件：则执行：gulp imgmin
*
* 只要改了HTML引用到的资源文件，最后都需要执行gulp htmlmin,gulp replaceURL,gulp revUrl，以清理缓存
* */
根据最后的单步步骤，我们来一步步解剖说明：
var gulp = require('gulp'),
sass = require('gulp-sass'), //编译sass
cssmin = require('gulp-clean-css'), //压缩css
autoprefixer = require('gulp-autoprefixer'), //添加浏览器前缀
rev = require('gulp-rev'), //添加版本号
revCollector = require('gulp-rev-collector'), //添加版本号
clean = require('gulp-clean'), //清理文目标文件夹
csso = require('gulp-csso'), //合并css属性
csslint = require('gulp-csslint'), //css语法检查
csscomb = require('gulp-csscomb'), //css 样式表的各属性的顺序
imagemin = require('gulp-imagemin'), //图片压缩
cache = require('gulp-cache'), //缓存处理
htmlmin = require('gulp-htmlmin'), //压缩html
replace = require('gulp-replace'), //替换路径
uglify = require('gulp-uglify'), //压缩js
jshint = require('gulp-jshint') //js语法检查
;
这些都是执行任务时要用到的插件，看注释大概就知道是干嘛的了。
2.1、css相关处理：运行“gulp sass”
gulp.task("cleanCss",function(){
return gulp.src('dist/css',{read:false})
.pipe(clean());
});
gulp.task('sass', ['cleanCss'],function () { //执行完cleanCss任务后再执行sass任务
gulp.src('src/sass/**/*.scss')
.pipe(sass())
.pipe(cssmin())
.pipe(autoprefixer())
//.pipe(csscomb())
.pipe(csso())
.pipe(csslint())
.pipe(rev())
.pipe(gulp.dest('dist/css'))
.pipe(rev.manifest())//- 生成一个rev-manifest.json
.pipe(gulp.dest('rev/css'));
});
gulp.task("autowatch",function(){
gulp.watch(['src/sass/**/*.scss'],['sass']); //监听sacc文件改变后，编译、去缓存
});
因为公司项目用的是sass，所以加了一个监听任务，去编译生成css文件，css发生更改之后先执行“cleanCss”任务，清空dist文件夹下的css文件，重点是后面的.pipe(rev.manifest())，这一步将生成一个资源文件路径的rev-manifest.json文件，里面的内容是这样的：
{
"base/base.css": "base/base-c1e638e1f6.css",
"controller/index.css": "controller/index-1454781768.css"
}
没错，这是用来最后在HTML文件替换css引用路径的。
同时，dist/css目录下也生成对应的文件：
2.2、img相关处理：运行“gulp imgmin”
gulp.task("cleanImg",function(){
return gulp.src('dist/img',{read:false})
.pipe(clean());
});
gulp.task('imgmin',['cleanImg'], function () {
gulp.src('src/img/**/*.{png,jpg,gif,ico}')
.pipe(cache(imagemin())) //没有修改的图片直接从缓存文件读取
.pipe(rev())
.pipe(gulp.dest('dist/img'))
.pipe(rev.manifest())//- 生成一个rev-manifest.json
.pipe(gulp.dest('rev/img'));
});
过程就不多说啦，一样的先清空dist的图片文件夹，压缩图片，生成rev-manifest.json，生成的文件如下：
{
"push-bg.jpg": "push-bg-6179117417.jpg"
}
2.3、js相关处理：运行“gulp jsmin”
gulp.task('jsmin', ['cleanJs'], function () {
gulp.src(['src/js/**/*.js','!src/js/**/*.min.js'])
.pipe(jshint())
.pipe(uglify())
.pipe(rev({merge:true}))
.pipe(gulp.dest('dist/js'))
.pipe(rev.manifest())//- 生成一个rev-manifest.json
.pipe(gulp.dest('rev/js'));
gulp.src(['src/js/lib/**/*.js'])
.pipe(gulp.dest('dist/js/lib'))
});
过程就是检查语法，压缩，生成rev-manifest.json，要注意的地方是min类型的文件是放在lib目录下，是不需要压缩处理的，直接拷贝过去即可。生成的rev-manifest.json文件如下：
{
"base/cal.js": "base/cal-2e41f44581.js",
"base/require-config.js": "base/require-config-3c5aeda076.js",
"controller/index.js": "controller/index-d14ed3eca8.js"
}
2.4、js相关处理：运行“gulp htmlmin”
gulp.task('htmlmin',function () {
var options = {
removeComments: true,//清除HTML注释
//collapseWhitespace: true,//压缩HTML
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
gulp.src('src/html/**/*.html')
.pipe(htmlmin(options))
.pipe(rev())
.pipe(gulp.dest('dist/html'))
});
过程省略一百字。。。
2.5、替换相对路径：运行“gulp replaceURL”
gulp.task('replaceURL', function(){
gulp.src(['dist/html/**/*.html'])
.pipe(replace('../css', '/css'))
.pipe(replace('../js', '/js'))
.pipe(replace('/src', '/dist'))
.pipe(gulp.dest('dist/html'));
gulp.src(['dist/css/**/*.css'])
.pipe(replace('../css', '/css'))
.pipe(replace('../js', '/js'))
.pipe(replace('/src', '/dist'))
.pipe(gulp.dest('dist/css'));
gulp.src(['dist/js/**/*.js'])
.pipe(replace('../css', '/css'))
.pipe(replace('../js', '/js'))
.pipe(replace('/src', '/dist'))
.pipe(gulp.dest('dist/js'));
});
过程就是替换所有文件的相对路径为绝对路径。
2.6、替换资源文件引用（重中之重）：运行“gulp revUrl”
gulp.task('revUrl', function() {
gulp.src(['rev/{css,img,js}/*.json', 'dist/html/**/*.html']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
.pipe(revCollector()) //- 执行文件内css名的替换
.pipe(gulp.dest('dist/html')); //- 替换后的文件输出的目录
gulp.src(['rev/{css,img,js}/*.json', 'dist/css/**/*.css'])
.pipe(revCollector())
.pipe(gulp.dest('dist/css'));
gulp.src(['rev/{css,img,js}/*.json', 'dist/js/**/*.js'])
.pipe(revCollector())
.pipe(gulp.dest('dist/js'));
});
3、测试结果：
打开dist/html/index.html
<!doctype html>
<html>
<head>
<title>requirejs</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/css/base/base-c1e638e1f6.css">
<link rel="stylesheet" type="text/css" href="/css/controller/index-1454781768.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/csstest/main.css"/>
<![endif]-->
</head>
<body>
<div class="main border-grey" id="name1">
<div class="wrapper">未加载 index.js</div>
</div> <script type="text/javascript" src="/js/base/require-config-3c5aeda076.js" defer="true"></script>
<script data-main="/js/controller/index-d14ed3eca8.js" src="/js/lib/require.min.js" defer="true"></script>
</body>
</html>
可以看到，css和js文件引用的路径都替换成了相应rev-manifest.json中的值。
访问一下页面：
控制台也显示资源文件引用正常：
3.1、修改测试
修改base.scss中body{font-size: 14px;}的字体为20px，重新执行gulp，再截图看下控制台：
可以发现，除了base.css引用变了之外，其他保持不变。
4、补充：
按上面的步骤走完，gulp已经满足项目基本需要了，但仍存在两点问题：
- 对通过require-config.js引入的js文件修改后，没有更新到
- 每次gulp运行完后都会生成新的文件，开发环境是做了清除dist目录处理，但对于一般公司服务器而言，发布到生产环境上，不可能每次发布都对dist做清空处理，文件只会越积越多
- 咦，怎么跟前言博客园截图引用的方法不一样。。。
上面这3点，将在下一节中详解。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
欢迎转载，转载请注明作者：飘飞的夏秋 和出处 http://www.cnblogs.com/chenchenghua/p/5953767.html
使用gulp解决RequireJS项目前端缓存问题（一）的更多相关文章
- 使用gulp解决RequireJS项目前端缓存问题（二）
1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...
- gulp解决RequireJS
gulp解决RequireJS项目前端缓存问题(二) 前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过req ...
- 利用gulp解决微信浏览器缓存问题
做了好多项目,这次终于要解决微信浏览器缓存这个令人头疼的问题了.每次上传新的文件,在微信浏览器中访问时,总要先清除微信的缓存,实在麻烦,在网上搜罗了很多解决办法,终于找到了方法:利用gulp解决缓存问 ...
- Gulp解决发布线上文件(CSS和JS)缓存问题
Gulp解决发布线上文件(CSS和JS)缓存问题 本文的缘由:目前经常线上发布文件后要不断的刷新页面及过很长时间,页面上的CSS和JS文件才能生效,特别对于目前做微信商城的时候,微信内置的浏览器缓存非 ...
- Angular企业级开发(6)-使用Gulp构建和打包前端项目
1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 ...
- 通过gulp为requireJs引入的模块添加版本号
由于项目用到requireJs,并且通过gulp来对项目进行统一的管理,为了防止浏览器对文件进行缓存,所以通过gulp为项目中的文件添加版本号. 1.分别安装gulp-rev.gulp-rev-col ...
- 使用gulp解决外部编辑器修改Eclipse文件延迟更新的问题
本人前端用惯了Hbuilder,修改了eclipse项目中的文件后,由于是外部编辑器修改过的,eclipse不会自动部署更新,一般按F5刷新项目,或者在 preferences > genera ...
- gulp进阶构建项目由浅入深
gulp进阶构建项目由浅入深 阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp. ...
- 使用gulp打包普通项目
前言: 在使用gulp打包工具之前,我做的H5项目在浏览器中的缓存是很严重的,若改了一点css,加了一句js代码,不手动清除浏览器缓存是看不到效果的.老总也在项目演示当中遇到这些问题,一查找原因却是缓 ...
随机推荐
- hibernate学习笔记之二 基本环境搭建
1.创建一个普通的java项目 2.加入Hibernate所有的jar包 3.建立包名com.bjpowernode.hibernate 4.建立实体类User.java package com.bj ...
- 将WordPress安装在网站子目录的相关问题
May182013 将WordPress安装在网站子目录的相关问题 作者:xieyc 发布:2013-05-18 00:11 字符数:3423 分类:站长 阅读: 12,054 次 ...
- Dreamweaver 扩展开发： Calling a C++ function from JavaScript
After you understand how C-level extensibility works in Dreamweaver and its dependency on certain da ...
- 从java文件和CS文件里查询方法使用次数工具
前几天,领导让我找一下老系统(Java)里getRemoteUser方法都哪个文件用了,package是什么,方法被调用了多少次,当时因为着急,所以,直接人工找的,但是以后要是再出现,人工找就太讨厌了 ...
- 实现MVC自定义过滤器，自定义Area过滤器，自定义Controller，Action甚至是ViewData过滤器
MVC开发中几种以AOP方式实现的Filters是非常好用的,默认情况下,我们通过App_Start中的FilterConfig来实现的过滤器注册是全局的,也就是整个应用程序都会使用的,针对单独的Fi ...
- markdown常用语法总结
转自markdown示例[模板] 1.1.段落标题 根据原文中的文档标题可以对应设置标题. # 一级标题## 二级标题### 三级标题 效果 => 一级标题 二级标题 三级标题 1.2.斜体.加 ...
- ASP.NET Core 整合Autofac和Castle实现自动AOP拦截
前言: 除了ASP.NETCore自带的IOC容器外,我们还可以使用其他成熟的DI框架,如Autofac,StructureMap等(笔者只用过Unity,Ninject和Castle). 1.ASP ...
- 跨平台运行 Rafy 首次部署记录
一直想在 Linux 上使用 MONO 试试运行 Rafy,最近因为业务需要,总算是真正地试验了一次.下面是本次部署记录的一些要点. Linux 这次部署,我是和两位同事一起来试验的.由于我们对 Li ...
- C#开发微信门户及应用(10)--在管理系统中同步微信用户分组信息
在前面几篇文章中,逐步从原有微信的API封装的基础上过渡到微信应用平台管理系统里面,逐步介绍管理系统中的微信数据的界面设计,以及相关的处理操作过程的逻辑和代码,希望从更高一个层次,向大家介绍微信的应用 ...
- C# Windows API
API:应用程序接口(API:Application Program Interface)应用程序接口(API:application programming interface)是一组定义.程序及协 ...