Gulp passt nicht auf SCSS-Änderungen. Muss ich Schluck-Rubin-Sass verwenden?

Question

Ich habe Schluck-Datei eingerichtet, um nach Änderungen zu sehen. Ich entwickle eine Anwendung in ReactJS mit Redux-Architektur. Was ich bemerkt habe, ist, dass der Schluck nicht auf Änderungen in den SCSS-Dateien achtet.

/*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

In dem, was Sie zur Verfügung gestellt haben, gibt es keine Uhr oder Aufgabe Sass Aufgabe (obwohl Sie eine Aufgabe watch so genannt, telefonieren, wenn laufen gulp (die Standardaufgabe) wird Ihnen nicht geben ein Fehler Sie müssen die Aufgabe watch irgendwo definiert haben).

Es gibt zwei Sass Plugins für den Schluck, einen mit Ruby Sass (gulp-ruby-sass) und einen mit LibSass (gulp-sass). Sie können read about the difference here, aber in Kürze Schluck-Hass wird wahrscheinlich schnell sein. Der beste Weg, dies herauszufinden, ist es, einen und den anderen zu probieren und die Konsolenprotokolle von gulp zu vergleichen (dort steht "Task nach x ms beendet").

Hier ist ein Beispiel für die SASS-Überwachung, das sehr leicht vom Beispiel in der gulp-sass readme (geht davon aus, dass gulp-sass in Ihrem package.json ist, in diesem Fall wurde es von Ihrem Schluck-Laden- importiert worden sein) Plugins aufrufen). $. s hinzugefügt, um den Code, den Sie

$.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 
}); 

---

Randnotizen versehen zum Spiel:

• alle Pakete Erwägen Sie, dass du mit dem „schlucke-Paket“ Namensschema nicht folgen Es könnte effizienter sein, sie einfach so aufzuschreiben (hängt natürlich davon ab, wie viele Pakete Sie verwenden)

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

• Sieht aus wie Ihre run Aufgabe könnte nur dies sein? $.gulp.task('run', ['serve']);