angularjs - AngularJs App Structure: minify javascript order and loading of partials/templates

Question

I'm trying to use the app structure recommended by Angular folks: https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub

It works great in development when all partials/templates are being loaded by relative path from a component's folder.

When I try to prepare my app for production and minify/concat all .js into one file I get 2 issues:

1. Output file still has relative path to my templates and partials, which are obviously not correct anymore.
2. Hot to control order of components/modules concatenation to guarantee that all component will be combined in correct order. (Can I achive this without tools like AMD/CommonJs)

Answer 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/'));
            }
        }));
});

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

乔拉尔夫

Answer 2

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

这是我构建所有角度相关代码的脚本任务的片段。

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));
});