gulp-changed的使用：只編譯改動過的文件

來自： https://segmentfault.com/a/1190000004929314

這是一個非常小的Gulp使用問題，小到我都覺得上不了臺面，但是對于新手來說，還是有參考價值和實用價值的，于是就以問答的方式簡短的描述一下。 高手繞道 。

邂逅問題

在給一個老的工程添加gulp配置的時候，為了保證編譯打包的速度，我毫不猶豫的選擇了 gulp-changed 插件，該插件能夠實現 只編譯或打包改變過文件 ，大大加快了gulp task的執行速度。

于是，我就根據官方文檔，添加了一行代碼：

.pipe(changed(DEST))

添加之后，貌似稍微變快了一點點，但是每次watch文件改動之后，瀏覽器那邊要刷好幾次才能出來正確的編譯后的結果，我一看： 此事必有蹊蹺 。

查找原因

于是，我馬上使用了 gulp-debug 來查看，添加了一行如下代碼，來查看每次編譯的時候都有哪些文件通過了流，是不是僅僅只有哪些變動了的文件。

.pipe(debug({title: '編譯:'}))

不看不知道，一看嚇一跳：基本上每次編譯的時候所有的jsx文件都重新編譯了一遍，難怪這么慢。

解決方法

每次編譯的時候，只有jsx會全部重新編譯一遍，js和css文件卻不會，個人本能的覺得可能是文件名后綴的原因。

于是，又重新看官方文檔，結果在下面找到了這些：

原來，編譯前后文件名后綴如果發生改變的話，需要單獨配置的啊。。。具體原因不探究了，留給有心人去發掘吧。

改為如下形式，問題就解決了：

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

這才是正常的節奏嘛！！

總結

• 出現問題首先看官方文檔。

• 看文檔要看全。