摘要：
现在我们已经可以成功的压缩js、压缩css、合并文件了。但美中不足的是：每次修改时都会全部更新，哪怕是只修改一个css文件也会导致整个项目重新生成一遍。如果项目文件过多，等待打包的时间就会变得很长，严重影响工作效率......

一、上一篇答案揭晓

在上一篇gulp-rename实现文件重命名的文章中留下了一个小疑问：如何同时输出未压缩和压缩后的文件，核心代码如下：

glupfile.js

.pipe(gulp.dest('./dist/css'))/*输出正常的*/
.pipe(rename({suffix:'.min'})/*重命名，添加一个.min的后缀*/
.pipe(gulp.dest('./dist/css'))/*现在输出的已经带了.min后缀了*/

代码都是之前的，看官答对了吗？

二、gulp-cached 只传递更改过的文件

2.1、每次修改都全部更新，可否优化？

截止到目前为止，我们已经成功的掌握了以下技能：
css压缩
gulp-uglify压缩js
gulp-concat文件合并
gulp-rename 文件重命名
但看官有没有注意一个问题呢？就是小标题说的：每次修改css或js时都是全部更新。如图：修改文件时会全部更新

2.2、引出插件

可能有看官要说了，这不就是多生成了下嘛，也没什么呀！

话虽如此，但如果一个项目比较大的话，每次修改都重新全部编译，势必会造成大量的等待编译时间！所以，如果我们能做到：修改什么就只更新什么，那就太好了！

所以接下来，我们又要继续装插件了。

2.3、插件地址

插件地址：www.npmjs.com/package/gulp-cached

不知道插件怎么用或者想查看更多用法，可以访问上面的链接。下面开始在本地搭建项目跑代码了。

2.4、项目环境搭建

在d盘demo-node目录下创建一个名为demo-gulp-cached的空文件夹作为我们本节课程的项目目录。然后在windows下打开cmd命令窗口，然后依次输入以下代码：
cd D:\demo-node\demo-gulp-cached
d:进入文件夹
npm install gulp@3.9.1 --save-dev在项目目录下安装gulp的版本号是3.9.1。
npm init创建项目描述文件package.json，一路回车
npm install gulp-cached --save-dev安装gulp-cached插件。

一波操作过后，我们的项目环境及需要使用的插件就都有了。如图：在cmd中安装gulp@3.9.1和gulp-cached插件

2.5、创建简单的html及js文件

要创建的文件如下：index.html、app/css/reset.css、app/css/main.css、app/js/config.js、app/js/main.js
下面开始配置gulpfile.js。

2.6、手动配置gulpfile.js

在项目根目录下新建一个gulpfile.js文件，内容如下：

glupfile.js

/*gulp版本：3.9.1；
功能：gulp-cache 只传递更改过的文件，减少编译时间 */
var gulp=require('gulp');
var cached=require('gulp-cached');
/*css任务*/
gulp.task('css',function(){
return gulp.src('./app/css/*.css')
.pipe(cached('css'))/*只向下传递修改的文件，避免全部传递*/
.pipe(gulp.dest('./dist/css'))/*输出目录*/
});
/*watch监听，不需要在cmd中重复执行gulp xxx*/
gulp.task('watch',function(){
gulp.watch('./app/css/*.css',['css']);/*css有修改时监听*/
});
/*默认任务，启动后会执行一次*/
gulp.task('default',['css','watch']);

2.7、cmd中运行看效果

切换到cmd，然后在里面输入：gulp并回车。此时会自动生成dist目录及目录下的文件。然后我们只修改main.css这个文件，你会看到cmd中只向下传递了main.css，另一个reset.css并未修改。如图：使用gulp-clean后只传递更新的文件

怎么样，是不是很简单！有没有很激动？！

三、太简单了，写这文章有啥意思？

看官别高兴太早了，上面的代码没有出现翻车是因为用的插件少！也就是需求少而已，如果增加几个需求，秒秒钟翻车！！！接下来将有一场大型的翻车现场表演，看官们抓紧时间搬好小板凳，喜欢拍照的可拿出手机记录这一精彩的翻车现场！

四、即将上演大型翻车现场

准备好了吗？开始！

4.1、需求：合并所有css文件

这需求还不简单嘛！就一个合并而已！内心戏：前面讲到过合并可以使用gulp-concat，那直接装插件跑不就完了。艺灵，你跟我说的翻车就是这玩意儿？？？

4.2、安装 gulp-concat

直接在cmd中输入：npm install gulp-concat --save-dev回车即可。

4.3、修改 gulpfile.js

glupfile.js

/*gulp版本：3.9.1；
需求：合并css文件并尽可能优化 */
var gulp=require('gulp');
var cached=require('gulp-cached');/*只传递更改过的文件，减少编译时间*/
var concat=require('gulp-concat');/*文件合并*/
/*css任务*/
gulp.task('css',function(){
return gulp.src('./app/css/*.css')
.pipe(cached('css'))/*只向下传递修改的文件，避免全部传递*/
.pipe(concat('all.css'))/*合并css*/
.pipe(gulp.dest('./dist/css'))/*输出目录*/
});
/*watch监听，不需要在cmd中重复执行gulp xxx*/
gulp.task('watch',function(){
gulp.watch('./app/css/*.css',['css']);/*css有修改时监听*/
});
/*默认任务，启动后会执行一次*/
gulp.task('default',['css','watch']);

上面代码看似没毛病对吧，那跑一下试试吧！

4.4、cmd中运行看效果

切换到cmd，然后在里面输入：gulp并回车。dist/css/all.css如期生成，打开all.css可以看到已成功合并了reset.css和main.css这两个文件。如图：首次运行gulp时gulp-concat成功合并所有css文件
接下来修改下css看下会怎么样吧！在修改main.css并保存后，all.css已经重新被打包好了，然后放编辑器中看下里面内容吧，如图：修改main.css后gulp-concat合并文件部分丢失
怎么样？翻车了吧！

五、解决方案

5.1、为何会翻车？

其实很简单，虽然gulp-concat会合并所有文件，但是，由于gulp-cached只向下传递修改过的文件。也就是说：由于此时reset.css并没有修改，所以只有main.css会被合并。

5.2、安装 gulp-remember

直接在cmd中输入：npm install gulp-remember --save-dev回车即可。

5.3、修改 gulpfile.js

glupfile.js

/*gulp版本：3.9.1；
需求：合并css文件并尽可能优化 */
var gulp=require('gulp');
var cached=require('gulp-cached');/*只传递更改过的文件，减少编译时间*/
var concat=require('gulp-concat');/*文件合并*/
var remember=require('gulp-remember');/*记录经过它的所有文件*/
/*css任务*/
gulp.task('css',function(){
return gulp.src('./app/css/*.css')
.pipe(cached('css'))/*只向下传递修改的文件，避免全部传递*/
.pipe(remember('css'))/*传递所有css，防止只合并修改过的文件*/
.pipe(concat('all.css'))/*合并css*/
.pipe(gulp.dest('./dist/css'))/*输出目录*/
});
/*watch监听，不需要在cmd中重复执行gulp xxx*/
gulp.task('watch',function(){
gulp.watch('./app/css/*.css',['css']);/*css有修改时监听*/
});
/*默认任务，启动后会执行一次*/
gulp.task('default',['css','watch']);

5.4、cmd中运行看效果

再次切换到cmd，然后在里面输入：gulp并回车。然后直接修改main.css并保存，看合并后的all.css是否还会丢失代码吧。如图：gulp-remember可解决gulp-cached只传递修改文件导致合并时不全的bug
终于没有再次翻车了！赶紧擦擦头上的汗......

六、本文总结

七、源码下载

为了方便看官将本文中出现的场景复现，艺灵会提供文章中各实例的源码。完整源码已打包好并上传至百度云，下载链接:
链接: pan.baidu.com/s/1L2wcpAPaJhbKcADaiToESg 提取码: 73n2

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2019-05-01/gulp-cached.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。