Gulpウォッチはインポートされたファイルでは機能しませんがメインファイルで動作します

Question

私は以下のビルドスクリプトを用意していますが、app.scssファイルではなくそのファイルにインポートされるファイルsassタスクは実行されません。だから、私のうんざりのビルドは、私が推測するすべてのファイルを見ているわけではありません。これを修正する方法がわかりません。私は "/*.scss"を使ってすべてのファイルを見るように指定したと思った。

私はこれについていくつかの助けが好きです。

ありがとうございました！

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

ファイル構造 http://puu.sh/nTIZ0/01f8065605.png

コマンドライン あなたは変化を監視していますhttp://puu.sh/nZ6Os/ddac15849d.png

Answer 1

トンすべてのファイルがassets/scss/にあるため、assets/scss/app.scssへの変更はgulp.watch()で取得されます。

しかし、あなたはサブフォルダ（assets/scss/pagesなど）の変更を監視していません。したがって、SCSSファイルを変更すると、はではなく、gulp.watch()で取得されます。

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

の代わりに：：これは私のために働いていない

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

Answer 2

あなたが書面により同様サブフォルダに見てgulp.watch()を指示する必要があります。私はsassファイルをコンパイルするために "grunt sass"を実行する必要があります。次のように私のgulpfileは次のとおりです。

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

 
});