当我们使用
HTML 5和angularjs时,我想知道前端开发工作流是如何组织的.
我们使用Jetty java后端(不能更改),并且我们要公开角度可以消耗的静态服务.
使用angularjs,主页需要包含许多js文件,其中大部分是特定于应用程序的,我们打算在js文件中逻辑地分割应用程序.
那么你如何推荐使用前端开发工作流？为了避免处理这么多不同的js文件,同事们已经建议使用grunt.js来使用js文件的缩小,但是一旦被细化就变得难以从我的IDE …
我们还应该在开发过程中使用缩小,这可以在部署之前被推到一个阶段等等,所以在开发过程中,我们使用未破解的js文件,然后将其细化为生产版本？
如果可能,请同时建议如何处理index.html中的脚本导入
基本上,我们是这种开发方式的新手,直到最近我们使用JSF来表达我们的观点,但是我们现在想检查一下基于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文件中逻辑地分割应用程序.
看看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>
“我们还应该在开发过程中使用minization,我们使用unminified js文件,但是将它们细化为生产版本？
只需选择在您的构建中包含以下任务即可：
grunt.registerTask('package:dev',['thetast:prod','concat:prod','minify:prod']);
