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

在您提供的内容中，没有 watch 任务或 Sass 任务（尽管您确实调用了名为 watch 的任务，因此如果运行 gulp（默认任务）没有给你一个错误，你必须在某处定义名为 watch 的任务）。

gulp有两个Sass插件，一个使用Ruby Sass（gulp-ruby-sass) and one using LibSass (gulp-sass). You can read about the difference here，简而言之gulp-sass 可能会更快。找出答案的最佳方法是尝试一个然后另一个并比较 gulp 的控制台日志（其中显示 "finished task after x ms"）。

这是一个 SASS 观看示例，根据 gulp-sass 自述文件中的示例稍作编辑（假设 gulp-sass在您的 package.json 中，在这种情况下，它将由您的 gulp-load-plugins 调用导入）。 $.已添加以匹配您提供的代码

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

旁注：

考虑到您使用的所有包都不遵循 "gulp-packagename" 命名方案，像这样单独写出来可能更有效（当然取决于您使用了多少包）

var delete = require('del'), mergeStream = require('merge-stream'), ...;
看起来你的 run 任务可能就是这个？ $.gulp.task('run', ['serve']);

Gulp 不监视任何 SCSS 更改。我必须使用 gulp-ruby-sass 吗？

Gulp doesnt watch for any SCSS changes. Do I have to use gulp-ruby-sass?

javascript

gulp

gulp-sass

gulp-watch