Question

我正在使用多个UI框架和预处理器（如SASS，

）开发JS Web App

我使用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任务何时完成

Gulp - 延迟更新文件

1 个答案: