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对文件进行连接和uglify，但我找不到使用Gulp实现此目的的方法。

PHP是服务器端语言。

任何帮助将不胜感激。

Answer 1

你可以创建一个＆＃34;源地图＆＃34;与缩小的javascript文件一起使用。然后可以在调试时使用源映射，以便您可以看到原始代码。如果您使用的是例如 UglifyJS 2.0 或 Closure Compiler ，则可以选择在创建缩小的javascript时创建源地图。

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

Answer 2

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

package android.widget;

import android.content.Context;
import android.database.ContentObserver;
import android.database.Cursor;
import android.database.DataSetObserver;
import android.os.Handler;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;

public abstract class CursorAdapter extends BaseAdapter implements Filterable,
        CursorFilter.CursorFilterClient {

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

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

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

<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>

这个html：

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']
      }))
  }
});

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

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

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

这是特定于操作系统的，因此google＆＃34;设置环境变量节点YOUR_OS＆＃34;如果它不起作用。

在你的package.json中将该脚本添加到脚本键，或者添加脚本密钥（如果它不存在），它可能如下所示：

set NODE_ENV=production && gulp replace-js

然后你可以使用这个命令而不是输入所有这些：

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

我只是从记忆中走出来，并且从未使用过gulp-html-replace，所以希望我没有做出任何错误并让你感到困惑。

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

2 个答案: