Gulp Sass non compila parziali

Question

Quindi sto usando GulpSass con gulp-changed (ho anche provato gulp-newer con le modifiche di sintassi aggiornate) e guardando tutti i file scss nelle mie cartelle.

Quando cambio un file di base scss, esso verrà compilato senza problemi.

Tuttavia se cambio un partial non compilerà il file sass che ha una dipendenza da quel partial.

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

cartelle

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

di apportare modifiche al base.scss || anotherBase.scss modifiche apportate, di apportare modifiche al partial1.scss nulla.

Come si può vedere nel registro:

[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 

Vorrei che per compilare lo SCSS ogni volta che un parziale viene modificato.

Answer 1

Questo potrebbe avere più a che fare con il modo in cui stai includendo le parziali di qualsiasi altra cosa - hai il tuo @importato i parziali nel tuo file di base sass?

vale a dire, fa base.scss hanno

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

Da qualche parte in là?

EDIT

Ok Ho appena incontrato un problema simile, ho finito usando solo sorso-più recente + loop attraverso una serie di generare i compiti sorso. Così sembrava qualcosa di simile

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

Non proprio la cosa più flessibile del mondo (in particolare con le directory nidificate per l'URL di base), ma tipo di porta dove si vuole essere. gulp-cache inoltre ottiene quasi dove si vuole essere senza questo inganno, ma ha lo stesso problema won't-compile-partial.

Answer 2

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

Di default è in grado di rilevare se i file nel flusso solo cambiato.

Sto indovinando che probabilmente desidera che questo: https://github.com/floatdrop/gulp-watch

Answer 3

Io uso https://github.com/vigetlabs/gulp-starter come un modello con https://github.com/berstend/gulp-sass-inheritance

Funziona ma solo con 2 livelli di profondità

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

Un po ' in ritardo per lo spettacolo, ma se ti capisco bene; vuoi eseguire la tua build quando modifichi QUALSIASI file scss, che sia parziale o no, giusto? (ma non includendo i partial nella build stessa - dato che è gestito da sass @ import).

Io di solito uso questo approccio:

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

passo solo lo scss_source alla costruzione, ma entrambe le fonti per l'osservatore. In questo modo posso separare tutti i partial dal resto dei sorgenti scss, ma fare in modo che una modifica a uno dei file attivi una build. E non devo includere ancora un altro modulo per gestirlo.

Di solito mantengo i miei partial in directory separate (penso condiviso, e non mischiato con altri file scss).

Spero che questo abbia senso nel tuo caso, altrimenti mi scuso.

Answer 5

provare var SRC = './stylesheets/**/{*.scss,_*.scss}'; se i partial si trovano nella stessa cartella o sottocartella.