使用 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.
我们使用 Jetty java 后端(无法更改)，并且我们希望公开 angularjs 可以使用的 restful 服务.
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...
我们也应该在开发过程中使用缩小，这可以推到部署之前的阶段等吗，所以在开发过程中我们使用未缩小的 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 文件."
看看 grunt-html-build.您可以根据 grunt 文件中的规则动态包含文件，如下所示:
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>
我们也应该在开发过程中使用缩小，可以将其推送到部署之前的某个阶段等，因此在开发过程中我们使用未缩小的 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屋！
