带有gulp的AngularJS小型化模块

Question

我正在尝试建立一个结构，这样我就可以缩小/丑化我所有的角码。

我试图从角度引导主题复制角度模块结构。

当加载所有未加密的js文件时，它工作得很好，但是当我试图缩小所有文件时，它最终都找不到模块。

我得到了一个错误：[$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之后，您必须命令输入，风险应该是这样的

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

如您所见，订单采用了一个模式数组。

也许这种模式对你的情况并不完美，但它应该是可行的。

希望这能帮上忙