Question

我的文件树大致如下：

sites
 |
 +-- all
 |    |
 |    +-- css/
 |    +-- scss/
 |    \-- config.rb
 |
 +-- mysite.com
 |    |
 |    +-- css/
 |    +-- scss/
 |    \-- config.rb

这是我的gulpfile（简化）：

'use strict';

var gulp = require('gulp'),
    compass = require('gulp-compass');

gulp.task('compile-css', function() {
    return gulp
        .src("./sites/all/scss/*.scss")
        .pipe(compass({
            config_file: './sites/all/config.rb',
            sass: "./sites/all/scss"
        }))
        .pipe(gulp.dest("sites/all/css"));
});

gulp.task('default', ['watch']);

gulp.task('watch', function() {
    gulp.watch('./sites/wirefly.com/**/*.scss', ['compile-css']);
});

根据/all/scss/文件中的配置，目前适用于编译/all/css/目录中的所有scss文件并将它们转储到/all/config.rb目录中。

有没有办法让gulp在项目中监视所有scss文件并使用正确的config.rb文件进行输出？即/all/scss/中的文件将根据/all/config.rb设置进行编译，而/mysite.com/scss/将根据/mysite.com/config.rb设置进行编译。

或者可能只是完全摆脱config.rb文件并利用gulp将文件放到应该去的地方？

我可以为/mysite.com目录中的scss文件编写一个单独的任务，但如果引入更多的子目录，这个任务不够优雅或可扩展。

Answer 1

事实证明，我最终在"change"任务的watch事件中使用了回调，因此：

var relativePath;

gulp.task('main-compass', function() {
    return gulp
        .src(relativePath + '/*.scss')
        .pipe(compass({
            config_file: relativePath + "/../config.rb",
            sass: relativePath
        }));
});

gulp.task('default', ['watch']);

gulp.task('watch', function() {
    gulp.watch('./sites/**/*.scss').on('change', function(file) {
        var regexDir = /sites(.*)/g;
        var partialDir = file.path.match(regexDir);
        relativePath = path.dirname(partialDir);

        gulp.run('main-compass');
    });
});

因此，为relativePath变量分配了更改文件的相对路径，然后main-compass任务使用config.rb文件，该文件是更改后的sass文件中的一个目录。

可能有更好的方法可以做到这一点，但现在就完成了这项工作。

使用gulp

1 个答案: