如何订购Gulp中JavaScript文件的编译 [英] How to order the compiling of javascript files in Gulp

问题描述

您好我正在尝试解决在我的Gulp任务中编译的js文件的顺序。

我需要的订单：

 '/ _ sources / js / libs / *。js'
'/_sources/js/plugins/*.js'
 '/_sources/js/custom/*.js'
'/_components/*.js'
  

问题在于自定义文件夹包含自定义particlesJS 脚本，主要粒子脚本位于plugins文件夹内。因此，如果自定义脚本在编译后的js文件中的主粒子之上结束，那么所有内容都会中断。

使用 大量订购 和 event-stream 但是.order似乎不起作用，仍然以错误的顺序编译：

  function compile_js（minify，folder）{
 var jsLibs = gulp.src（folder +'/ _sources / js / libs / *。js'）; 
 var jsPlugins = gulp.src（文件夹+'/ _sources / js / plugins / *。js'）; 
 var jsCustom = gulp.src（文件夹+'/ _sources / js / custom / *。js'）; 
 var jsComponents = gulp.src（folder +'/ _ components / *。js'）; 
 
返回es.merge（jsLibs，jsPlugins，jsComponents，jsCustom）
 .pipe（order（[
 folder +'/ _sources / js / libs / *。js'，
文件夹+'/ _sources / js / plugins / * .js'，
文件夹+'/ _sources / js / custom / * .js'，
文件夹+'/ _ components / * .js'
 $ b .pipe（concat（'bitage_scripts.js'））
 .pipe（gulpif（minify，uglify（）））
 .pipe（gulp.dest（folder +' / _assets / JS'））; 
}; 
  

接下来我尝试了 streamqueue ：
$ b

 函数compile_js（minify，folder ）{
 var jsLibs = gulp.src（文件夹+'/ _sources / js / libs / *。js'）; 
 var jsPlugins = gulp.src（文件夹+'/ _sources / js / plugins / *。js'）; 
 var jsCustom = gulp.src（文件夹+'/ _sources / js / custom / *。js'）; 
 var jsComponents = gulp.src（folder +'/ _ components / *。js'）; 
 $ b返回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'））; 
}; 
  

抛出这个错误：错误：无效的glob参数：[object Object] ，[object Object]，[object Object]

任务：

  //开发任务
 gulp.task（'devsite'，function（）{
 minify = false; 
 return compile_js （minify，'public'）; 
}）; 
  

有什么想法/建议？

解决方案

 函数compile_js（minify，文件夹）{
 var jsLibs = gulp.src（文件夹+'/ _sources / js / libs / *。js'）; 
 var jsPlugins = gulp.src（文件夹+'/ _sources / js / plugins / *。js'）; 
 var jsCustom = gulp.src（文件夹+'/ _sources / js / custom / *。js'）; 
 var jsComponents = gulp.src（folder +'/ _ components / *。js'）; 
 $ b返回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 '））没有意义。

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?

解决方案

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.

这篇关于如何订购Gulp中JavaScript文件的编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！