CODEWITHSUNDEEP
sassgulpzurb-foundation
m.orange
m.orange

Reputation: 9

write Gulp-sass filtes to different folders

hello to everyone, I use the Foundation Framework (6.8.1) for the frontend development of TYPO3 websites. The Foundation Asset folder is in the project root, from there I would like to render some special CSS into the respective folders of the element when making changes to the SCSS file. The move itself works - but when changes are made to the SCSS, these files are not updated in the respective folder. Can someone help me and tell me how to structure my "gulpfile.js" better / correctly?

I would be very happy if someone can give me the right tips for a better structuring.

I have extended the standard "gulpfile.js" like this:

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

The SCSS/CSS files that are stored in the template

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 files that are stored in multiple extensions

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

... and the functions that trigger it

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

Upvotes: 0

Views: 50

Answers (1)

Invulner
Invulner

Reputation: 2053

  1. You're passing multiple functions as arguments to gulp.watch(), but it expects a single callback function or a series of tasks:
gulp.watch("scss/*.scss", gulp.series(sassBuild, sassBuildSlider, ...));
  1. You have multiple tasks named sass, which is likely a mistake since task names should be unique. I think you can simplify using series again:
gulp.task('sass', gulp.series(sassBuild, sassBuildSlider, ...));

If it's important to run tasks one after another in a specified order, then use gulp.series(). If the order is not important, then you can execute tasks simultaneously using gulp.parallel().

Upvotes: 0

Related Questions