Gulp Sass nie kompiluje stron częściowych

Question

Używam GulpSass z gulp-changed (próbowałem też gulp-nowszy ze zaktualizowanymi zmianami w składni) i oglądam wszystkie pliki scss w moich folderach.

Po zmianie pliku bazy scss zostanie on skompilowany bez żadnych problemów.

Jednak jeśli zmienię częściową, to nie skompiluję pliku sass, który ma zależność od tego częściowego.

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

foldery

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

wprowadzeniem zmian base.scss || anotherBase.scss zmian, wprowadzania zmian do partial1.scss nic.

Jak widać w dzienniku:

[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 

chciałbym go skompilować SCSS gdy częściowy ulega zmianie.

Answer 1

To może mieć więcej wspólnego z tym, w jaki sposób włączasz cząstki niż cokolwiek innego - czy twój @ zaimportował cząstki do twojego podstawowego pliku sass?

czyli nie base.scss mieć

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

Gdzieś tam?

EDIT

Ok Właśnie wpadł na podobny problem, skończyło się tylko przy użyciu łyk-nowsze + zapętlenie za pośrednictwem tablicy do generowania zadania haustem. Tak to wyglądało mniej więcej tak

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

Niezupełnie najbardziej elastyczny rzeczą na świecie (zwłaszcza z zagnieżdżonych katalogów do podstawowego adresu URL), ale niby dostaje, gdzie chcesz być. Gulp-cached również prawie dostaje się tam, gdzie chcesz być bez tej sztuczki, ale ma ten sam problem z kompilacją niepełnych spraw.

Answer 2

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

Domyślnie jest to tylko w stanie wykryć, czy pliki w strumieniu zmianie.

Zgaduję, prawdopodobnie chcesz w ten sposób: https://github.com/floatdrop/gulp-watch

Answer 3

używam https://github.com/vigetlabs/gulp-starter jako szablon z https://github.com/berstend/gulp-sass-inheritance

To działa, ale tylko z 2 poziomów głębokiego

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

bitowym spóźniony na przedstawienie, ale jeśli dobrze cię zrozumiem; chcesz uruchomić kompilację po zmianie dowolnego pliku SCS, niezależnie od tego, czy jest to częściowe czy nie, prawda? (ale nie wliczając części w samą kompilację - tak jak jest to obsługiwane przez sass @import).

normalnie korzystać z tego podejścia:

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

mijam tylko scss_source do kompilacji, ale oba źródła do obserwatora. W ten sposób mogę oddzielić wszystkie części od reszty źródeł scss, ale zmiany któregokolwiek z plików wyzwalają kompilację. I nie muszę dołączać kolejnego modułu do obsługi tego.

Zazwyczaj przechowuję moje części w oddzielnych katalogach (myślę, że są one wspólne i nie są mieszane z innymi plikami scss).

Mam nadzieję, że to ma sens w twoim przypadku - w przeciwnym razie przepraszam.

Answer 5

spróbuj var SRC = './stylesheets/**/{*.scss,_*.scss}'; jeśli części leżą w tym samym folderze lub podfolderze.