How simplify Gulp task for hard folders structure?

Question

I working with gulp-sass, gulp-sourcemaps, browsersync and i have project with hard folder structure for sass stylesheets. Now task looks like this:

gulp.task('sass', function () {
  // bootstrap compilation
    gulp.src('./sass/bootstrap.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '/sass'}))
  .pipe(gulp.dest('./assets/global/plugins/bootstrap/css/'))

  // global theme stylesheet compilation
    gulp.src('./sass/global/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '/sass/global'}))
  .pipe(gulp.dest('./assets/global/css'))

  gulp.src('./sass/apps/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '/sass/apps'}))
  .pipe(gulp.dest('./assets/apps/css'))

  gulp.src('./sass/pages/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '/sass/pages'}))
  .pipe(gulp.dest('./assets/pages/css'))

  // theme layouts compilation
  gulp.src('./sass/layouts/layout4/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '/sass/layouts/layout4'}))
  .pipe(gulp.dest('./assets/layouts/layout4/css'))

  gulp.src('./sass/layouts/layout4/themes/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '/sass/layouts/layout4/themes'}))
  .pipe(gulp.dest('./assets/layouts/layout4/css/themes'))
});

But i think this task may be simpler. Thank you.

Ferdinand Prantl · Answer 1 · 2016-02-27T12:24:17.690

You should be able to shorten the code and improve its maintainability by defining every *.scss processing step just once.

Your source directories with the *.scss files follow the same pattern, except for the first and last ones:

source files:     './sass/{path}/*.scss'
source maps root: '/sass/{path}'
destination root: './assets/{path}/css'

Where the {path} is the source path core - "global", "layouts/layout4" etc. How about storing the the path cores in an array and process the array by a local function?

For example, let us use an array of objects, where the src key is the source path core and the optional dest key can override the default destination root pattern:

var merge = require('merge-stream');

gulp.task('sass', function () {
  // src: './sass/{src}/*.scss', sourceRoot: '/sass/{src}'
  // dest: './assets/{dest}', default './assets/{src}/css'
  var stylesheets = [
        {src: '', dest: '/global/plugins/bootstrap/css'},
        {src: '/global'},
        {src: '/apps'},
        {src: '/pages'},
        {src: '/layouts/layout4'},
        {src: '/layouts/layout4/themes', dest: '/layouts/layout4/css/themes'}
      ],
      streams = stylesheets.map(function (stylesheet) {
        var src = stylesheet.src,
            dest = stylesheet.dest || src + '/css';
        return gulp.src('./sass' + src + '/*.scss')
          .pipe(sourcemaps.init())
          .pipe(sass().on('error', sass.logError))
          .pipe(sourcemaps.write('.', {
            includeContent: true,
            sourceRoot: '/sass' + src
          }))
          .pipe(gulp.dest('./assets' + dest + '/'));
      });
  return merge.apply(this, streams);
});

Other improvements: If you do not want an error in an *.scss file to crash the gulp task chain, you should listen to the "error" event of the gulp-sass plugin. If you want to make the gulp task chainable, you should return the result of the last pipe() call from it.

Integrating tasks like gulp-livereload, gulp-minify-css or gulp-autoprefixer would be just a matter of adding the appropriate pipe() call to the chain and all files will be affected.

UPDATE: Fix returning one stream processing all files from the task by using the merge-stream module. The sequence of .pipe() calls cannot continue by another .src() starting chain. Single stylesheets will not be produced in a sequence, but the caller will be able to wait for all of them being produced.

This is exactly what I am looking for Ferdinand but I get this error when running gulp. "gulp.src is not a function" - what am I missing? gulp 3.9.0, gulp-sass 2.2.0, gulp-sourcemaps 1.6.0 — wind_kind, Feb 25 '16 at 13:24
You're right, @wind_kind. I made a mistake in the original post when concatenating all streams coming from the sub-tasks. I edited the post to fix it. Thanks! — Ferdinand Prantl, Feb 27 '16 at 12:22

How simplify Gulp task for hard folders structure?

1 Answers1