Gulp Sass nicht partials Kompilieren

Question

Also ich benutze GulpSass mit gulp-changed (ich habe auch versucht, schluck-neuere mit den aktualisierten Syntaxänderungen) und beobachten die alle scss Dateien in meinem Ordner.

Wenn ich eine Basis scss Datei ändern, kompiliert es ohne Probleme.

Wenn ich jedoch eine partielle ändern, kompiliert es nicht die Sass-Datei, die eine Abhängigkeit von diesem Teil hat.

Gulp

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

Folders

├── scss 
│ └── base.scss 
│   ├── _partial1.scss 
│   └── _partial2.scss 
│   └── anotherBase.scss 
│     ├── _anotherBasePartial1.scss 
│     └── _anotherBasePartial2.scss 

Änderungen an base.scss || anotherBase.scss Änderungen vorgenommen haben, Änderungen an partial1.scss nichts machen.

Wie Sie im Protokoll sehen:

[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 

Ich möchte es die SCSS kompilieren, wenn eine teilweise geändert wird.

Answer 1

Dies könnte mehr damit zu tun haben, wie Sie die Partials als alles andere einschließen - haben Sie @ die Teiltöne in Ihre Basis Sass-Datei importiert?

das heißt nicht base.scss haben

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

Irgendwo da drin?

EDIT

Okay, ich lief nur in ein ähnliches Problem, ich am Ende nur mit großem Schluck-neuere + durch ein Array Looping der schluck Aufgaben zu generieren. So sah es so etwas wie

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

Nicht wirklich die flexibelste Sache der Welt (vor allem mit verschachtelten Verzeichnissen für die Basis-URL), aber irgendwie bekommt, wo Sie sein möchten. gulp-cached kommt auch ohne diese Tricks fast an die Stelle, an der man sein möchte, hat aber das gleiche Problem, das nicht bei der Kompilierung auftritt.

Answer 2

https://www.npmjs.com/package/gulp-changed

standardmäßig, ob Dateien im Stream zu erkennen, es ist nur in der Lage verändert.

Ich vermute, Sie wahrscheinlich diese wollen: https://github.com/floatdrop/gulp-watch

Answer 3

Ich benutze https://github.com/vigetlabs/gulp-starter als Vorlage mit https://github.com/berstend/gulp-sass-inheritance

Es funktioniert aber nur mit 2 Ebenen tiefer

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})) 
}) 

Answer 4

Ein bisschen zu spät für die Show, aber wenn ich dich richtig verstehe; du willst deinen Build ausführen, wenn du irgendeine scss-Datei änderst, egal ob das ein Teil ist oder nicht, oder? (ohne die Teiltöne im Build selbst - so wird das von sass @ import gehandhabt).

Ich benutze normalerweise diesen Ansatz:

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' ]); 

ich nur die scss_source zum Build passieren, aber beide Quellen an den Beobachter. Auf diese Weise kann ich alle Partials von den anderen Scss-Quellen trennen, aber Änderungen an allen Dateien lösen einen Build aus. Und ich muss nicht noch ein weiteres Modul für den Umgang damit einbeziehen.

Normalerweise halte ich meine Partials in separaten Verzeichnissen (denke geteilt, und nicht mit anderen scss-Dateien gemischt).

Hoffe das macht in Ihrem Fall Sinn - sonst entschuldige ich mich.

Answer 5

versuchen wenn Teiltabellen im selben Ordner oder Unterordner liegen.