AngularJs 应用程序结构：缩小 javascript 顺序和加载部分/模板答案

【问题标题】：AngularJs App Structure: minify javascript order and loading of partials/templatesAngularJs 应用程序结构：缩小 javascript 顺序和加载部分/模板
【发布时间】：2014-07-02 14:35:42
【问题描述】：

我正在尝试使用 Angular 推荐的应用程序结构：https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub

当所有部分/模板都通过组件文件夹中的相对路径加载时，它在开发中非常有用。

当我尝试为生产准备我的应用并将所有 .js 压缩/合并到一个文件中时，我遇到了 2 个问题：

输出文件仍然有我的模板和部分的相对路径，这显然不再正确。
热控制组件/模块连接的顺序，以保证所有组件都以正确的顺序组合。（如果没有 AMD/CommonJs 之类的工具，我能做到吗）

【问题讨论】：

标签： angularjs gruntjs gulp dev-to-production

【解决方案1】：

我的一些想法。

我的组件具有以下结构：

├── src/scripts/components
│   ├── example
│   │   ├── example.js
│   │   ├── example.controllers.js
│   │   ├── example.directives.js
│   │   ├── example.filters.js
│   │   └── example.services.js
│   ├── address
│   │   ├── address.js
│   │   ├── address.controllers.js
│   │   └── address.filters.js
│   ├── costs
…

我使用 gulp 构建如下结构：

├── inc/scripts/components
│   ├── example.js
│   ├── address.js
│   ├── costs.js
…

为了得到这个结构，我使用gulp-flatten 和gulp-tap。这是我的任务：

// Components
gulp.task('scripts-components', function() {
    return gulp.src(['src/scripts/components/**/*', '!**/*.md'])
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('jshint-stylish'))
        .pipe(flatten())
        .pipe(tap(function (file) {
            if (file.stat.isDirectory()) {
                var name = file.relative + '.js';
                return gulp.src([file.path + '/' + name, file.path + '/' + file.relative + '.*.js'])
                    .pipe(concat(name))
                    .pipe(gulp.dest('inc/scripts/components/'))
                    .pipe(uglify())
                    .pipe(rename({ suffix: '.min'}))
                    .pipe(gulp.dest('inc/scripts/components/'));
            }
        }));
});

希望它对您或其他任何人都有帮助。

Ciao 拉尔夫

【讨论】：

【解决方案2】：

我发现 AngularJS 代码的丑化/缩小导致了一些问题，ng-min 似乎解决了很多问题：https://www.npmjs.org/package/grunt-ngmin

这是我构建所有 Angular 相关代码的脚本任务的 sn-p。

gulp.task('scritps', function () {
    gulp.src(config.src.js + '/app.js')
      .pipe(ngmin())
      .pipe(uglify({ mangle: false }) : gutil.noop())
      .pipe(gulp.dest(config.dest.js));
});

【讨论】：