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...