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

2019独角兽企业重金招聘Python工程师标准>>>

老项目，使用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的源都要重新构建：

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

转载于:https://my.oschina.net/janpoem/blog/706558