javascriptnode.jsgulpgulp-concat

Gulp concat in order


I'd like to create a sass file using GulpJS. The main issue is that gulp.src() has a specific order that I want to respect when concatenation.

My task that doesn't work...

gulp.task('createGlobalScss', function(done) {
  return gulp.src([
    'sass/colors.scss',
    'sass/theme.scss',
    'sass/settings.scss',
    'sass/functions.scss',
    'sass/mixins.scss',
    'sass/components/**/settings.scss',
    'sass/theme.scss',
    'sass/components/**/*.scss'
  ])
  .pipe(concat('globalScss.scss'))
  .pipe(gulp.dest('./'));
  done();
});

Issue : The result is disordered and I don't want to use @import from SASS.


Solution

  • Check out gulp-order

    The gulp plugin gulp-order allows you to reorder a stream of files using the same syntax as of gulp.src.

    Your task could then be structured as such...

    var order = require('gulp-order');
    
    gulp.task('createGlobalScss', function() {
      return gulp.src('sass/**/*.scss')
        .pipe(order([
          'sass/colors.scss',
          'sass/theme.scss',
          'sass/settings.scss',
          'sass/functions.scss',
          'sass/mixins.scss',
          'sass/components/**/settings.scss',
          'sass/theme.scss',
          'sass/components/**/*.scss'
        ], { base: __dirname }))
        .pipe(concat('globalScss.scss'))
        .pipe(gulp.dest('./'));
    });
    

    You can also remove done here as you're not needing the explicit async callback in this case. Also notice there is a base option which I needed to specify for this to work as expected.


    Per our discussion below, here is a proof of concept which demonstrates this working with the proposed solution...