将 Gulp-sass 过滤器写入不同的文件夹

Question

大家好， 我使用 Foundation Framework (6.8.1) 进行 TYPO3 网站的前端开发。 Foundation Asset 文件夹位于项目根目录中，在更改 SCSS 文件时，我想从那里将一些特殊的 CSS 渲染到元素的相应文件夹中。 移动本身有效 - 但当对 SCSS 进行更改时，这些文件不会在相应的文件夹中更新。 有人可以帮助我并告诉我如何更好/正确地构建我的“gulpfile.js”吗？

如果有人能给我正确的建议以实现更好的结构，我会非常高兴。

我已经扩展了标准的“gulpfile.js”，如下所示：

const gulp         = require('gulp');
const sass         = require('gulp-sass')(require('sass'));
const browserSync  = require('browser-sync').create();
const sourcemaps   = require('gulp-sourcemaps');

const includePaths = [
    'node_modules/foundation-sites/scss',
    'node_modules/motion-ui/src'
];

模板中存储的SCSS/CSS文件

function sassBuild() {
    return gulp.src(['scss/main.scss', 'scss/fonts.scss'])
        .pipe(sourcemaps.init())
        .pipe(sass({
            includePaths: includePaths,
            outputStyle: 'compressed'
        }).on('error', sass.logError))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('../../../packages/projekt/Resources/Public/Css'));
};

存储在多个扩展中的SCSS/CSS文件

function sassBuildSlider() {
    return gulp.src(['scss/slider.scss'])
        .pipe(sourcemaps.init())
        .pipe(sass({
            includePaths : includePaths,
            outputStyle  : 'compressed'
        }).on('error', sass.logError))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('../../../packages/erweiterungen/ContentBlocks/ContentElements/slider/Assets'));
};

...以及触发它的函数

function serve() {
    browserSync.init({server : "./"});
    gulp.watch("scss/*.scss", sassBuild, sassBuildAccordion, sassBuildSlider, sassBuildIconWidthHeadline);
    gulp.watch("*.html").on('change', browserSync.reload);
}

gulp.task('sass', sassBuild);
gulp.task('sass', sassBuildAccordion);
gulp.task('sass', sassBuildSlider);
gulp.task('sass', sassBuildIconWidthHeadline);
gulp.task('serve', gulp.series('sass', serve));
gulp.task('default', gulp.series('sass', serve));

Answer 1

1. 您将多个函数作为参数传递给

   gulp.watch()

   ，但它需要一个回调函数或一系列任务：

gulp.watch("scss/*.scss", gulp.series(sassBuild, sassBuildSlider, ...));

2. 您有多个名为

   sass

   的任务，这可能是一个错误，因为任务名称应该是唯一的。我认为你可以再次简化使用系列：

gulp.task('sass', gulp.series(sassBuild, sassBuildSlider, ...));

如果按指定顺序依次运行任务非常重要，请使用

gulp.series()

。如果顺序不重要，那么您可以使用

gulp.parallel()

同时执行任务。