吞噬监视任务不适用于 SASS

Question

我的 gulp 手表任务适用于 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']);

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

Answer 2

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

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