Sass 如何使用自己的src和dist监视多个子目录

我当前的Gulp文件正确地将每个项目文件夹的src编译为dist。问题是，在我运行gulp watch之后，它实际上并没有观察新的变化

我的项目目录：

模板部件/块/{project name}/src/css/*.scss

模板零件/块/{project name}/src/js/*.js

模板部件/块/{project name}/dist/css/*.scss

模板零件/块/{project name}/dist/js/*.js

这是我目前的吞咽文件。 搜索“处理、lint和缩小Sass文件”以跳转到Scss任务

知道我做错了什么吗？到目前为止，我一直在遵循各种指南和Stackoverflow帖子。我好近啊

/**
 * Settings
 * Turn on/off build features
 */

var settings = {
    clean: true,
    scripts: false,
    polyfills: true,
    styles: true,
    svgs: false,
    images: false,
    copy: false,
    reload: false
};


/**
 * Paths to project folders
 */


var paths = {
    input: 'template-parts/blocks/**/src',
    output: 'template-parts/blocks/**/dist',
    scripts: {
        input: 'template-parts/blocks/**/*',
        polyfills: '.polyfill.js'
    },
    styles: {
        input: 'template-parts/blocks/**/scss/*.{scss,sass}',
        output: ''
    },
    svgs: {
        input: 'src/svg/*.svg',
        output: 'dist/svg/'
    },
    images: {
        input: 'src/images/*.{png,gif,jpg}',
        output: 'dist/images/'
    },
    copy: {
        input: 'src/copy/**/*',
        output: 'dist/'
    },
    reload: './dist/'
};


/**
 * Template for banner to add to file headers
 */

var banner = {
    full:
        '/*!\n' +
        ' * <%= package.name %> v<%= package.version %>\n' +
        ' * <%= package.description %>\n' +
        ' * (c) ' + new Date().getFullYear() + ' <%= package.author.name %>\n' +
        ' * <%= package.license %> License\n' +
        ' * <%= package.repository.url %>\n' +
        ' */\n\n',
    min:
        '/*!' +
        ' <%= package.name %> v<%= package.version %>' +
        ' | (c) ' + new Date().getFullYear() + ' <%= package.author.name %>' +
        ' | <%= package.license %> License' +
        ' | <%= package.repository.url %>' +
        ' */\n'
};


/**
 * Gulp Packages
 */

// General
var {gulp, src, dest, watch, series, parallel} = require('gulp');
var del = require('del');
var flatmap = require('gulp-flatmap');
var lazypipe = require('lazypipe');
var rename = require('gulp-rename');
var header = require('gulp-header');
var package = require('./package.json');

// Scripts
var jshint = require('gulp-jshint');
var stylish = require('jshint-stylish');
var concat = require('gulp-concat');
var uglify = require('gulp-terser');
var optimizejs = require('gulp-optimize-js');

// Styles
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var minify = require('gulp-cssnano');
var tailwindcss = require('tailwindcss');

// SVGs
var svgmin = require('gulp-svgmin');

// Images
var imagemin = require('gulp-imagemin');


// BrowserSync
var browserSync = require('browser-sync');


/**
 * Gulp Tasks
 */

// Remove pre-existing content from output folders
var cleanDist = function (done) {

    // Make sure this feature is activated before running
    if (!settings.clean) return done();

    // Clean the dist folder
    del.sync([
        paths.output
    ]);

    // Signal completion
    return done();

};

// Repeated JavaScript tasks
var jsTasks = lazypipe()
    .pipe(header, banner.full, {package: package})
    .pipe(optimizejs)
    .pipe(dest, paths.scripts.output)
    .pipe(rename, {suffix: '.min'})
    .pipe(uglify)
    .pipe(optimizejs)
    .pipe(header, banner.min, {package: package})
    .pipe(dest, paths.scripts.output);

