项目使用gulp来处理日常构建,但是当样式文件越来越多后如果每次都是全量编译会导致效率及其差,那么就来解决一下吧~
问题:
gulp-sass每次都会全量编译路径下所有*.scss
解决方案:
每次只将变动的文件进行编译,不再全量编译。
解决这个问题主要使用gulp-watch
插件,github地址、npm地址
我比较喜欢使用gulp-debug
查看当前管道输出,很方便,npm地址
接下在就直接贴出代码了,首先看下引入的依赖
const gulp = require('gulp');
const sass = require('gulp-sass');
const watch = require('gulp-watch');
const debug = require('gulp-debug');
const path = require('path');
const join = src => path.join('app', src);
没啥毛病,继续。
gulp.task('watch:different-scss', () => {
const baseDir = '/public/css_route';
const scssPath = join(`${baseDir}/*.scss`);
// ignoreInitial 首次启动不触发文件变动callback
watch(scssPath, { ignoreInitial: true }, file => {
// 要注意的是 file 参数类型为 Vinyl file object
// 获取当前变动文件的文件名
const basePath = path.basename(file.path);
const filePath = join(`${baseDir}/${basePath}`);
gulp.src(filePath)
.pipe(debug({ title: 'Find Different: ' }))
.pipe(sass().on('error', sass.logError))
.pipe(debug({ title: 'Output Different: ' }))
.pipe(gulp.dest(join('/public/styles')));
})
});
补充说一下,在watch
的 callback
中返回的参数类型是Vinyl
,并不是普通的文件流(stream)
。
Vinyl github
# 接下在run task就好啦~
$ gulp watch:different-scss
贴图看下效果:
Ok~完事收工!