毅窝疯

gulp-cached让你的gulp不再慢如牛

By hybnx 2019-05-30 系统&工具 来源:https://my.oschina.net/janpoem/blog/706558 访问:196

老项目,使用gulp来管理基础的js、css生成和打包的。其中开发模式下的gulp watch模式,效能一直都不是很高,尤其是当你的项目、代码中碎片式的代码比较多——所谓碎片式即较多的零散文件构成。

通过使用gulp-print,可以发现,传统的gulp-wacth,是不会管你当前更新的是哪个文件,总之,当你告诉他监控某个目录,那么当这个目录里有某个文件更新了,他就会一次性的把目录下的文件全部执行一次task,真的很呆……

现在,你可以使用gulp-cached这个组件,他的源代码其实也很简单,就是将构建过的文件,生成一个hash,缓存在内存中,直到这个文件被更新,则只更新这个文件,而不再会一次性重新构建全部监控文件。

npm install gulp-cached --save-dev

调用也很简单:

// gulp 其他的引用省去
var cached = require('gulp-cached');
var print = require('gulp-print');

gulp.task('esx-component', function() {
	gulp.src(esxSrc)
	    .pipe(cached('esx-component'))
	    .pipe(print())
	    .pipe(babel({
		    presets: ['react', 'es2015'],
		    plugins: [
			    "transform-es2015-block-scoping",
			    "transform-class-properties",
			    "transform-es2015-computed-properties",
			    "transform-es2015-modules-amd"
		    ]
	    }))
	    .pipe(gulp.dest('./public/js/component'));
});

以下是使用前,每次改个文件,就要整个src的源都要重新构建:

以下是使用后,修改某个文件,只会更新当前的文件: