Javascript 如何让吞咽等待dest文件完成?
我想运行gulp-sass,然后检查生成的css文件的大小 如果我的gulpfile中有以下内容:Javascript 如何让吞咽等待dest文件完成?,javascript,gulp,gulp-sass,Javascript,Gulp,Gulp Sass,我想运行gulp-sass,然后检查生成的css文件的大小 如果我的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'))
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']);
});
我最终陷入了构建css文件的永无止境,显然是因为css.size任务必须等待sass任务完成。如果我错了,请纠正我。对我来说,这没有任何意义,但我没有找到任何其他解释,特别是因为如果我对style.css watch任务进行注释,sass任务只运行一次,正如预期的那样
现在,如果我像这样修改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', 'css.size']);
});
还是像这样
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']);
});
我得到了错误的结果。文件显然还没有编译,我得到了旧文件的文件大小
我应该如何安排我的任务,以便获得新构建的css文件的文件大小?使您的
sass
任务返回流。像这样:
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());
});
注意gulp.src
之前的返回值。这样,css.size
任务将知道sass
任务何时完成,并在完成后开始