Структура приложения AngularJs: минимизировать порядок javascript и загрузку частичных/шаблонов

Я пытаюсь использовать структуру приложения, рекомендованную людьми из Angular: https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub

Это прекрасно работает при разработке, когда все частичные файлы/шаблоны загружаются по относительному пути из папки компонента.

Когда я пытаюсь подготовить свое приложение к производству и минимизировать/объединить все .js в один файл, я получаю 2 проблемы:

  1. Выходной файл по-прежнему имеет относительный путь к моим шаблонам и партиалам, которые, очевидно, уже неверны.
  2. Hot для управления порядком объединения компонентов/модулей, чтобы гарантировать, что все компоненты будут объединены в правильном порядке. (Могу ли я добиться этого без таких инструментов, как AMD/CommonJs)

angularjs gulp dev-to-production gruntjs
person Andrey Selitsky    schedule 02.07.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

некоторые мысли от меня.

У меня есть следующая структура для моих компонентов:

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

Может быть, это полезно для вас или кого-либо еще.

Чао Ральф

person RWAM    schedule 03.07.2014

arrow_upward
0
arrow_downward

Я обнаружил, что уменьшение/минимизация моего кода AngularJS вызвало несколько проблем, ng-min, похоже, отсортировал многие из них: https://www.npmjs.org/package/grunt-ngmin

Вот фрагмент моих скриптовых задач, которые создают весь мой код, связанный с angular.

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));
});
person Oam Psy    schedule 02.07.2014