我想知道当我们使用 HTML 5 和 angularjs 时，前端开发工作流程是如何组织的。
我们使用 Jetty java 后端(无法更改)，并且我们希望公开 angularjs 可以使用的 Restful 服务。
使用 angularjs 时，主页需要包含许多 js 文件，其中大部分是特定于应用程序的，我们打算将应用程序逻辑地拆分为 js 文件。
那么您建议如何使用前端开发工作流程？为了避免处理如此多不同的 js 文件，一位同事建议使用 grunt.js 对 js 文件进行缩小，但是一旦缩小，调试就变得困难我的 IDE 也一样...
我们还应该在开发过程中使用缩小功能吗？可以将其推到部署等之前的阶段吗？因此在开发过程中我们使用未缩小的 js 文件，但在生产版本中缩小它们？
如果可能的话，还请建议如何处理index.html中的脚本导入
基本上我们对这种开发方法还很陌生，直到最近我们还使用 JSF 作为我们的 View ，但是我们现在想检查基于 JS 的库，看看它们是否可以提高生产力。
最佳答案
很好的问题。我的团队也遇到了这些问题。您需要熟悉的是 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 。您可以根据 grunt 文件中的规则动态包含文件，如下所示:
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']);
关于angularjs - 使用 angularjs 和 gruntjs 进行前端开发工作流程，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17073111/