How to order the compiling of javascript files in Gulp

Question

Hi I'm trying to fix the order of the js files that get compiled in my Gulp task.

The order I need:

'/_sources/js/libs/*.js'
'/_sources/js/plugins/*.js'
'/_sources/js/custom/*.js'
'/_components/*.js'

Issue is that the custom folder contains a custom particlesJS script and the main particlesJS script is inside the plugins folder. So if the custom script ends up above the main particlesJS in the compiled js file everything breaks.

I tried to re-order things with gulp-order and event-stream but the .order doesn't seem to work, still compiles in the wrong order:

function compile_js(minify, folder) {
    var jsLibs = gulp.src(folder+'/_sources/js/libs/*.js');
    var jsPlugins = gulp.src(folder+'/_sources/js/plugins/*.js');
    var jsCustom = gulp.src(folder+'/_sources/js/custom/*.js');
    var jsComponents = gulp.src(folder+'/_components/*.js');

    return es.merge(jsLibs, jsPlugins, jsComponents, jsCustom)
        .pipe(order([
            folder+'/_sources/js/libs/*.js',
            folder+'/_sources/js/plugins/*.js',
            folder+'/_sources/js/custom/*.js',
            folder+'/_components/*.js'
        ]))
        .pipe(concat('bitage_scripts.js'))
        .pipe(gulpif(minify, uglify()))
        .pipe(gulp.dest(folder+'/_assets/js'));
};

Next I tried streamqueue:

function compile_js(minify, folder) {
    var jsLibs = gulp.src(folder+'/_sources/js/libs/*.js');
    var jsPlugins = gulp.src(folder+'/_sources/js/plugins/*.js');
    var jsCustom = gulp.src(folder+'/_sources/js/custom/*.js');
    var jsComponents = gulp.src(folder+'/_components/*.js');

    return streamqueue({ objectMode: true },
        gulp.src([
            jsLibs,
            jsPlugins,
            jsCustom]),
        gulp.src([jsComponents]).pipe(sass())
    )
    .pipe(concat('bitage_scripts.js'))
    .pipe(gulpif(minify, uglify()))
    .pipe(gulp.dest(folder+'/_assets/js'));
};

Which threw this error: Error: Invalid glob argument: [object Object],[object Object],[object Object]

The task:

// Development task
gulp.task('devsite', function () {
    minify = false;
    return compile_js(minify, 'public');
});

Any thoughts/suggestions?

Declare

Answer 1

Try this.

function compile_js(minify, folder) {
  var jsLibs = gulp.src(folder+'/_sources/js/libs/*.js');
  var jsPlugins = gulp.src(folder+'/_sources/js/plugins/*.js');
  var jsCustom = gulp.src(folder+'/_sources/js/custom/*.js');
  var jsComponents = gulp.src(folder+'/_components/*.js');

  return streamqueue({ objectMode: true },
    jsLibs,
    jsPlugins,
    jsCustom,
    jsComponents
  )
  .pipe(concat('bitage_scripts.js'))
  .pipe(gulpif(minify, uglify()))
  .pipe(gulp.dest(folder+'/_assets/js'));
};

gulp.src(gulp.src('folder+'/_source/something')) doesn't make sense.

Kunming

Hmm just tried that, still getting the glob error and when I remove gulp.src( I get an Arguments to path.join must be strings :( – Declare

Oh btw I removed .pipe(sass()) it's js not css – Declare

OH! Ok so removing the sass() fixed it! :D checking your answer, but you should remove the sass part... – Declare