模块化 AngularJS 应用程序后，如何将整个项目包含在 index.html 中而无需键入大量 <script> 标签

Question

我学习 Angular 有一段时间了，正在研究模块化应用程序的最佳方法。我认为我对此的理解非常好，但我环顾四周似乎无法得到一个很好的答案，即所有这些 .js 文件是如何包含在 index.html 中的，而不仅仅是手动输入一堆标签。我一直在研究 Grunt/Gulp 并了解它们是如何将整个应用程序组合到一个 .js 文件中的，但是对于开发，我猜你不想重新运行 g运行t 或 gulp 每次您想更新应用程序时。

Answer 1

基本思路是

连接所有的 js 文件（以正确的顺序使模块定义在 controllers/services 之前）
如果用于生产则缩小
复制到固定路径
在您的 html
在开发期间让您的 grunt/gulp 脚本监视 js 文件中的更改并重新运行上述步骤，这样您就不必运行 grunt/gulp手动任务。

现在，如果您正在使用 gulp，这就是您通常处理上述步骤的方式

gulp.task('process-js', function () {
  return gulp.src(jsFiles, {base: './'})
    .pipe(gulpif(isProd, concat('all.min.js'), concat('all.js')))
    .pipe(gulpif(isProd, uglify({mangle: true, preserveComments:    'some'})))
    .pipe(gulp.dest(deployFolder + '/static/js'))
});

其中 jsFiles 是 files/folders 的数组，其中包含您的 angular 应用程序 js 文件

var jsFiles = [
'!static/js/**/*.js',
'!static/js/plugin/**/*.*',
'app/index/**/*module.js',
'app/index/**/*config.js',
'app/index/**/*ctrl.js'
];

注意：使用 ! 前缀可以从处理中排除某些 files/folders。

isProd只是一个标志，表明你是准备生产还是开发。

在开发过程中，我还使用 BrowserSync 来观察我的 js 文件的任何更改，并重新运行 gulp 任务来准备 all.js。它还会自动刷新浏览器中的页面。

gulp.task('run', function () {
browserSync({
    server: {
        baseDir: deployFolder
    },
    open: true,
    browser: ['google chrome'],
    files: deployFolder + '/**/*',
    watchOptions: {
        debounceDelay: 2000
    }
});
gulp.watch(jsFiles, ['process-js']);

});
gulp.task('default', function () {
  runSequence(
    'clean',
    'run'
  );
});

Answer 2

有许多不同的选项：gulp、g运行t 或 webpack 似乎是最受欢迎的。这些天我最倾向于使用webpack。

一个好的设置通常会运行一个本地节点服务器，它会在您每次更改文件时自动刷新浏览器。

有许多 yeoman 生成器可以为您完成所有设置，或者您可以在 github.

上找到简单示例

Answer 3

Gulp/Grunt 到 concat 你所有的 angular files.

创建 2 个任务：

一个dev build task
- concat 到一个文件但是 don't uglify。
a distribution/production task 与 dev 一样，但这个 uglify concatenated file.

模块化 AngularJS 应用程序后，如何将整个项目包含在 index.html 中而无需键入大量 <script> 标签

After modularizing an AngularJS app, how do you include the entire project in the index.html without having to type a ton of <script> tags

javascript

build-automation

angularjs