Gulp - 更新文件的延迟答案

【问题标题】：Gulp - delay in updating filesGulp - 更新文件的延迟
【发布时间】：2017-06-12 08:02:26
【问题描述】：

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

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

例如：在我的 sass 文件中

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

}

这是我的一口任务

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; 为什么更新文件总是延迟一步！！！

提前致谢。

【问题讨论】：

标签： css gulp gulp-watch gulp-sass

【解决方案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 任务何时完成

【讨论】：

您肯定是对的，但另一种解决方案是将两个任务一起通过管道传输到一个任务中，不幸的是我在看到您回答之前应用了此解决方案。感谢您的帮助。