Gulp不關注任何SCSS變化。我必須使用gulp-ruby-sass嗎？

Question

我有設置的gulp文件來監視變化。我正在使用Redux體系結構在ReactJS中開發應用程序。我注意到的是，gulp並沒有注意到SCSS文件中的任何變化。

/*eslint-disable */ 
 
var path = require('path'); 
 
var runSequence = require('run-sequence'); 
 
var install = require('gulp-install'); 
 
var spawn = require('child_process').spawn; 
 
var $ = require('gulp-load-plugins')({ 
 
    pattern: [ 
 
     'gulp', 
 
     'gulp-*', 
 
     'gulp.*', 
 
     'merge-stream', 
 
     'del', 
 
     'browserify', 
 
     'watchify', 
 
     'vinyl-source-stream', 
 
     'vinyl-transform', 
 
     'vinyl-buffer', 
 
     'glob', 
 
     'lodash', 
 
     'less-plugin-*', 
 
     'mochify' 
 
    ], 
 
    replaceString: /^gulp(-|\.)/, 
 
    rename: { 
 
     'merge-stream': 'mergeStream', 
 
     'del': 'delete' 
 
    } 
 
}); 
 

 
var env = require('env-manager')({ 
 
    argv: process.argv, 
 
    dir: path.join(__dirname, 'environments'), 
 
    base: 'base.js', 
 
    pattern: '{env}.js', 
 
    defaults: { 
 
     'env': 'development' 
 
    } 
 
}); 
 

 
$.util.log($.util.colors.magenta('Running in ' + env.name + ' environment')); 
 

 
require('gulp-tasks-registrator')({ 
 
    gulp: $.gulp, 
 
    dir: path.join(__dirname, 'tasks'), 
 
    args: [$, env], 
 
    verbose: true, 
 
    panic: true, 
 
    group: true 
 
}); 
 

 
$.gulp.task('clean', ['clean:server', 'clean:client'], function task(done) { 
 
    done(); 
 
}); 
 

 
$.gulp.task('install', function() { 
 
    return $.gulp.src([ './package.json']).pipe(install()); 
 
}); 
 

 
$.gulp.task('build', function task(done) { 
 

 
    return runSequence(
 
     //'lint', 
 
     // 'install', 
 
     'clean', 
 
     'build:server', 
 
     'build:client:images', 
 
     'build:client:fonts', 
 
     [ 
 
      'build:client:scripts', 
 
      'build:client:styles' 
 
     ], 
 
     'build:client:html', 
 
     done 
 
    ); 
 
}); 
 

 
$.gulp.task('run-wrapper', function(done) { 
 
    var server = spawn('node', ['serviceWrapper.js'], {stdio: ['inherit']}); 
 
    server.stderr.on('data', function(data){ 
 
     process.stderr.write(data); 
 
    }); 
 

 
    server.stdout.on('data', function(data) { 
 
     process.stdout.write(data); 
 
    }); 
 
    server.unref(); 
 
}); 
 

 
$.gulp.task('default', function task(done) { 
 
    runSequence('build', ['serve', 'run-wrapper','watch'], done); 
 
}); 
 

 
$.gulp.task('run', function task(done) { 
 
    runSequence('serve', done); 
 
}); 
 

 
/*eslint-enable */

Answer 1

在您提供什麼，有沒有手錶任務或任務薩斯（雖然你這樣做，如果運行gulp（默認任務調用名爲watch任務）不給你一個錯誤，你必須定義名爲watch的任務）。

有兩個Sass插件用於吞嚥，一個使用Ruby Sass（gulp-ruby-sass），另一個使用LibSass（gulp-sass）。你可以read about the difference here，但總而言之，可能會緊固gulp-sass。找出最好的方法是先嚐試一個，然後再嘗試一個，然後比較一下gulp的控制檯日誌（它表示「在xms之後完成的任務」）。

下面是一個SASS示例，從gulp-sass自述文件中的示例中稍微編輯（假設gulp-sass位於您的package.json中，在這種情況下，它將通過您的gulp-load-插件調用）。 $.增補，以適應所提供的

$.gulp.task('sass', function() { 
    return gulp.src('yourstylespath/*.scss') // grab the .scss files 
    .pipe(sass().on('error', sass.logError)) // compile them into css, loggin any errors 
    .pipe(gulp.dest('yourcompiledcsspath')); // save them in yourcompiledcsspath 
}); 

$.gulp.task('sass:watch', function() { 
    gulp.watch('yourstylespath/*.scss', ['sass']); // "run the task 'sass' when there's a change to any .scss file in yourstylespath 
}); 

---

旁註代碼：

• 考慮您正在使用的不遵循「吞掉，軟件包名」命名方案的所有軟件包，這樣寫出來可能更有效率（當然取決於你使用多少包）

  var delete = require('del'), mergeStream = require('merge-stream'), ...;

• 看起來像你的run任務可能就是這樣嗎？ $.gulp.task('run', ['serve']);