css - Gulp - 延迟更新文件

Question

我正在开发一个使用多个 UI 框架和预处理器(如 SASS)的 JS Web 应用程序，

我正在使用 Gulp 作为任务运行器，但我遇到了一个奇怪的行为

例如:在我的 sass 文件中

.class_name{
  text-align: left;
  padding-left: 10px;
  padding-right: 15px;

}

这是我的 gulp 任务

gulp.task('sass',function(){
gulp.src(['src/scss/base.scss',
        'src/scss/**/**/*.scss'
      ]).pipe(concat('styles.scss'))
      .pipe(sass())
      .pipe(gulp.dest('src/css'))
})

gulp.task('styles',['sass'], function () {
  return gulp.src(['src/css/styles.css',
        'src/css/libs/**/*.css'
      ])
 .pipe(concat('styles.css')) // Other post-processing.
 .pipe(gulp.dest('public/css')) // Output LTR stylesheets.
 .pipe(rtlcss()) // Convert to RTL.
 .pipe(rename({ suffix: '-rtl' })) // Append "-rtl" to the filename.
 .pipe(gulp.dest('public/css')); // Output RTL stylesheets.
});
gulp.task('watch',function () {

 gulp.watch('src/scss/**/**/*.scss',['styles']);

})


gulp.task('default',['styles','watch']);

当我更新 sass 文件中的任何内容时，例如将第 3 行更改为 padding-left:5px;

styles.css 中的结果仍然是旧值 paddin-left:10px;如果我在更多时间将其更改为 padding-left:15px;
结果是 padding-left:5px;为什么更新文件总是延迟一步!!!

提前致谢。

Answer 1

你应该返回saas的结果

gulp.task('sass',function(){
   return gulp.src(['src/scss/base.scss',
        'src/scss/**/**/*.scss'
      ]).pipe(concat('styles.scss'))
      .pipe(sass())
      .pipe(gulp.dest('src/css'))
})

除非你return style 将不知道saas 任务何时完成