Question

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

这是我的风格＆＃39;并且＆＃39;观看＆＃39;任务代码，任何帮助将不胜感激：

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和partials）。

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

    livereload.listen();

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

注意上面我添加livereload.listen()的方式，这是插件工作的推荐方式。您正在做的事情将无法正常工作，并且更改未通过LiveReload更新。

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

我意识到我的建议超出了您的问题的范围，您的问题的修复具体是在livereload.listen()任务中使用watch。其余的是基于过去几年对我有用的东西的圣人建议。

我的最终推荐是这样的：

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

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

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

Gulp Watch Task不适用于SASS

2 个答案: