Gulp Uhr funktioniert nicht mit importierten Dateien aber funktioniert mit Hauptdatei

Question

Also ich habe mein Build-Skript unten und alles funktioniert perfekt, außer dass, wenn ich eine Datei speichern, die nicht meine app.scss Datei ist, aber etwas, das in diese Datei importiert wird , die sass Aufgabe wird nicht ausgeführt. Also schaue ich mir meinen Schluck an, aber nicht alle Dateien, die ich vermute. Ich bin mir nicht sicher, wie ich das beheben kann. Ich dachte, ich habe angegeben, alle Dateien mit "/ * .scss" zu sehen.

Ich würde gerne etwas Hilfe zu diesem Thema.

Vielen Dank!

gulpfile.js

// Include gulp 
var gulp = require('gulp'); 

// Include Our Plugins 
var jshint = require('gulp-jshint'); 
var sass = require('gulp-sass'); 
var concat = require('gulp-concat'); 
var uglify = require('gulp-uglify'); 
var rename = require('gulp-rename'); 
var browserSync = require('browser-sync'); 

var reload = browserSync.reload; 

var sassOptions = { 
    errLogToConsole: true, 
    outputStyle: 'compressed', 
    includePaths: ['bower_components/foundation-sites/scss', 'bower_components/motion-ui/src'] 
}; 

// Set the proxy. 
gulp.task('browser-sync', function() { 
    browserSync({ 
     proxy: "localhost:8000/wozencraftinsurance.dev/" 
    }); 
}); 


// Lint Task 
gulp.task('lint', function() { 
    return gulp.src('js/*.js') 
     .pipe(jshint()) 
     .pipe(jshint.reporter('default')); 
}); 

// Compile Sass file to CSS, and reload browser(s). 
gulp.task('sass', function() { 
    return gulp.src('assets/scss/*.scss') 
     .pipe(sass(sassOptions)) 
     .pipe(gulp.dest('assets/css')) 
     .pipe(reload({stream:true})); 
}); 

// Reload browser(s) 
gulp.task('bs-reload', function() { 
    return gulp.src('./*.php') 
     .pipe(reload({stream:true})); 
}); 

// Concatenate & Minify JS 
gulp.task('scripts', function() { 
    return gulp.src('js/*.js') 
     .pipe(concat('all.js')) 
     .pipe(gulp.dest('assets/js')) 
     .pipe(rename('all.min.js')) 
     .pipe(uglify()) 
     .pipe(gulp.dest('assets/js')); 
}); 

// Watch Files For Changes 
gulp.task('watch', function() { 
    gulp.watch('assets/js/*.js', ['lint', 'scripts']); 
    gulp.watch('assets/scss/*.scss', ['sass']); 
}); 

// Default Task 
gulp.task('default', ['browser-sync', 'lint', 'sass', 'scripts', 'watch']); 

app.scss

@charset 'utf-8'; 

@import 'settings'; 
@import 'foundation'; 
@import 'motion-ui'; 

@include foundation-global-styles; 
@include foundation-grid; 
// @include foundation-flex-grid; 
@include foundation-typography; 
@include foundation-button; 
@include foundation-forms; 
// @include foundation-range-input; 
@include foundation-accordion; 
@include foundation-accordion-menu; 
@include foundation-badge; 
@include foundation-breadcrumbs; 
@include foundation-button-group; 
@include foundation-callout; 
@include foundation-close-button; 
@include foundation-menu; 
@include foundation-menu-icon; 
@include foundation-drilldown-menu; 
@include foundation-dropdown; 
@include foundation-dropdown-menu; 
@include foundation-flex-video; 
@include foundation-label; 
@include foundation-media-object; 
@include foundation-off-canvas; 
@include foundation-orbit; 
@include foundation-pagination; 
@include foundation-progress-bar; 
// @include foundation-progress-element; 
// @include foundation-meter-element; 
@include foundation-slider; 
@include foundation-sticky; 
@include foundation-reveal; 
@include foundation-switch; 
@include foundation-table; 
@include foundation-tabs; 
@include foundation-thumbnail; 
@include foundation-title-bar; 
@include foundation-tooltip; 
@include foundation-top-bar; 
@include foundation-visibility-classes; 
@include foundation-float-classes; 
// @include foundation-flex-classes; 

@include motion-ui-transitions; 
@include motion-ui-animations; 

// NOUVEAU mixins, including image-url() fix 
@import "nv-mixins"; 

// Load NOUVEAU compatibility styles 
@import "nv-wordpress"; 

// Color 
$brand-orange: #ff9900; 
$brand-hove-blue: #0066cc; 
$brand-blue: #181826; 
$brand-dark-blue: #1b1b25; 
$brand-dark-blue2: #181826; 
$brand-light-grey: rgba(206, 206, 208, 0.5); 
$brand-orange-rgba: rgba(255, 153, 0, 0.5); 
$brand-blue-rgba: rgba(0, 102, 204, 0.5); 

@import 'parts/general'; 
@import 'parts/header'; 
@import 'pages/home'; 
@import 'pages/insurance'; 
@import 'pages/news'; 
@import 'pages/why-us'; 
@import 'pages/contact'; 
@import 'parts/footer'; 

Dateistruktur http://puu.sh/nTIZ0/01f8065605.png

Command Line http://puu.sh/nZ6Os/ddac15849d.png

Answer 1

Sie sind für Veränderungen beobachten t o alle Dateien in assets/scss/, so Änderungen an assets/scss/app.scss werden von gulp.watch() abgeholt.

Sie jedoch nicht auf Änderungen in einem der Unterordner (wie assets/scss/pages). Also, wenn Sie eine SCSS-Datei dort ändern, wird es nicht von gulp.watch() abgeholt werden.

Sie müssen gulp.watch() sagen, wie auch durch Schreiben in Unterordnern suchen:

gulp.watch('assets/scss/**/*.scss', ['sass']); 

statt:

gulp.watch('assets/scss/*.scss', ['sass']); 

Answer 2

Dies ist nicht für mich arbeiten. Ich muss "grunt sass" ausführen, um die Sass-Dateien zu kompilieren. mein gulpfile ist wie folgt:

var gulp = require('gulp'); 
 
var sass = require('gulp-sass'); 
 
var sourcemaps = require('gulp-sourcemaps'); 
 
var notify = require("gulp-notify"); 
 

 
gulp.task('sass',function() { 
 

 
    // gulp.src locates the source files for the process. 
 
    // This globbing function tells gulp to use all files 
 
    // ending with .scss or .sass within the scss folder. 
 
    gulp.src('./sass/**/*.{scss,sass}') 
 
    // Converts Sass into CSS with Gulp Sass 
 
    // Outputs CSS files in the css folder 
 
    .pipe(sourcemaps.init()) 
 
    .pipe(sass({errLogToConsole: true})) 
 
    .pipe(sourcemaps.write()) 
 
    .pipe(gulp.dest('./stylesheets')); 
 
    
 
    
 
    }); 
 

 
gulp.task('default', function() { 
 
    // Watches the scss folder for all .scss and .sass files 
 
    // If any file changes, run the sass task 
 
    gulp.watch('./scss/**/*.{scss,sass}',['sass']); 
 

 
});