-->

How to order the compiling of javascript files in

2019-09-06 11:55发布

问题:

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?

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