在本地运行应用

以下示例要求安装 node.js 并且 npm 可用。
完整的工作代码可以从 GitHub @ https://github.com/mikkoviitala/angular-grunt-run-local 分叉

通常，在开发新的 Web 应用程序时，你要做的第一件事就是让它在本地运行。

下面你将找到实现这一点的完整示例，使用 grunt （javascript 任务运行器） ， npm （节点包管理器）和 bower （还有另一个包管理器）。

*除了你的实际应用程序文件，*你还需要使用上面提到的工具安装很少的第三方依赖项。在项目目录中，最好是 root ，你需要三（3）个文件。

• package.json（由 npm 管理的依赖项）
• bower.json（由凉亭管理的依赖项）
• gruntfile.js（grunt 任务）

所以你的项目目录是这样的：

package.json

我们将安装 grunt 本身， matchdep 使我们的生活更轻松，允许我们按名称过滤依赖关系， grunt-express 用于通过 grunt 启动快速 Web 服务器， grunt-open 用于打开来自 grunt 任务的 url /文件。

所以这些包都是关于基础设施和帮助我们将构建我们的应用程序。

{
  "name": "app",
  "version": "1.0.0",
  "dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.1",
    "matchdep": "~0.1.2",
    "grunt-express": "~1.0.0-beta2",
    "grunt-open": "~0.2.1"
  },
  "scripts": {
    "postinstall": "bower install"
  }
}

bower.json

Bower 是（或者至少应该）所有关于前端的，我们将使用它来安装角度。

{
  "name": "app",
  "version": "1.0.0",
  "dependencies": {
    "angular": "~1.3.x"
  },
  "devDependencies": {}
}

gruntfile.js

在 gruntfile.js 中，我们将拥有实际的本地运行应用程序魔法，它将在新的浏览器窗口中打开我们的应用程序，在 http：// localhost：9000 /上运行

'use strict';

// see http://rhumaric.com/2013/07/renewing-the-grunt-livereload-magic/

module.exports = function(grunt) {
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
 
  grunt.initConfig({
    express: {
      all: {
        options: {
          port: 9000,
          hostname: 'localhost',
          bases: [__dirname]
        }
      }
    },
 
    open: {
      all: {
        path: 'http://localhost:<%= express.all.options.port%>'
      }
    }
  });
 
  grunt.registerTask('app', [
    'express',
    'open',
    'express-keepalive'
  ]);
};

用法

要从头开始运行应用程序，请将上述文件保存到项目的根目录（任何空文件夹都可以）。然后启动控制台/命令行并键入以下内容以安装所有必需的依赖项。

npm install -g grunt-cli bower
npm install

然后使用运行你的应用程序

grunt app

请注意，是的，你也需要实际的应用程序文件。
对于几乎最小的示例，浏览本示例开头提到的 GitHub 存储库 。

结构没有那么不同。只有 index.html 模板，app.js 中的角度代码和 app.css 中的几个样式。其他文件用于 Git 和编辑器配置以及一些通用的东西。试试看！