Question

我想知道在使用HTML 5和angularjs时前端开发工作流程是如何组织的。

我们使用Jetty java后端（无法更改），我们希望公开angularjs可以使用的restful服务。

使用angularjs时，主页面需要包含许多js文件，其中大多数是特定于应用程序的，我们打算在js文件中逻辑分割应用程序。

那么你会如何推荐前端开发工作流程？为了避免处理这么多不同的js文件，一位同事建议使用grunt.js来缩小js文件，但是一旦缩小就很难调试我的IDE也一样......

我们是否应该在开发过程中使用缩小，可以在部署之前将其推到某个阶段，因此在开发过程中我们使用未经编辑的js文件，但是将它们缩小为生产版本？

如果可以，请同时建议如何处理index.html

中的脚本导入

基本上我们对这种开发方法不熟悉，直到最近我们才将JSF用于我们的视图，但是我们现在想要查看基于JS的库，看看它们是否可以提高生产力。

Answer 1

很棒的问题。我的团队也遇到了这些问题。你想要熟悉的是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文件，但是将它们缩小为生产版本？” EM>

选择包含在您的构建中只是另一项任务：

grunt.registerTask('package:dev',['thetask:dev']); grunt.registerTask('package:prod',['thetast:prod','concat:prod','minify:prod']);

使用angularjs和gruntjs的前端开发工作流程

1 个答案: