Gulp

Question

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

我正在使用 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

你应该 return 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 任务完成

Gulp - 更新文件延迟

Gulp - delay in updating files

css

gulp-watch

gulp-sass