gulp-changed的使用:只编译改动过的文件
<p>来自: <a href="/misc/goto?guid=4959670581038958138" rel="nofollow">https://segmentfault.com/a/1190000004929314</a></p> <p>这是一个非常小的Gulp使用问题,小到我都觉得上不了台面,但是对于新手来说,还是有参考价值和实用价值的,于是就以问答的方式简短的描述一下。 <strong>高手绕道</strong> 。</p> <h2>邂逅问题</h2> <p>在给一个老的工程添加gulp配置的时候,为了保证编译打包的速度,我毫不犹豫的选择了 <a href="/misc/goto?guid=4959657926385574025" rel="nofollow,noindex">gulp-changed</a> 插件,该插件能够实现 <strong>只编译或打包改变过文件</strong> ,大大加快了gulp task的执行速度。</p> <p>于是,我就根据官方文档,添加了一行代码:</p> <pre> .pipe(changed(DEST))</pre> <p>添加之后,貌似稍微变快了一点点,但是每次watch文件改动之后,浏览器那边要刷好几次才能出来正确的编译后的结果,我一看: <strong>此事必有蹊跷</strong> 。</p> <h2>查找原因</h2> <p>于是,我马上使用了 <a href="/misc/goto?guid=4959670581153989301" rel="nofollow,noindex">gulp-debug</a> 来查看,添加了一行如下代码,来查看每次编译的时候都有哪些文件通过了流,是不是仅仅只有哪些变动了的文件。</p> <pre> .pipe(debug({title: '编译:'}))</pre> <p>不看不知道,一看吓一跳:基本上每次编译的时候所有的jsx文件都重新编译了一遍,难怪这么慢。</p> <p><img src="https://simg.open-open.com/show/8acc08486289614e47604feb033c1b54.png"></p> <h2>解决方法</h2> <p>每次编译的时候,只有jsx会全部重新编译一遍,js和css文件却不会,个人本能的觉得可能是文件名后缀的原因。</p> <p>于是,又重新看官方文档,结果在下面找到了这些:</p> <p><img src="https://simg.open-open.com/show/32a9a494d047e55eb44b11349d9f9087.png"></p> <p>原来,编译前后文件名后缀如果发生改变的话,需要单独配置的啊。。。具体原因不探究了,留给有心人去发掘吧。</p> <p>改为如下形式,问题就解决了:</p> <pre> .pipe(changed(dist,{extension:'.js'}))</pre> <p>这才是正常的节奏嘛!!</p> <p><img src="https://simg.open-open.com/show/6a4d3f40c91f7f89efcbbf251cf64687.png"></p> <h2>总结</h2> <ul> <li> <p>出现问题首先看官方文档。</p> </li> <li> <p>看文档要看全。</p> </li> </ul>
本文由用户 OsvaldoJohn 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!