在对AngularJS应用进行模块化之后，如何将整个项目包含在index.html中，而不必键入很多<script> tags

Question

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

Answer 1

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

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

有许多yeoman生成器将为您完成所有这些工作，或者您可以在github上找到简单的示例。

Answer 2

基本思想是

1. 连接所有js文件（以正确的顺序排列，以便模块定义先于控制器/服务）
2. 最小化是否用于生产
3. 复制到固定路径
4. 在您的html中包含此单个js文件
5. 在开发过程中，让您的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是包含您的角度应用js文件的文件/文件夹的数组

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

注意：使用! 前缀以排除某些文件/文件夹。

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 3

Gulp/Grunt可以concat所有的angular files 。

创建2个任务：

• dev build task
  • 连接到一个文件但don't uglify 。
• 一项与开发人员相同的distribution/production task ，但这使concatenated file uglify了。