使用 Grunt 连接缩小文件并跳过缩小答案

【问题标题】：Concat Minified files & skip Minification using Grunt使用 Grunt 连接缩小文件并跳过缩小
【发布时间】：2014-01-27 09:18:00
【问题描述】：

目前我正在编写一个 Grunt Build 文件；它使用“usemin”我在 HTML 中创建了 3 个块，这将创建 3 个文件 assets.min.js 、 lib.min.js 等。

<!-- build:js js/assets.min.js --> 
<script type="text/javascript" src="app/assets/js/lib/angular.min.js"></script> 
<script type="text/javascript" src="app/assets/js/lib/angular-cache.min.js"></script> 
<script type="text/javascript" src="app/assets/js/lib/angular-route.min.js"></script> 
<script type="text/javascript" src="app/assets/js/lib/angular-animate.min.js"></script> 
<script type="text/javascript" src="app/assets/js/lib/angular-touch.min.js"></script> 
<script type="text/javascript" src="app/assets/js/lib/angular-cookies.min.js"></script> 
<script type="text/javascript" src="app/assets/js/lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/jqueryui.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/bootstrap.min.js"></script> 
<script type="text/javascript" src="app/assets/js/lib/bootstrap-switch.min.js"></script> 
<!-- endbuild -->

这很好用。但是我面临两个主要问题......

Angular 显示错误“未捕获的错误 [$injector:modulerr]..
看来 Usemin 也在再次缩小文件。

我也尝试了第二个选项，只是连接这些文件，即绕过缩小步骤避免 Usemin.. 仍然是 同样的错误

请指导

【问题讨论】：

请看github.com/btford/grunt-ngmin它为你做角缩小准备。
我已经在使用“ng-min”了。但不确定是什么问题。
你解决了吗？我也已经在使用 ng-min 并收到此错误。

标签： angularjs gruntjs bundling-and-minification grunt-usemin grunt-contrib-concat

【解决方案1】：

Angular 使用称为依赖注入的东西来解决您的参数。 Angular 通过名称知道每个对象是什么。

“$scope”将被初始化为一个范围对象，因为它被命名为“$scope”。在 usemin 之后，此变量将被称为其他名称，例如“a”，以节省字节。 Angular 不知道“a”是什么并抛出错误。

你可以这样解决：

在此处阅读有关 Angular 应用程序缩小的信息 http://docs.angularjs.org/tutorial/step_05
在运行 uglify 之前手动按照指南操作或使用 ngmin 进程。

希望这会有所帮助！

【讨论】：

【解决方案2】：

您可以通过两种方式解决此问题。
1.在usemin块中使用未缩小的文件

<!-- build:js js/assets.min.js -->
<script type="text/javascript" src="app/assets/js/lib/angular.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-cache.js"></script> 
<script type="text/javascript" src="app/assets/js/lib/angular-route.js"></script> 
<script type="text/javascript" src="app/assets/js/lib/angular-animate.js"></script> 
<script type="text/javascript" src="app/assets/js/lib/angular-touch.js"></script> 
<script type="text/javascript" src="app/assets/js/lib/angular-cookies.js"></script> 
<script type="text/javascript" src="app/assets/js/lib/jquery-1.10.1.js"></script>
<script type="text/javascript" src="app/assets/js/lib/jqueryui.js"></script>
<script type="text/javascript" src="app/assets/js/lib/bootstrap.js"></script>
<script type="text/javascript" src="app/assets/js/lib/bootstrap-switch.js"></script>
<!-- endbuild -->

2. 使用 grunt task 复制脚本

copy:{
  scripts:{
    files:[{
      expand: true, 
      cwd:'<%= config.app %>',
      dest: '<%= config.tmp %>', src: ['app/assets/js/lib/**/*.min.js']
    }]
  },
}

【讨论】：