Question

我设置了gulp文件来监视更改。我正在使用Redux架构在ReactJS中开发应用程序。我注意到的是，gulp不会监视SCSS文件中的任何更改。

＆＃13;

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

＆＃13;

Answer 1

在您提供的内容中，没有监视任务或Sass任务（虽然您确实调用了名为watch的任务，因此如果运行gulp（默认任务）并非如此＃39; t给你一个错误，你必须在某处定义名为watch的任务。

有两个用于gulp的Sass插件，一个使用Ruby Sass（gulp-ruby-sass），另一个使用LibSass（gulp-sass）。你可以read about the difference here，但总之，gulp-sass可能是紧固的。找出答案的最好方法是尝试一个然后另一个并比较gulp的控制台日志（它表示＆＃34;在x ms和＃34之后完成任务;）。

这里是一个SASS观察的例子，从gulp-sass自述文件中的示例中略微编辑（假设gulp-sass在你的package.json中，在这种情况下它将由你的gulp导入 - load-plugins call）。添加了$.以匹配您提供的代码

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

附注：

考虑到您所使用的所有套餐，请不要遵循＆＃34; gulp-packagename＆＃34;命名方案，像这样单独编写它们可能更有效（当然取决于你使用了多少个包）

var delete = require('del'), mergeStream = require('merge-stream'), ...;
您的run任务可能就是这样吗？ $.gulp.task('run', ['serve']);

Gulp并不关注SCSS的任何变化。我必须使用gulp-ruby-sass吗？

1 个答案: