Question

我想要动态连接几个不同的角度模块，这样每个模块都有不同的单个输出文件。

所以如果在resources / assets / js / angular / modules目录中我有：

Role   
  - controllers
      roleIndexController   
  - app.js

Descriptions
   -controllers
      descriptionIndexController
   -app.js

我希望这最终成为两个文件：

RoleModule.js
DescriptionsModule.js

每次添加新文件时，我都不想明确地将每个模块添加到gulp文件中。

我尝试在laravel elixir中使用webpack添加glob字符：

require('laravel-elixir-webpack');

elixir(function (mix) {    
    mix.webpack(
        ['angular/app.js', '.angular/modules/**/app.js'],
        {
            output : {
                filename : './angular/app.js'
        }
})

并且还使用gulp-webpack和glob_entries：

gulp.task('compileAngularScripts', function(){
    return gulp.src('angular/app.js')
        .pipe(webpack({
            entry :   glob_entries('./resources/assets/js/angular/modules/**/app.js'),
            output : {
                filename : 'app.js'
            }
        }))
        .pipe(gulp.dest('test/'));
});

我甚至无法使用glob通配符来动态连接文件，更不用说将每个模块分解为自己的文件。

有没有办法用gulp做到这一点？

Answer 1

我使用glob npm包和webpack

完成了这项工作

var glob                     = require('glob');
var webpack                  = require('gulp-webpack');

 elixir(function (mix) {
    .task('compileScripts')


gulp.task('compileScripts', function () {

return gulp.src('angular/app.js')
    .pipe(webpack({
        entry  : entries(),
        output : {
            filename : "[name]Module.js"
        }
    }))
    .pipe(gulp.dest('public/js/angular/modules'));
});

function entries() {
    var entries = {};
    glob.sync('./modules/**/Resources/assets/angular/app.js').forEach(function (url) {
        var moduleNmae      = url.split("/")[2];
        entries[moduleNmae] = url;
    });

    return entries;
}

动态加载多个入口点并拆分输出

1 个答案: