Javascript Gulp Watch任务不适用于SASS

我的gulp watch任务适用于JS，但不适用于我的SASS。当我重新运行gulp命令时，它才编译新的CSS文件

这是我的“风格”和“观察”任务代码，如有任何帮助，将不胜感激：

var gulp = require('gulp'),
uglify = require('gulp-uglify'),
sass = require('gulp-ruby-sass'),
livereload = require('gulp-livereload');

function errorLog(error) {
  console.error.bind(error);
  this.emit('end');
}

// Scripts task
// Uglifies js
gulp.task('scripts', function() {
  gulp.src('js/*.js')
    .pipe(uglify())
    .on('error', errorLog)
    .pipe(gulp.dest('build/js'));
});

// Styles Task
// Uglifies scss/css
gulp.task('styles', function() {
 return sass('sass/*.scss', {
  style: 'compressed'
 })
  .on('error', errorLog)
  .pipe(gulp.dest('build/css'))
  .pipe(livereload());
});

// Watch Task
// Watches JS
gulp.task('watch', function() {

  var server = livereload();

  gulp.watch('js/*.js', ['scripts']);
  gulp.watch('sass/*.scss', ['styles']);
});

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

---

您的问题在细节上有点轻，但我认为您可以对代码进行一些改进，这将有所帮助。您只在

js

和

sass

目录的根目录中包含文件（这可能是有意的）

这意味着如果在

js/myfolder/somefile.js中进行了更改，
watch
任务将运行。同样，如果您对文件
sass/myfolder/somestyle.scss
或部分
sass/myfolder/_mypartial.scss
进行了更改，则任务将运行

您可能只需要根目录，如果需要，请忽略下面的双星号，只需保留现有的目录即可。我个人使用双星号，因为很少所有文件都在根目录中（特别是使用Sass和partials）

注意上面我是如何添加的
livereload.listen（）
这是推荐的插件工作方式。您所做的工作无法正常工作，并且更改未通过LiveReload更新

我的建议是将文件路径存储在变量中。您的文件中有一点重复（这很好，但会使Gulp文件更难维护）

我意识到我的建议超出了你问题的范围，解决你问题的方法就是在你的
watch
任务中使用
livereload.listen（）
。剩下的是基于过去几年对我有效的建议

我最后的建议如下：

var gulp = require('gulp'),
uglify = require('gulp-uglify'),
sass = require('gulp-ruby-sass'),
livereload = require('gulp-livereload');

var outputDir = 'build/';

var path = {
    styles: 'sass/**/*.scss',
    stylesOutput: outputDir + 'css',
    js: 'js/**/*.js',
    jsOutput: outputDir + 'js'
};

function errorLog(error) {
  console.error.bind(error);
  this.emit('end');
}

// Scripts task
// Uglifies js
gulp.task('scripts', function() {
  gulp.src(path.js)
    .pipe(uglify())
    .on('error', errorLog)
    .pipe(gulp.dest(path.jsOutput));
});

// Styles Task
// Uglifies scss/css
gulp.task('styles', function() {
 return sass(path.styles, {
  style: 'compressed'
 })
  .on('error', errorLog)
  .pipe(gulp.dest(path.stylesOutput))
  .pipe(livereload());
});

// Watch Task
// Watches JS
gulp.task('watch', function() {

  var server = livereload();

  gulp.watch(path.js, ['scripts']);
  gulp.watch(path.styles, ['styles']);
});

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

检查您的目录和globs中的sas。在下面的示例中，我使用了一个对象作为路径，但是我将注释掉作为我的主路径，因为这是导入部分的文件。它只适用于一次
$gulp sass
，但当我看到什么都没发生时。我只需要告诉gulp task检查所有以.sass结尾的文件。简单，但有时做很多事情时很容易错过

var paths = {
sass: ['./src/sass/**/*.sass'],
//sass: ['./src/sass/main.sass'],
};

您是否有任何错误消息？有关实际发生的情况的详细信息（输出等）可能会有用。无论如何，您使用的livereload与推荐的略有不同-
livereload。必须在
watch
任务中调用listen（）
。来源
var paths = {
sass: ['./src/sass/**/*.sass'],
//sass: ['./src/sass/main.sass'],
};