gulp 中的增量编译

《gulp 中的增量编译》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、gulp中的增量编译最近花一点时间学了下gulp，顺便学了下sass，因为工作中并不需要用（我比较希望学习是需求驱动），所以一直拖到现在才学。突然觉得学习这类工具性价比很高，半天一天即可上手，技能树丰富了（尽管可能只会20%，但是可以完成80%的工作了啊！），简历丰富了，所以才有这么多前端er不屑数据结构和算法这些基础吧，毕竟投入产出比太低，学一个简单的算法的时间都够掌握两遍基本的gulp工作流了！言归正传，今天要讲的是gulp的增量编译。在编译的过程中，有没有发现很多不必要的编译呢？我们以如下的例子为例：复制代码letdest='css/';//sass->cssgulp.t

2、ask('css',function(){//任务名returngulp.src('sass/*.scss')//目标sass文件.pipe(plumber({errorHandler:notify.onError('Error:<%=error.message%>')})).pipe(sass())//sass->css.pipe(debug({title:'编译'})).pipe(gulp.dest(dest));});gulp.task('watch',function(){gulp.watch('sass/*.scss',['css']);});gulpwatch启动监

3、听，此时修改sass文件夹下的任意文件，都会编译该文件夹下的所有文件，这不是我们希望的，我们希望只对修改过的文件进行编译，即增量编译（IncrementalBuilds）。gulp官方推荐了4个用于增量编译的插件，我们一起来看看使用方法以及它们的差异。gulp-changed-onlypassthroughchangedfilesgulp-cached-in-memoryfilecache,notforoperationonsetsoffilesgulp-remember-pairsnicelywithgulp-cachedgulp-newer-passthroughnewer

4、sourcefilesonly,supportsmany:1source:destgulp-changed首先推荐的是gulp-changed，毕竟它的作者在GitHub上拥有15k的followers。该插件默认是通过比较源文件和生成文件的修改时间来判断是否将文件往下传递（pipe流），当然也可以通过haschanged改变默认比较方式，采用sha1比较，感觉有点像浏览器缓存中的Last-Modified/If-Modified-Since和ETag/If-None-Match。个人觉得默认比较已经足够了。复制代码letdest='css/';//sass->cssgulp.

5、task('css',function(){//任务名returngulp.src('sass/*.scss')//目标sass文件.pipe(plumber({errorHandler:notify.onError('Error:<%=error.message%>')})).pipe(changed(dest,{//dest参数需要和gulp.dest中的参数保持一致extension:'.css'//如果源文件和生成文件的后缀不同，这一行不能忘}))//sass()willonlygetthefilesthat//changedsincethelasttimeitwasr

6、un.pipe(sass())//sass->css.pipe(debug({title:'编译'})).pipe(gulp.dest(dest))});gulp.task('watch',function(){gulp.watch('sass/*.scss',['css']);});值得注意的是，如果源文件和生成文件的后缀不一样，需要加上extension参数。个人认为还有两点需要注意。第一点是因为gulp-changed是基于文件的判断，所以并不一定需要开启watch（这和接下去要说的gulp-cached不同），怎么说？先用gulpcss的命令编译一次，然后修改一个文件，

7、再用gulpcss编译一次，这样的操作是生效的。第二点，因为gulp-changed只会将修改过的文件往下pipe，所以如果后续有需要合并的操作（concat操作），那么就会导致文件缺失，合并后的文件其实就是修改过的文件了。所以gulp-changed只适合1:1的操作。gulp-cached和gulp-changed基于文件的对比不同，gulp-cached可以将第一次传递给它的文件内容保留在内存中，如果之后再次执行task，它会将传递给它的文件和内存中的文件进行比对，如果内容相同，就不再