前端开发工作流程与angularjs和gruntjs [英] front end development workflow with angularjs and gruntjs
问题描述
我想知道如何当我们使用HTML 5和angularjs前端开发工作流程进行组织。
I wanted to know how the front end development workflow is organized when we use HTML 5 and angularjs.
我们使用Java的码头后端（不能更改），而且我们要揭露RESTful服务该angularjs可以消耗。
We use a Jetty java back end (Cannot be changed), and we want to expose restful services which the angularjs can consume.
使用angularjs恰巧主页需要包括很多js文件，其中大部分是针对特定应用，我们打算在js文件拆分逻辑应用。
With angularjs it so happens that the main page needs to include many js files, most of which are application specific, we intend to split the application logically in js files.
所以，你会怎么推荐具有前端开发工作流？，为了避免处理这么多不同的JS文件一个同事曾建议使用grunt.js使用JS文件微小的，然而，一旦精缩变得难以调试从我的IDE一样...
So how would you recommend having the front end development workflow ?, in order to avoid handling so many different js files a colleague has suggested the use of minification of js files using grunt.js , however once minified it becomes difficult to debug the same from my IDE...
此外，我们应该使用缩小开发过程中，是否可以只部署等之前推到了一个阶段，所以在开发过程中，我们使用unminified js文件但是它们最小化的产能释放？
Also should we be using minification during development, can this be pushed to a stage just before deployment or the like , so during development we use the unminified js files however minify them for the production release ?
如果这是可能的，也请说明一个人如何处理的index.html内的脚本进口
If that is possible,please also suggest how does one handle the script imports within the index.html
基本上我们是新的这种发展方式，直到最近我们用JSF对我们的看法但我们现在要检查出基于JS库和看看他们是否可以提高工作效率。
Basically we are new to this approach of development, till recently we used JSF for our views however we now want to check out the JS based libraries and see if they can improve productivity.
推荐答案
大问题。我的团队遇到了这些问题也是如此。你会想，以熟悉是Grunt.js对象符号。你可以做这样的事情：
Great questions. My team ran into these problems as well. What you are going to want to get familiar with is Grunt.js object notation. You can do things like:
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文件逻辑拆分的应用程序。的
看看 咕噜-HTML的构建 。您可以动态包括：基于在繁重的文件规则这样的文件：
Take a look at grunt-html-build. You can dynamically include files based on rules in your grunt file like this:
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>
的也应我们在开发过程中使用微小，可以这样只部署等之前推到了一个阶段，所以在开发过程中，我们使用unminified js文件但是它们最小化的产能释放？
将只是另一个任务选择在构建包括：
Would just be another task to choose to include in your build:
grunt.registerTask('package:dev',['thetask:dev']);
grunt.registerTask('package:prod',['thetast:prod','concat:prod','minify:prod']);
这篇关于前端开发工作流程与angularjs和gruntjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
