AngularJS - gulpモジュールを細分化する

Question

構造を設定しようとしているので、すべての角度コードを縮小/拡大することができます。

私はすべてのunmifiedのjsファイルがロードされたときにそれが正常に動作しますAngle Bootstrap Theme

から角度のモジュール構造をコピーしようとしたが、私はそれは、モジュールを見つけていない終わるすべてを縮小化しようとします。

私はこのエラーを取得しています：[$injector:nomod] Module 'app.core' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

これはMVC 5.2.3プロジェクトと角度のファイルの構造であるが、このようなものです：

Scripts/angular/app.module.js 
Scripts/angular/modules/core/core.config.js 
Scripts/angular/modules/core/core.module.js 
Scripts/angular/modules/module1/module1.controller.js 
Scripts/angular/modules/module1/module1.module.js 

のでapp.module.jsは次のようになります：

(function() { 
    'use strict'; 

    angular 
     .module('myApp', [ 
      'app.core', 
      'app.module1', 
      ... 
     ]); 
})(); 

core.config.js：

(function() { 
    'use strict'; 

    angular 
     .module('app.core') 
     .config(coreConfig); 

    coreConfig.$inject = ['$controllerProvider', '$compileProvider', '$filterProvider', '$provide', '$animateProvider']; 
    function coreConfig($controllerProvider, $compileProvider, $filterProvider, $provide, $animateProvider) { 

     var core = angular.module('app.core'); 
     core.controller = $controllerProvider.register; 
     core.directive = $compileProvider.directive; 
     core.filter = $filterProvider.register; 
     core.factory = $provide.factory; 
     core.service = $provide.service; 
     core.constant = $provide.constant; 
     core.value = $provide.value; 

     core.config(function (paginationTemplateProvider) { 
      paginationTemplateProvider.setPath(window.rootUrl + 'scripts/plugins/angular-pagination/dirPagination.tpl.html'); 
     }); 

     $animateProvider.classNameFilter(/^((?!(ng-no-animation)).)*$/); 
    } 

})(); 

core.module.js：

module1.controller.js：

(function() { 
    'use strict'; 

    angular 
     .module('app.note') 
     .controller('module1', module1); 

    module1.$inject = ['$scope', '$localStorage']; 
    function module1($scope, $localStorage) { 
     ..... 
    }; 
})(); 

とmodule1.module.js：

(function() { 
    'use strict'; 

    angular 
     .module('app.core', [ 
      'ngSanitize', 
      'ngRoute', 
      'ngAnimate', 
      'ngResource', 
      'ngStorage', 
      'ui.bootstrap' 
     ]); 
})(); 

そして、すべてのモジュールは、この構造を持っている

(function() { 
    'use strict'; 

    angular 
     .module('app.module1', []); 
})(); 

gulpfile.js

/// <binding Clean='clean' /> 
"use strict"; 

var gulp = require("gulp"), 
    rimraf = require("rimraf"), 
    concat = require("gulp-concat"), 
    cssmin = require("gulp-cssmin"), 
    uglify = require("gulp-uglify"); 

var paths = { 
    webroot: "./" 
}; 


paths.js = paths.webroot + "scripts/angular/**/*.js"; 
paths.minJs = paths.webroot + "scripts/angular/**/*.min.js"; 

.. 

gulp.task("min:js", function() { 
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." }) 
     .pipe(concat(paths.concatJsDest)) 
     .pipe(uglify()) 
     .pipe(gulp.dest(".")); 
}); 

.. 

Answer 1

はおそらく順序問題です。

あなたは入力ストリームを* .module.jsファイルから先に並べ替えることができます。あなたはあなたが順序は、パターンの配列を取る見ることができるようにrisultが

gulp.task("min:js", function() { 
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." }) 
     .pipe(order([ 
      '**/*.module.js', 
      '**/*.js' 
     ])) 
     .pipe(concat(paths.concatJsDest)) 
     .pipe(uglify()) 
     .pipe(gulp.dest(".")); 
}); 

likethisである必要があり、あなたの入力を注文する必要がgulp.src後より

var order = require("gulp-order"); 

を含める必要が

。

パターンがあなたのケースには完璧ではないかもしれませんが、うまくいくはずです。

これが役に立ちます