[SOLVED] Gulp not compiling function / following source ordering

Gulp not compiling function / following source ordering

I have the following in my gulpfile.js

var baseDir = 'Base/Assets/scss/**/**';
var modulesDir = 'Modules/**/Assets/scss/*'; 

return gulp.src([baseDir + '*.scss', modulesDir + '*.scss'])
    .pipe(sass({cacheLocation: sassCacheDir, lineNumbers: false}))
    .pipe(concat('app.min.css'));

Within the baseDir I have an app.scss file like this:

@import "node_modules/foundation-sites/scss/util/util";

@import "settings";
@import "foundation";

Within the util there's a function called rem-calc. I use this function in my Modules scss files, but these are never executed. Instead in the outputted css I have the following margin-top: rem-calc(10); when this should actually have been converted in to rem's.

The only thing I can thing of is that Gulp isn't remembering the src ordering. Any help will be greatly appreciated.

Solution

I have solved this by removing the modulesDir from the gulpfile, instead I'm using a new package called gulp-sass-glob

This allows me to specify the glob in my app.scss file (within baseDir), like this:

@import "node_modules/foundation-sites/scss/util/util";

@import "settings";
@import "foundation";

// now import the modules
@import "../../../../Modules/**/Assets/scss/*.scss";

My gulpfile.js is then like this:

var baseDir = 'Base/Assets/scss/**/**';

gulp.task('site-css', function () {
    return gulp.src(baseDir + '*.scss')
        .pipe(sassGlob())
        .pipe(sass({cacheLocation: sassCacheDir, lineNumbers: false}))
        .pipe(concat('app.min.css'));

Hopefully this helps someone else which comes across this scenario.