AngularJS - 縮小模塊與吞嚥

Question

我想建立一個結構，所以我可以縮小/ uglify所有的角碼。

我試過當所有的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：

(function() { 
    'use strict'; 

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

而且所有模塊都具有這樣的結構：

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.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文件。

你必須包括

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

比你要訂購您輸入gulp.src後risult應likethis

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(".")); 
}); 

，你可以看到訂單採取模式的陣列。

也許模式不適合你的情況，但它應該工作。

希望這可以幫助