Sass 大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大

因此，我正在使用

Gulp

Sass

和

Gulp-changed

（我还尝试了Gulp-newer和更新的语法更改），并查看文件夹中的所有

scs

文件

当我更改一个基本的

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

---

我希望它在更改部分时编译SCS。

这可能与如何包含部分有关，而不是其他任何内容-是否已将@imported the partials导入基本sass文件

i、 例如，base.scs是否有

@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也几乎达到了您想要达到的目的，而没有这个技巧，但是有相同的不可编译部分问题

默认情况下，它只能检测流中的文件是否存在 变了

我猜你可能想要这个：

我用它作为模板

它可以工作，但仅适用于2个级别的深度

var gulp            = require('gulp');
var debug           = require('gulp-debug');
var browserSync     = require('browser-sync');
var sass            = require('gulp-sass');
var sourcemaps      = require('gulp-sourcemaps');
var handleErrors    = require('../lib/handleErrors');
var autoprefixer    = require('gulp-autoprefixer');
var path            = require('path');
var cached          = require('gulp-cached');
var sassInheritance = require('gulp-sass-inheritance');
var gulpif          = require('gulp-if');
var filter          = require('gulp-filter');
var duration        = require('gulp-duration');
var notify          = require('gulp-notify');

var paths = {
    src : 'app/styles',
    dest: 'grails-app/assets'
}


var isPartial = function (file) {
    return /_/.test(file.relative);
}

//set global.isWatching = true on gulp watch

gulp.task('css', function () {
    return gulp.src(paths.src)
        //.pipe(debug({title: 'before cache:'}))
        .pipe(gulpif(global.isWatching, cached('sass')))
        //.pipe(gulpif(global.isWatching, debug({title: 'after cache:'})))
        .pipe(gulpif(isPartial, sassInheritance({dir: path.join(config.root.src, config.tasks.css.src), debug: false}).on('error', handleErrors))) //,
        .pipe(debug({title: 'after sassInheritance:'}))         
        //.pipe(debug({title: 'after filter:'}))
        .pipe(sourcemaps.init())
        .pipe(sass()).on('error', handleErrors)
        .pipe(debug({title: 'after sass:'}))
        //.pipe(notify('Sass compiled <%= file.relative %>'))
        .pipe(autoprefixer(config.tasks.css.autoprefixer))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.dest))
        //.pipe(duration('after sass'))
        .pipe(debug({title: 'before browserSync:'}))
        .pipe(browserSync.reload({stream: true}))
})

var gulp=require（'gulp'）；
var debug=require（'gulp-debug'）；
var browserSync=require（'browser-sync'）；
var sass=需要（'gulp-sass'）；
var sourcemaps=require（'gulp-sourcemaps'）；
var handleErrors=require（'../lib/handleErrors'）；
var autoprefixer=require（'gulp-autoprefixer'）；
var path=require（'path'）；
var cached=require（'gulp-cached'）；
var sassInheritance=require（'gulp-sass-heritance'）；
var gulpif=需要（'gulp-if'）；
var过滤器=需要（'gulp-filter'）；
var持续时间=需要（“吞咽持续时间”）；
var notify=需要（'gulp-notify'）；
变量路径={
src:“应用程序/样式”，
目标：“grails应用程序/资产”
}
var isPartial=函数（文件）{
return/\/.test（file.relative）；
}
//在gulp watch上设置global.isWatching=true
吞咽任务（'css'，函数（）{
return gulp.src（path.src）
//.pipe（调试（{title:'缓存之前：'}））
.pipe（gulpif（global.isWatching，cached（'sass'））
//.pipe（gulpif（global.isWatching，debug（{title:'after cache:'}）））
.pipe（gulpif（isPartial，sassInheritance（{dir:path.join（config.root.src，config.tasks.css.src），debug:false}）.on（'error'，handleErrors））/，
.pipe（调试（{title:'after sassInheritance:'}））
//.pipe（调试（{title:'after filter:'}））
.pipe（sourcemaps.init（））
.pipe（sass（））.on（'error'，handleErrors）
.pipe（调试（{title:'after sass:'}））
//.pipe（通知（'Sass compiled'））
.pipe（autoprefixer（config.tasks.css.autoprefixer））
.pipe（sourcemaps.write（））
.管道（吞咽目标（路径目标））
//.管道（持续时间（“sass之后”）
.pipe（调试（{title:'before browserSync:'}））
.pipe（browserSync.reload（{stream:true}））
})

演出有点晚了，但如果我没听错的话；您希望在更改任何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_源传递给构建，但将两个源传递给观察者。这样我就可以将所有部分从其余的scss源代码中分离出来，但对任何文件的更改都会触发构建。我不需要再包含另一个模块来处理这个问题

我通常将我的分区保存在单独的目录中（认为是共享的，而不是与其他scss文件混合）

希望这对你来说有意义，否则我真的道歉。

试试看

var SRC='./stylesheets/**/{*.scss，*.scss}'
如果部分内容位于同一文件夹或子文件夹中。
这是一个很好的问题。我曾经面对过这个问题，并在很长一段时间后摆脱了它。因为当时我在网上找不到这样的东西来摆脱它


无礼


摘要

_base.scss

基地
组成部分
布局
页数
主题
卖主

main.scss


main.scss
@导入“sass/abstracts/base”很遗憾，我已经包含了导入内容。但是谢谢你的想法：）啊，我明白了——一个关于吞咽的问题改变了；看起来gulp changed不是这个（）的合适插件。你可以研究一下gulp newer来做同样的概念。是的，我确实尝试过更新的，但这并没有让我烦恼。有趣的想法，我有太多的基础文件来做这件事。我可能需要查看node中的乙烯基东西，看看它能把我带到哪里。它检测到任何文件夹中任何*scss文件中的任何更改。问题是更改了分区基础文件，并因此构建了它们。哈哈，该死，浪费了50个副本。。。我应该做得更多：（你有没有想过？我正在尝试用我的gulpfile做同样的事情。事实上，看起来gulp更新版正在使用它！需要更多的测试才能确定，但据我所知，它可以很好地用于导入。简短而甜蜜。谢谢+1:）