在 AngularJS 中，如何在我的开发环境中用非缩小文件替换缩小的 javascript 文件？

Question

在 AngularJS 中处理这个问题的最佳方法是什么？

我有一个 AngularJS 应用程序，其中包含连接/缩小的 javascript 文件，但是在我的开发环境中，我想加载文件的非连接/非缩小版本。我想要这个，因为使用非压缩文件更容易调试代码。

<!-- production -->
<script src="js/all.min.js"></script> <!-- contains all concatenated/minified code -->

<!-- dev -->
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>

我不知道该怎么做，因为在 AngularJS 中我找不到合适的条件机制。我想过在每个脚本标签上使用指令吗？

我正在使用 Gulp 来连接和丑化文件，但我找不到使用 Gulp 完成此任务的方法。

PHP 是服务器端语言。

任何帮助将不胜感激。

Answer 1

您可以创建一个“源映射”来与缩小的 javascript 文件一起使用。然后可以在调试时使用源映射，以便您可以看到原始代码。如果您使用例如 UglifyJS 2.0 或 Closure Compiler，则可以在创建缩小的 javascript 时创建源映射。

有关源映射和调试的更多信息：source maps debugging in Google Chrome

Answer 2

在 Angular 中执行此操作的最佳方法可能是使用 ngInclude 有条件地加载 ngTemplate。它看起来像这样：

<script type="text/ng-template" id="development">
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  script src="js/directives.js"></script>
</script>

<script type="text/ng-template" id="production">
  <script src="js/all.min.js"></script>
</script>

<div id="javascripts" ng-include="dev ? 'development' : 'production'"></div>

如果您在控制器中使用 $scope，则只需将 $scope.dev 设置为 true 以包含开发 JavaScript，或设置为 false 以使用生产文件。

编辑：但正如其他人所说，您应该为此寻找任务运行器。另外，查看环境变量以设置项目所处的状态。

编辑2：至于为此使用Gulp，您可以使用gulp-html-replace package。使用此包的任务如下所示：

var gulp = require('gulp');
var htmlreplace = require('gulp-html-replace');

gulp.task('replace-js', function(){
if (process.env.NODE_ENV === 'production') {
    gulp.src('index.html')
      .pipe(htmlreplace({
        'js': ['js/services.js', 'js/controllers.js', 'js/directives.js']
      }))
  }
});

对于这个 html：

<!-- build:js -->
<script src="js/all.min.js"></script>
<!-- endbuild -->

（编辑 3：我注意到您可能不使用节点，下面的内容是特定于节点的，因此您必须根据自己的需要进行调整）

当您运行 gulp 时，您必须设置环境变量，即您在 if 语句中看到的 process.env.NODE_ENV。通过像这样运行 Gulp 来做到这一点：

set NODE_ENV=production && gulp replace-js

这是特定于操作系统的，如果它不起作用，请谷歌“设置环境变量节点 YOUR_OS”。

在你的 package.json 中将该脚本添加到 scripts 键，或者如果它不存在，则添加 scripts 键，因此它可能如下所示：

"scripts": {
  "replace-js": "set NODE_ENV=production && gulp replace-js"
}

然后你可以直接使用这个命令而不是全部输入：

npm run replace-js

我只是凭记忆，从未使用过 gulp-html-replace，所以希望我没有犯任何错误并让您感到困惑。