// Lint, minify, and concatenate scripts
var buildScripts = function (done) {

    // Make sure this feature is activated before running
    if (!settings.scripts) return done();

    // Run tasks on script files
    src(paths.scripts.input)
        .pipe(flatmap(function(stream, file) {

            // If the file is a directory
            if (file.isDirectory()) {

                // Setup a suffix variable
                var suffix = '';

                // If separate polyfill files enabled
                if (settings.polyfills) {

                    // Update the suffix
                    suffix = '.polyfills';

                    // Grab files that aren't polyfills, concatenate them, and process them
                    src([file.path + '/*.js', '!' + file.path + '/*' + paths.scripts.polyfills])
                        .pipe(concat(file.relative + '.js'))
                        .pipe(jsTasks());

                }

                // Grab all files and concatenate them
                // If separate polyfills enabled, this will have .polyfills in the filename
                src(file.path + '/*.js')
                    .pipe(concat(file.relative + suffix + '.js'))
                    .pipe(jsTasks());

                return stream;

            }

            // Otherwise, process the file
            return stream.pipe(jsTasks());

        }));

    // Signal completion
    done();

};

// Lint scripts
var lintScripts = function (done) {

    // Make sure this feature is activated before running
    if (!settings.scripts) return done();

    // Lint scripts
    src(paths.scripts.input)
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'));

    // Signal completion
    done();

};

// Process, lint, and minify Sass files
var buildStyles = function (done) {

    // Make sure this feature is activated before running
    if (!settings.styles) return done();

    // Run tasks on all Sass files
    src(paths.styles.input, {base: "./"})
        .pipe(sass({
            outputStyle: 'expanded',
            sourceComments: true
        }))
        .pipe(prefix({
            AUTOPREFIXER: ['last 2 version', '> 0.25%'],
            cascade: true,
            remove: true
        }))
        .pipe(header(banner.full, { package : package }))
        .pipe(rename(function (path) {
            path.dirname += "/../../dist/css"
            }))
        .pipe(rename({suffix: '.min'}))
        .pipe(minify({
            discardComments: {
                removeAll: true
            }
        }))
        .pipe(header(banner.min, { package : package }))
        .pipe(dest("./"))

    // Signal completion
    done();

};

// Optimize SVG files
var buildSVGs = function (done) {

    // Make sure this feature is activated before running
    if (!settings.svgs) return done();

    // Optimize SVG files
    src(paths.svgs.input)
        .pipe(svgmin())
        .pipe(dest(paths.svgs.output));

    // Signal completion
    done();

};

// Optimize SVG files
var buildImages = function (done) {

    // Make sure this feature is activated before running
    if (!settings.images) return done();

    // Optimize SVG files
    src(paths.images.input)
        .pipe(imagemin())
        .pipe(dest(paths.images.output));

    // Signal completion
    done();

};

// Copy static files into output folder
var copyFiles = function (done) {

    // Make sure this feature is activated before running
    if (!settings.copy) return done();

    // Copy static files
    src(paths.copy.input)
        .pipe(dest(paths.copy.output));

    // Signal completion
    done();

};

// Watch for changes to the src directory
var startServer = function (done) {

    // Make sure this feature is activated before running
    if (!settings.reload) return done();

    // Initialize BrowserSync
    browserSync.init({
        server: {
            baseDir: paths.reload
        }
    });

    // Signal completion
    done();

};

// Reload the browser when files change
var reloadBrowser = function (done) {
    if (!settings.reload) return done();
    browserSync.reload();
    done();
};

// Watch for changes
var watchSource = function (done) {
    watch(paths.input, series(exports.default, reloadBrowser));
    done();
};


/**
 * Export Tasks
 */

// Default task
// gulp
exports.default = series(
    cleanDist,
    parallel(
        buildScripts,
        lintScripts,
        buildStyles,
        buildSVGs,
        buildImages,
        copyFiles
    )
);

// Watch and reload
// gulp watch
exports.watch = series(
    exports.default,
    startServer,
    watchSource
);

