Gulp watch not working with imported files but works with main file

Question

So I have my build script below and everything is working perfectly except that if I save a file that is not my app.scss file but something that is imported into that file, the sass task does not run. So my gulp build is watching but not all the files I guess. Not sure how to fix this. I thought I specified to watch all the files by using "/*.scss"

I would love some help on this.

Thank you!

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

File Structure http://puu.sh/nTIZ0/01f8065605.png

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

Answer 1

You're watching for changes to all files in assets/scss/, so changes to assets/scss/app.scss will be picked up by gulp.watch().

However you're not watching for changes in any of the sub folders (like assets/scss/pages). So if you modify an SCSS file there, it will not be picked up by gulp.watch().

You need to tell gulp.watch() to look in sub folders as well by writing:

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

instead of:

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