Gulp watch 不能处理导入的文件，但可以处理主文件

Question

所以我在下面有我的构建脚本并且一切正常，除了如果我保存的文件不是我的 app.scss 文件而是导入到该文件中的文件，sass 任务没有运行。所以我的 gulp 构建正在监视但不是我猜的所有文件。不知道如何解决这个问题。我以为我指定使用“/*.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() 也查看子文件夹，方法是：

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

而不是：

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

Gulp watch 不能处理导入的文件，但可以处理主文件

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

gulp

gulp-sass

gulp-watch