在對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了。