gulp compile multiple css from multiple sass folders with single command?

Question

I have the following files structure:

themes
  folder1
    -scss
      -style.scss
  folder2
    -scss
      -style.scss
  foldern
    -scss
      -style.scss

  package.json
  gulpfile.js

Need Output in this format:

themes
  folder1
    -scss
      -style.scss
    css
      -style.css
  folder2
    -scss
      -style.scss
    css
      -style.css
  foldern
    -scss
      -style.scss
    css
      -style.css

  package.json
  gulpfile.js

gulpfile.js:

(function () {
  'use strict';

var gulp = require('gulp'),
    eslint = require('gulp-eslint'),
  sass = require('gulp-sass'),
  sourcemaps = require('gulp-sourcemaps')

  gulp.task('sass', function () {
    return gulp
      .src('./**/scss/**/*.scss')
      .pipe(sourcemaps.init())
      .pipe(sass({
        outputStyle: 'uncompressed'
      }).on('error', sass.logError))
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('./**/css'));
  });

  gulp.task('watch', gulp.series('sass', function () {
    gulp.watch('./scss/**/*.scss', gulp.series('sass'));
  }));

})();

When I compiled using above gulpfile then it's creating **/css/folder1/stle.css **/css/folder2/style.css folders in the theme directory. how can I compile in this format? Is there any specific plugin there in gulp for this. Thanks in advance.

Mark · Accepted Answer · 2019-03-05 05:07:46Z

1

Try this:

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  // etc.

  // two more plugins
  rename = require('gulp-rename')
  path = require('path');


  gulp.task('sass', function () {
    return gulp
      .src('./**/scss/**/*.scss')
      .pipe(sourcemaps.init())
      .pipe(sass({
        outputStyle: 'uncompressed'
      }).on('error', sass.logError))
      .pipe(sourcemaps.write('./'))

       // rename the current file's parent directory

      .pipe(rename(function (file) {

        // file.dirname = current folder, your "scss"
        // then get the parent of the current folder, e.g., "folder1", "folder2", etc.
        let parentFolder = path.dirname(file.dirname)

        // set each file's folder to "folder1/css", "folder2/css", etc.
        file.dirname = path.join(parentFolder, 'css');
      }))

      .pipe(gulp.dest('.'));
  });

edited Mar 5, 2019 at 5:07

answered Mar 5, 2019 at 4:55

Mark

191k32 gold badges556 silver badges579 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mukeysh Over a year ago

This is also creating CSS folder in scss folder.

Mark Over a year ago

It is not doing that for me. Did you have a stray file around from prior testing? Try starting from a clean folder and file structure as you presented in your question.

Mukeysh Over a year ago

my srtucture is: scss->base->base.scss, scss->global->global.scss

Collectives™ on Stack Overflow

gulp compile multiple css from multiple sass folders with single command?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related