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

【问题标题】：front end development workflow with angularjs and gruntjs使用 angularjs 和 gruntjs 的前端开发工作流程
【发布时间】：2013-06-09 00:21:14
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

标签： angularjs workflow frontend gruntjs

【解决方案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']);

【讨论】：

谢谢看起来像我们需要的，来自 java 背景，这与可用的 maven 构建配置文件非常相似，一定会看看
我真的很喜欢这个繁重的任务实现。为什么在每个开发/生产任务下定义“捆绑”？你有什么理由不能只使用styles: [a.js, b.js, c.js]？
@Clever 我只是把它放在一起作为一个例子。我想我想说的是，对于您的“发布”构建，您将运行与“开发”构建相比额外/不同的任务。在上面的示例中，“生产”包假设所有 JS 文件和所有 CSS 文件都首先被合并/缩小。