gulp-changed的使用:只编译改动过的文件

这是一个很是小的Gulp使用问题,小到我都以为上不了台面,可是对于新手来讲,仍是有参考价值和实用价值的,因而就以问答的方式简短的描述一下。高手绕道css

邂逅问题

在给一个老的工程添加gulp配置的时候,为了保证编译打包的速度,我坚决果断的选择了gulp-changed插件,该插件可以实现只编译或打包改变过文件,大大加快了gulp task的执行速度。
因而,我就根据官方文档,添加了一行代码:npm

.pipe(changed(DEST))

添加以后,貌似稍微变快了一点点,可是每次watch文件改动以后,浏览器那边要刷好几回才能出来正确的编译后的结果,我一看:此事必有蹊跷gulp

查找缘由

因而,我立刻使用了gulp-debug来查看,添加了一行以下代码,来查看每次编译的时候都有哪些文件经过了流,是否是仅仅只有哪些变更了的文件。浏览器

.pipe(debug({title: '编译:'}))

不看不知道,一看吓一跳:基本上每次编译的时候全部的jsx文件都从新编译了一遍,难怪这么慢。
图片描述spa

解决方法

每次编译的时候,只有jsx会所有从新编译一遍,js和css文件却不会,我的本能的以为多是文件名后缀的缘由。
因而,又从新看官方文档,结果在下面找到了这些:
图片描述
原来,编译先后文件名后缀若是发生改变的话,须要单独配置的啊。。。具体缘由不探究了,留给有心人去发掘吧。
改成以下形式,问题就解决了:插件

.pipe(changed(dist,{extension:'.js'}))

这才是正常的节奏嘛!!
图片描述debug

总结

  • 出现问题首先看官方文档。3d

  • 看文档要看全。code

相关文章
相关标签/搜索