Angular and Grunt

Question

我是一個Grunt新手，我試圖將一個Angular應用程序（基於angular-seed）轉換爲CSS/JS concat/minification。我有一個定義的CSS和JS文件index.html文件：

<!-- build:css css/myjmh.css --> 
<link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css"/> 
<link rel="stylesheet" href="lib/font-awesome/font-awesome.min.css"/> 
<link rel="stylesheet" href="lib/toaster/toaster.css"/> 
<link rel="stylesheet" href="css/app.css"/> 
<link rel="stylesheet" href="css/custom.css"/> 
<link rel="stylesheet" href="css/responsive.css"/> 
<!-- endbuild --> 

... 

<!-- build:js js/myjmh.min.js --> 
<script src="lib/jquery/jquery-1.10.2.min.js"></script> 
<script src="lib/bootstrap/bootstrap.min.js"></script> 
<script src="lib/angular/angular.min.js"></script> 
<script src="lib/angular/angular-animate.min.js"></script> 
<script src="lib/angular/angular-cookies.min.js"></script> 
<script src="lib/angular/angular-resource.min.js"></script> 
<script src="lib/angular/angular-route.min.js"></script> 
<script src="lib/fastclick.min.js"></script> 
<script src="lib/toaster/toaster.js"></script> 
<script src="lib/webshim/modernizr.min.js"></script> 
<script src="lib/webshim/polyfiller.min.js"></script> 
<script src="js/app.js"></script> 
<script src="js/services.js"></script> 
<script src="js/controllers.js"></script> 
<script src="js/filters.js"></script> 
<script src="js/directives.js"></script> 
<!-- endbuild --> 

我試圖用咕嚕-usemin及其useminPrepare任務可以從我的HTML抓住這些值。

這裏是我的Gruntfile.js：

module.exports = function (grunt) { 

    grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 

     clean: ["dist"], 

     copy: { 
      main: { 
       src: 'app/index.html', 
       dest: 'dist/index.html' 
      } 
     }, 

     useminPrepare: { 
      html: 'app/index.html' 
     }, 

     usemin: { 
      html: ['dist/index.html'] 
     }, 

     ngmin: { 
      dist: { 
       files: [ 
        { 
         expand: true, 
         cwd: '.tmp/concat/js', 
         src: '*.js', 
         dest: '.tmp/concat/js' 
        } 
       ] 
      } 
     } 
    }); 

    grunt.loadNpmTasks('grunt-contrib-clean'); 
    grunt.loadNpmTasks('grunt-contrib-copy'); 
    grunt.loadNpmTasks('grunt-contrib-concat'); 
    grunt.loadNpmTasks('grunt-contrib-cssmin'); 
    grunt.loadNpmTasks('grunt-contrib-uglify'); 
    grunt.loadNpmTasks('grunt-ngmin'); 
    grunt.loadNpmTasks('grunt-usemin'); 
    grunt.loadNpmTasks('grunt-contrib-watch'); 

    grunt.registerTask('default', [ 
     'copy', 'useminPrepare', 'concat', 'ngmin', 'uglify', 'cssmin', 'usemin' 
    ]); 
}; 

所有這些設置，一個「DIST」目錄與所有的文物創造，一切似乎要生成/級聯和正確的精縮。然而，當我加載新的網頁在我的瀏覽器中，我得到以下錯誤：

Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.2.3/$injector/unpr?p0=aProvider%20%3C-%20a 

好像咕嚕正在做的東西，不與角玩嘛。關於這可能是什麼的任何想法？

Answer 1

我可以通過關閉在醜化重整來解決這個問題：

uglify: { 
     options: { 
      report: 'min', 
      mangle: false 
     } 
    } 

正如你可能從我的Gruntfile.js注意到，ngmin已被使用，這似乎並沒有幫助。

找到答案在這裏：https://stackoverflow.com/a/17239358/65681

Answer 2

你需要做兩件事情之一：

1. 使所有的你的角碼微小友好。請參閱：http://docs.angularjs.org/guide/di#dependency-injection_dependency-annotation

2. 使用工具，如grunt-ngannotate

Answer 3

正如其他人所指出的，看來你有微小的問題。我看到你正在使用ngmin。但ngmin可能不適用於具有混合模式的文件。我的意思是，確保您傳遞給ngmin的所有文件都不具有縮小安全模式。

Answer 4

裂傷虛假不應該是解決方案，其實代碼不縮小友好的，但我有問題沒有明確描述here，所以他們是：

1）「確保在整個項目中只使用angular.module（name，[requires]）語法定義每個模塊，然後使用angular.module（name）進行檢索」 - 我在很多地方使用它都是錯誤的它與mangle一起工作：false，設置mangle時破壞：true

2）我用bootstrap modal windows指定實例控制器不作爲字符串，我發現解決方案here

Answer 5

如果您的聲明與我的問題相同，也可以使用ng-annotate來實現此目的。這裏是一個鏈接到github上：https://github.com/mzgol/grunt-ng-annotate

我的工作方案是：

ngAnnotate: { 
    options: { 
     singleQuotes: true, 
     regexp: '^(ng\n?[\\ ]+(.*)|(module.*))$' 
    }, 
    prod: { 
     files: [{ 
      expand: true, 
      src: 'dist/**/*.js' 
     }] 
    } 
} 

小心使用，因爲它會修改現有的文件。我的假設是，'dist'文件夾中的文件應該由Grunt生成，並且可以隨時刪除。