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