Gulp Sass没有编译部分内容

Question

所以我用Gulp Sass用gulp-changed(我也试过一饮而尽,新与更新的语法变化),看所有的scss在我的文件夹中的文件.

当我更改基本scss文件时,它将编译没有任何问题.

但是,如果我更改部分,它将不会编译具有该部分依赖性的sass文件.

吞

var SRC = './stylesheets/**/*.scss';
var DEST = './stylesheets';
gulp.task('sass', function() {
  return gulp.src(SRC)
    .pipe(changed(DEST, { extension: '.css' }))
    .pipe(plumber({
        errorHandler: handleErrors
    }))
    .pipe(sourcemaps.init())
    .pipe(sass({
            includePaths: [
                'C:/var/www/mobile 2/stylesheets'
    ]}))
    .pipe(sourcemaps.write('./'))
    .on('error', handleErrors)
    .pipe(gulp.dest(DEST))
});

文件夹

??? scss
?    ??? base.scss
?          ??? _partial1.scss
?          ??? _partial2.scss
?          ??? anotherBase.scss
?                 ??? _anotherBasePartial1.scss
?                 ??? _anotherBasePartial2.scss

对base.scss || anotherBase.scss所做的更改进行更改,partial1.scss不做任何更改.

正如您在日志中看到的:

[15:14:02] Starting 'sass'... //here i changed _partial1.scss
[15:14:03] Finished 'sass' after 248 ms
[15:18:20] Starting 'sass'...
[15:18:20] Finished 'sass' after 289 ms
[BS] File changed: c:\var\www\mobile 2\stylesheets\sitescss\responsive\tools\base.css
[15:18:24] Starting 'sass'...
[15:18:24] Finished 'sass' after 289 ms
[BS] File changed: c:\var\www\mobile 2\stylesheets\sitescss\responsive\tools\anotherBase.css

我希望每当部分更改时编译scss.

Answer 1

演出有点晚,但如果我理解你的话; 你想在更改任何scss文件时运行你的构建,无论是否是部分,对吧？(但不包括构建本身的部分 - 因为它由sass @import处理).

我通常使用这种方法:

var scss_source = [ 'path/to/scss' ],
    partials_source = [ 'path/to/partials' ];

gulp.task('scss', function () {
    gulp.src( scss_source )
    ...
});

var scss_watcher = gulp.watch([ scss_source, partials_source ], [ 'scss' ]);

我只将scss_source传递给构建版,但是两个源代码都发送给了观察者.这样我可以从其他scss源中分离所有部分,但是对任何触发构建的文件都进行了更改.而且我不必包含另一个处理此问题的模块.

我通常将我的部分保存在不同的目录中(想想共享,而不是与其他scss文件混合).

希望这对你的情况有意义 - 否则我会道歉.

Answer 2

这可能与您如何包含部分内容有关，而不是其他任何事情 - 您是否将部分内容 @imported 到您的基本 sass 文件中？

即，base.scss 是否有

@import 'partial1';
@import 'partial2';

那里某个地方？

编辑

好吧，我刚刚遇到了类似的问题，我最终只是使用 gulp-newer + 循环数组来生成 gulp 任务。所以它看起来像

var sassMain = ['base', 'anotherBase'];
sassMain.forEach(current, function() {
    var src = current + '.scss';        

    return gulp.src(src)
      .pipe(newer(destination)
      .pipe(plumber())
      .pipe(sass())
      .pipe(gulp.dest(destination))
});

这并不是世界上最灵活的东西（特别是对于基本 url 的嵌套目录），但可以到达您想要的位置。gulp-cached 也几乎可以在没有这种欺骗的情况下达到你想要的效果，但也有同样的不会编译部分问题。