Gulp Watch 任务不适用于 SASS答案

【问题标题】：Gulp Watch Task not working for SASSGulp Watch 任务不适用于 SASS
【发布时间】：2016-06-04 10:44:30
【问题描述】：

我的 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']);

【问题讨论】：

你有什么错误信息吗？
更多关于实际发生的信息——输出等，可能会有用。
无论如何，您使用的 livereload 与推荐的略有不同 - livereload.listen() 必须在 watch 任务中调用。来源github.com/vohof/gulp-livereload

标签： javascript css sass gulp watch

【解决方案1】：

您的问题对细节有点轻，但我认为您可以对您的代码进行一些改进，这将有所帮助。您只在 js 和 sass 目录的根目录中包含文件（这可能是故意的）。

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

您可能只想要根目录，如果是这样，请忽略下面的双星号，并坚持您所拥有的。我个人使用双星号，因为很少有所有文件都在根目录中（尤其是使用 Sass 和部分文件）。

gulp.task('watch', function() {

    livereload.listen();

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

请注意上面我如何添加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']);

【讨论】：

【解决方案2】：

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

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

【讨论】：