如何在一個html文件中「編譯」一個AngularJS應用程序，並保持內聯所有源。 （grunt）

Question

我開發了一個AngularJS應用程序，並且希望在一個.html文件中有全部來源。
我使用grunt作爲構建系統。
我使用的模板ngtemplates
非AngularJS應用程序有可能通過concat + processhtml「gun」任務進行「編譯」。
如果我嘗試使用angular-app來做，頁面會顯示一些js文件的內容。
是否有可能只保存一個html文件？
如果是的話，表現出一定的例子，請簡單AngularApp + Gruntfile.js

Answer 1

OK，問題是在angular.js文件中的註釋。 AngularJS文件通過示例進行了評論，其中包含<script>..</script>部分。如果您在內嵌的html文件中插入這樣的示例，則<script>標記中的註釋示例中的結束標記將關閉原始腳本標記。
例如

<script> <---- original script tag 
/** 
* example comment. 
* use in this way: 
* <script>example()</script> <---- this will close original tag, and broke js in your html 
*/ 
</script> 

所以我用uglifyjs到刪除所有評論，使JS較小。這修復了問題。

我咕嚕任務看起來是這樣的：

grunt.registerTask('onefile', ['ngtemplates', 'useminPrepare', 'concat:generated', 'uglify:generated', 'cssmin:generated', 'usemin', 'processhtml']); 

在HTML文件以這樣的方式說：

<!-- process:css inline --> 
    <!-- build:css styles.min.css --> 
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> 
    <link rel="stylesheet" href="app.css"> 
    <!-- endbuild --> 
    <!-- /process --> 

....

<!-- process:js inline --> 
    <!-- build:js app.min.js --> 
    <!-- bower:js --> 
    <script src="bower_components/jquery/dist/jquery.js"></script> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-route/angular-route.js"></script> 
    <!-- endbower --> 

    <script src="main-table/main-table.js"></script> 
    <script src="app.js"></script> 
    <script src="templates.js"></script> 
    <!-- endbuild --> 
    <!-- /process --> 

<!-- process:css inline -->是processhtml，使所有代碼內聯。
processhtml使用與usemin commentmarker衝突的默認commentMarker build。
要與usemin使用它，在processhtml任務定義commentMarker，如：

processhtml: { 
    options: { 
    commentMarker: 'process' 
    } 
} 

而且可以肯定，角碼應該能夠被精縮，像Lior Ben Aharon評論。
我用它ngAnnotate。

Answer 2

的你可以試試這個咕嚕模塊https://github.com/ericclemmons/grunt-angular-templates

我從來沒有使用過，但也許能滿足您的需求。

Answer 3

我知道如何將一堆js文件合併爲一個。 事件雖然很容易縮小這些文件，但您需要將它們縮小。這意味着你應該使用$ injector聲明函數，這樣它就可以作爲一個縮小文件「可讀」。

瞭解一些所謂的大口..

angular 
.module("module") 
.controller("ctrl",[ 
    "$scope",//This is a standard declaration to make a file minifiable. 
    function($scope){} 
]);