/**
*背景
*打开/关闭生成功能
*/
变量设置={
干净：是的，
脚本：false，
是的，
风格：对，
svgs：错，
图像：假，
副本：假，
重新加载：false
};
/**
*项目文件夹的路径
*/
变量路径={
输入：“模板零件/块/**/src”，
输出：“模板零件/块/**/dist”，
脚本：{
输入：“模板零件/块/***”，
polyfills:'.polyfill.js'
},
风格：{
输入：“模板部件/块/**/scss/*.{scss，sass}”，
输出：“”
},
高级副总裁：{
输入：“src/svg/*.svg”，
输出：“dist/svg/”
},
图像：{
输入：“src/images/*.{png，gif，jpg}”，
输出：“dist/images/”
},
副本：{
输入：“src/copy/***”，
输出：'dist/'
},
重新加载：'./dist/'
};
/**
*要添加到文件标题的横幅模板
*/
var横幅={
全部：
“/*！\n”+
“*v\n”+
“*\n”+
“*（c）”+新日期（）.getFullYear（）+”\n+
“*许可证\n”+
“*\n”+
“*/\n\n”，
最小值：
'/*!' +
“v”+
“|（c）”+新日期（）.getFullYear（）+”+
|执照"+
' | ' +
“*/\n”
};
/**
*狼吞虎咽
*/
//一般的
var{gulp，src，dest，watch，series，parallel}=require（'gulp'）；
var del=需要（'del'）；
var flatmap=require（'gulp-flatmap'）；
var lazypipe=require（'lazypipe'）；
var rename=require（'gulp-rename'）；
var收割台=需要（'gulp-header'）；
var package=require（'./package.json'）；
//剧本
var jshint=require（'gulp-jshint'）；
var style=require（'jshint-style'）；
var concat=需要（“咕噜咕噜咕噜”）；
var uglify=需要（'gulp-terser'）；
var optimizejs=require（'gulp-optimize-js'）；
//风格
var sass=需要（'gulp-sass'）；
var前缀=require（'gulp-autoprefixer'）；
var minify=需要（'gulp-cssnano'）；
var tailwindcss=require（'tailwindcss'）；
//SVG
var svgmin=require（'gulp-svgmin'）；
//图像
var-imagemin=require（'gulp-imagemin'）；
//浏览器同步
var browserSync=require（'browser-sync'）；
/**
*吞咽任务
*/
//从输出文件夹中删除预先存在的内容
var cleanDist=函数（完成）{
//确保在运行前激活此功能
如果（！settings.clean）返回done（）；
//清理dist文件夹
del.sync([
路径输出
]);
//信号完成
返回完成（）；
};
//重复的JavaScript任务
var jsTasks=lazypipe（）
.pipe（标题，banner.full，{package:package}）
.管道（JS）
.pipe（dest、path.scripts.output）
.pipe（重命名，{后缀：'.min'}）
.管道（丑陋）
.管道（JS）
.pipe（标题，banner.min，{package:package}）
.pipe（dest、path.scripts.output）；
//Lint、minify和concatenate脚本
var buildScripts=函数（完成）{
//确保在运行前激活此功能
如果（！settings.scripts）返回done（）；
//在脚本文件上运行任务
src（path.scripts.input）
.pipe（平面图（函数（流、文件）{
//如果文件是一个目录
if（file.isDirectory（））{
//设置后缀变量
var后缀=“”；
//如果启用了单独的多边形填充文件
if（设置.多边形填充）{
//更新后缀
后缀='.polyfills'；
//抓取非多边形填充的文件，将其连接并处理它们
src（[file.path+'/*.js'，'！'+file.path+'/*'+path.scripts.polyfills]）
.pipe（concat（file.relative+'.js'））
.pipe（jsTasks（））；
}
//抓取所有文件并连接它们
//如果启用了单独的polyfills，则文件名中将包含.polyfills
src（file.path+'/*.js'）
.pipe（concat（file.relative+后缀+'.js'））
.pipe（jsTasks（））；
回流；
}
//否则，请处理该文件
返回流.pipe（jsTasks（））；
}));
//信号完成
完成（）；
};
//Lint脚本
var lintScripts=函数（完成）{
//确保在运行前激活此功能
如果（！settings.scripts）返回done（）；
//Lint脚本
src（path.scripts.input）
.pipe（jshint（））
.pipe（jshint.reporter（“jshint-style”）；
//信号完成
完成（）；
};
//处理、lint和缩小Sass文件
var buildStyles=函数（完成）{
//确保在运行前激活此功能
如果（！settings.styles）返回done（）；
//在所有Sass文件上运行任务
src（path.styles.input，{base:./“}）
.管道（sass）({
outputStyle:“已扩展”，
sourceComments：对
}))
.管道（前缀({
AUTOPREFIXER:['last 2 version'，'>0.25%'，]，
答：是的，
删除：true
}))
.pipe（标题（banner.full，{package:package}））
.pipe（重命名（函数（路径））{
path.dirname+=“/../../dist/css”
}))
.
var paths = {
    input: 'template-parts/blocks/**/src'

var paths = {
    input: 'template-parts/blocks/**/src/**'