使用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代码,不手动清除浏览器缓存是看不到效果的.老总也在项目演示当中遇到这些问题,一查找原因却是缓 ...
随机推荐
- 当前端也拥有 Server 的能力
今天看了不少文章,比较感兴趣的是 Cache API.它是浏览器 Request/Response 的缓存管理工具,其使用风格和运用场景让我瞬间联想到了 ServiceWorker 和 Fetch A ...
- 玩转Windows服务系列汇总
玩转Windows服务系列汇总 创建Windows服务 Debug.Release版本的注册和卸载及其原理 无COM接口Windows服务启动失败原因及解决方案 服务运行.停止流程浅析 Windows ...
- 向Java技术进军
前两天有个朋友要我帮忙写个打印机服务,要求能应用在.net .Dephi.和java程序上面.看了下需求不难也就串口操作,所以就在周未写了个Win32的动态库,对于一个曾经写MFC程序的.net程序员 ...
- 基于java的分布式爬虫
分类 分布式网络爬虫包含多个爬虫,每个爬虫需要完成的任务和单个的爬行器类似,它们从互联网上下载网页,并把网页保存在本地的磁盘,从中抽取URL并沿着这些URL的指向继续爬行.由于并行爬行器需要分割下载任 ...
- ABP框架 - 多层结构
文档目录 本节内容: 简介 ABP结构 多层 其它层(通用) 领域(Core)层 应用层 基础层 Web & 表示层 其它 总结 简介 一个应用的代码库的分层是一个广为接受的技术,用来减少复杂 ...
- jar hell & elasticsearch ik 版本问题
想给es 安装一个ik 的插件, 我的es 是 2.4.0, 下载了一个版本是 1.9.5, [2016-10-09 16:56:26,248][INFO ][node ] [node-2] init ...
- MongoDB学习笔记~数据模型属性为集合时应该为它初始化
回到目录 今天要说一下技术点,我们在设计mongodb的数据模型时,如果属性是数组或者集合类型,我们在模型初始化时,需要为它们初始化一下,否则在数据库里将会被存储为NULL,当被存储为NULL时,我们 ...
- 【基于WinForm+Access局域网共享数据库的项目总结】之篇三：Access远程连接数据库和窗体打包部署
篇一:WinForm开发总体概述与技术实现 篇二:WinForm开发扇形图统计和Excel数据导出 篇三:Access远程连接数据库和窗体打包部署 [小记]:最近基于WinForm+Access数据库 ...
- android快捷开发之Retrofit网络加载框架的简单使用
大家都知道,安卓最大的特点就是开源化,这自然会产生很多十分好用的第三方API,而基本每一个APP都会与网络操作和缓存处理机制打交道,当然,你可以自己通过HttpUrlConnection再通过返回数据 ...
- android使用PullToRefresh实现上拉加载和下拉刷新效果
其实很早前就在博客园中也写过官方的下拉刷新控件SwipeRefreshLayout,但是这个控件仅仅支持下拉刷新,用起来还算可以.然而在我们实际开发应用中,很多地方都不止有下拉刷新,而且还有上拉加载的 ...