使用angularjs和gruntjs的前端開發工作流程

我想知道在使用HTML 5和angularjs時如何組織前端開發工作流程。使用angularjs和gruntjs的前端開發工作流程

我們使用Jetty java後端（無法更改），並且我們想要公開angularjs可以使用的restful服務。

隨着angularjs的發生，主頁面需要包含很多js文件，其中大部分都是特定於應用程序的，我們打算將應用程序邏輯地分割成js文件。

那麼，如何建議開發前端開發工作流程？爲了避免處理如此多的不同js文件，一位同事建議使用grunt.js來縮小js文件的大小，然而一旦縮小，就很難從我的IDE調試相同...

也應該在開發過程中使用縮小，可以將它推到部署之前的階段或類似的，所以在開發過程中，我們使用非微型js文件，但是縮小它們爲生產發佈？

如果可能的話，也請您建議如何處理一箇中的index.html

基本上我們是新的這種發展方式中的腳本進口，直到最近我們用JSF對我們的看法但我們現在要檢查基於JS的庫並查看它們是否可以提高生產力。

來源

2013-06-12 Sudarshan

偉大的問題。我的團隊也遇到了這些問題。你想要熟悉的是Grunt.js對象表示法。你可以做這樣的事情：

thetask: { 
    dev: { 
    src: [ 
     ['build/_compile','build/development/**'] 
    ] 
    }, 
    prod: { 
    src: [ 
     ['build/_compile','build/production/**'] 
    ] 
    }, 
}, 

grunt.registerTask('package:dev',['thetask:dev']); 
grunt.registerTask('package:prod',['thetast:prod']); 

~# grunt package:dev

「隨着angularjs恰巧主頁需要包括很多js文件，其中大部分是應用特定的，我們打算在js文件在邏輯上劃分應用程序。」

看看grunt-html-build。您可以動態包括根據規則，你的呼嚕聲文件，這樣的文件：

htmlbuild: { 
    dev: { 
     src: 'app/index.html', 
     dest: 'build/development', 
     options: { 
      styles: { 
       bundle: [ 
        'build/development/css/app.css', 
       ] 
      }, 
      scripts: { 
       bundle: [ 
        // Bundle order can be acheived with globbing patterns. 
        // See: https://github.com/gruntjs/grunt/wiki/Configuring-tasks#globbing-patterns 
        'build/development/js/angular.js', 
        'build/development/js/angular-resource.js', 
        'build/development/js/nginfinitescroll.js', 
        'build/development/js/*.js',    
       ] 
      }, 
     } 
    }, 
    prod: { 
     src: 'app/index.html', 
     dest: 'build/production', 
     options: { 
      styles: { 
       bundle: [ 
        'build/production/css/app.css', 
       ] 
      }, 
      scripts: { 
       bundle: [ 
        'build/production/js/app.js',    
       ] 
      }, 
     } 
    }, 
},

，然後在指數：

<!doctype html> 
<html lang="en" ng-app="myApp"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Playground 3</title> 
<!-- build:style bundle --> 
<!-- /build --> 
</head> 
<body> 
<div ng-include src="'/views/global.navbar.html'"></div> 
<div ng-view class="container"></div> 
<div ng-include src="'/views/global.footer.html'"></div> 
<!-- build:script bundle --> 
<!-- /build --> 
</body> 
</html>

「此外，我們應該在開發過程中使用微小，可以這樣推到部署之前的階段或類似的階段，所以在開發過程中，我們使用未記錄的js文件，但是爲了生產版本而縮小它們？「

將只是另一個任務選擇您的構建，包括：

grunt.registerTask('package:dev',['thetask:dev']); 
grunt.registerTask('package:prod',['thetast:prod','concat:prod','minify:prod']);

來源

2013-06-13 14:07:12

感謝看起來我們需要什麼，從Java的背景，這是非常相似的Maven構建可用的配置文件來了，肯定會看看 – Sudarshan

我真的很喜歡這個咕task任務的實現。爲什麼在每個dev/prod任務下定義'bundle'？有什麼理由不能只使用'樣式：[a.js，b.js，c.js]'？ – Clev3r

@Clever我只是把它扔在一起作爲一個例子。我想我試圖做的一點是，對於你的「發佈」版本，你將運行比你的「開發」版本更多/不同的任務。在上面的例子中，「生產」包假定所有的JS文件和所有的CSS文件都是先進行連接/縮小的。 –

使用angularjs和gruntjs的前端開發工作流程

回答

相關問題