10

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

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

使用 angularjs 碰巧主页面需要包含许多 js 文件，其中大部分是特定于应用程序的，我们打算将应用程序逻辑拆分为 js 文件。

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

我们也应该在开发过程中使用缩小，可以将其推到部署之前的某个阶段等，所以在开发过程中我们使用未缩小的 js 文件，但是将它们缩小以用于生产版本？

如果可能的话，还请建议如何处理 index.html 中的脚本导入

基本上我们是这种开发方法的新手，直到最近我们使用 JSF 作为我们的视图，但是我们现在想检查基于 JS 的库，看看它们是否可以提高生产力。

4

1 回答 1

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']);
于 2013-06-13T14:07:12.297 回答