Question

我有一个gulp watch任务，使用gulp-sass将SASS转换为CSS。对于开发，我想要的是单独的CSS文件。

要发布，我有min个任务，使用gulp-cssmin和concat来捆绑和缩小CSS。但是，min任务不会处理SASS文件。它假定它们已经转换为CSS。

这是一个有效的假设吗？如果自动构建获取最新源（没有.scss文件）并运行min怎么办？这里有关于监视任务是否会及时运行min来获取SASS文件的竞争条件吗？

Answer 1

如果您的platform :ios, '7.0' target 'Groupiq' do pod "MWPhotoBrowser" end target 'GroupiqTests' do end任务也在观看SASS文件，那么您的假设不一定有效。默认情况下，所有任务将同时运行。但是，您可以在任务中定义依赖项，以便在另一个任务完成之前不会启动任务。这可以解决您的问题。可以找到有关依赖关系的文档here。

还有另外两种解决方案：

观看min任务的CSS文件。
在编译SASS的任务结束时运行min任务中的逻辑。

Answer 2

爱德华！最好使用可选缩小功能来防止从磁盘上额外读取。

var env = require('minimist')(process.argv.slice(2));
var noop = require('readable-stream/passthrough').bind(null, { objectMode: true });
gulp.task('style', function () {
  return gulp.src('...')
    .pipe(process())
    .pipe(env.min ? uglify() : noop())
    .pipe(gulp.dest('...'))
});

此外，我不建议使用gulp-util中的这些工具，这些工具将被弃用

Answer 3

即使gulp保证在启动相关任务之前它会等待监视任务完成，但在从更改源文件到操作系统通知gulp之间的间隔期间仍可能发生争用。所以我决定不使用SASS→CSS变换输出。因为我不需要构建最小化版本，因此节省这些毫秒没有任何回报。

相反，我使用stream-combiner2来重用转换逻辑：

var combiner = require('stream-combiner2');

function scssTransform() {
    return combiner(
        sourcemaps.init(),
        sass(),
        sourcemaps.write());
}

我使用转换为我的非模仿＆＃34;沙盒＆＃34;本地发展：

gulp.task('sandbox:css', function () {
    return gulp.src(paths.scss)
        .pipe(scssTransform())
        .pipe(gulp.dest(dirs.styles));
});

我在本地提供网站的任务取决于并观察任务：

gulp.task('serve.sandbox', ['sandbox:css' /* ... more ... */], function () {
    // ... Start the web server ...
    gulp.watch(paths.scss, ['sandbox:css']);
    // ... Watch more stuff ...
});

我还将转换用于最小化部署：

gulp.task('deploy:css', function () {
    return gulp.src(paths.scss)
        .pipe(scssTransform())
        .pipe(concat(files.cssMin))
        .pipe(cssmin())
        .pipe(gulp.dest(dirs.deploy));
});

有了gulp，观察任务是否可以保证在其他任务之前运行？

3 个答案: