2016-08-22 3 views
2

私は、各モジュールが異なる単一の出力ファイルを持つように、動的に連結したい角度モジュールをいくつか用意しています。複数のエントリポイントを動的にロードして出力を分割する

もし私が持っている資源/資産/のJS /角度/ modulesディレクトリにあるように:

Role 
    - controllers 
     roleIndexController 
    - app.js 

Descriptions 
    -controllers 
     descriptionIndexController 
    -app.js 

そして私は、この2つのファイルになってしまうしたい:

RoleModule.js 
DescriptionsModule.js 

と私ドン新しいモジュールを追加するたびに、モジュールをgulpファイルに明示的に追加する必要がありません。

私はlaravelの万能薬でのWebPACKを使用してグロブ文字を追加しようとしました:

require('laravel-elixir-webpack'); 

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

ともちょうどgulp-webpackglob_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/')); 
}); 

文字を動的に連結するためには、各モジュールをそれ自身のファイルに分割するのがずっと少なくて済みます。

gulpを使用してこれを行う方法はありますか?

答えて

2

私は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; 
} 
glob NPMパッケージを使用することによって、これを達成
関連する問題