A
A
Alexey2016-02-07 11:35:20
Sass
Alexey, 2016-02-07 11:35:20

How to compile multiple *.scss files to GULP?

Can you tell me how to compile multiple scss files into their own subdirectories in Gulp?
There is this config file:

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('first-scss-custom', function () {
  return gulp.src('./styles/a/first/*.scss')
    // .pipe(sass.sync().on('error', sass.logError))
    .pipe(sass())
    .pipe(gulp.dest('./styles/a/first/'));
});

gulp.task('second-scss-custom', function () {
  return gulp.src('./styles/a/second/*.scss')
    // .pipe(sass.sync().on('error', sass.logError))
    .pipe(sass())
    .pipe(gulp.dest('./styles/a/second/'));
});

gulp.task('third-scss-custom', function () {
  return gulp.src('./styles/a/third/*.scss')
    // .pipe(sass.sync().on('error', sass.logError))
    .pipe(sass())
    .pipe(gulp.dest('./styles/a/third/'));
});

gulp.task('watch', function() {
  gulp.watch('./styles/a/first/custom.scss',
        './styles/a/second/custom.scss',
        './styles/a/third/custom.scss',gulp.parallel('first-scss-custom', 'second-scss-custom', 'third-scss-custom'));
});

There are many errors, including:
TypeError: undefined is not a function at Gulp. (C:\...\gulpfile.js:30:41)
Line 30 - "'./styles/a/third/custom.scss',gulp.parallel('first-scss-custom', 'second-scss -custom', 'third-scss-custom'));"

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
abberati, 2016-03-29
@abberati

The error says that the function is gulp.parallel()not defined. check which version of gulp you are using, this thing is only in [email protected], which is still in the alpha stage.
but in general - a very strange decision, to monitor _all_ folders and run a parallel assembly of _all_ folders with each change. create a watch for each folder, each of which will watch the folder and compile it.
UPD: watch should not watch a single file custom.scss, but all files in a folder

gulp.task('watch', function() {
  gulp.watch('./styles/a/first/**/*.scss', ['first-scss-custom']);
  gulp.watch('./styles/a/second/**/*scss', ['second-scss-custom']);
  gulp.watch('./styles/a/third/**/*.scss', ['third-scss-custom']);
});

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question