[英]How to make Gulp wait until dest file is finished?
I want to run gulp-sass and after that check, what is the size of the generated css file. 我想运行gulp-sass并在检查之后生成的css文件的大小是多少。
If I have the following in my gulpfile: 如果我在gulpfile中有以下内容:
gulp.task('sass', function () {
gulp.src('src/scss/style.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest(buildPath+'css'))
.pipe(connect.reload());
});
gulp.task('css.size', ['sass'], function() {
gulp.src(buildPath+'css/style.css')
.pipe(filesize())
})
gulp.task('default', ['clear','copy', 'sass', 'connect'], function() {
gulp.watch(['./src/**/*.js', './src/*/**.html'], ['copy', 'reload']);
gulp.watch('./src/**/*.scss', ['sass']);
gulp.watch(buildPath+'css/style.css', ['css.size']);
});
I end up in the never ending limbo of building css file, apparently because the css.size task has to wait for the sass task to finish. 我最终陷入了构建css文件的永无止境的困境,显然是因为css.size任务必须等待sass任务完成。 Correct me if I am wrong. 如果我错了,请纠正我。 For me it does not make sense, but I have not found any other explanation, especially because if I comment the style.css watch task, the sass task is ran only once, as expected. 对我来说它没有意义,但我没有找到任何其他解释,特别是因为如果我评论style.css监视任务,sass任务只运行一次,如预期的那样。
Now, if I modify the gulpfile like this: 现在,如果我像这样修改gulp文件:
gulp.task('sass', function () {
gulp.src('src/scss/style.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest(buildPath+'css'))
.pipe(connect.reload());
});
gulp.task('css.size', ['sass'], function() {
gulp.src(buildPath+'css/style.css')
.pipe(filesize())
})
gulp.task('default', ['clear','copy', 'sass', 'connect'], function() {
gulp.watch(['./src/**/*.js', './src/*/**.html'], ['copy', 'reload']);
gulp.watch('./src/**/*.scss', ['sass', 'css.size']);
});
or like this 或者像这样
gulp.task('sass', function () {
gulp.src('src/scss/style.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest(buildPath+'css'))
.pipe(connect.reload());
gulp.src(buildPath+'css/style.css')
.pipe(filesize())
});
gulp.task('default', ['clear','copy', 'sass', 'connect'], function() {
gulp.watch(['./src/**/*.js', './src/*/**.html'], ['copy', 'reload']);
gulp.watch('./src/**/*.scss', ['sass']);
});
I get the wrong results. 我得到了错误的结果。 The file is apparently not compiled yet and I get the file size of the old file. 该文件显然尚未编译,我得到旧文件的文件大小。
How should I arrange my tasks so I could get the file size of freshly built css file? 我应该如何安排我的任务,以便获得新建的css文件的文件大小?
Make your sass
task return the stream. 让你的sass
任务返回流。 Like this: 像这样:
gulp.task('sass', function () {
return gulp.src('src/scss/style.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest(buildPath+'css'))
.pipe(connect.reload());
});
Note the return before the gulp.src
. 注意gulp.src
之前的gulp.src
。 That way, the css.size
task will know when the sass
task finishes, and start after it. 这样, css.size
任务将知道sass
任务何时完成,并在它之后开始。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.