Sud*_*han 10 workflow frontend angularjs gruntjs
我想知道在使用HTML 5和angularjs时前端开发工作流程是如何组织的.
我们使用Jetty java后端(无法更改),我们希望公开angularjs可以使用的restful服务.
使用angularjs时,主页面需要包含许多js文件,其中大多数是特定于应用程序的,我们打算在js文件中逻辑分割应用程序.
那么你会如何推荐前端开发工作流程？为了避免处理这么多不同的js文件,一位同事建议使用grunt.js来缩小js文件,但是一旦缩小,就很难调试相同的我的IDE ......
我们是否应该在开发期间使用缩小,可以在部署之前将其推送到某个阶段,因此在开发过程中我们使用未分解的js文件,但是将它们缩小为生产版本？
如果可以,请同时建议如何处理index.html中的脚本导入
基本上我们对这种开发方法不熟悉,直到最近我们才将JSF用于我们的视图,但是我们现在想要查看基于JS的库,看看它们是否可以提高生产力.
Dan*_*nze 11
好问题.我的团队也遇到了这些问题.你想要熟悉的是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']);
| 归档时间： |
|
| 查看次数： |
1772 次 |
| 最近记录： |