在本地執行應用

以下示例要求安裝 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 和編輯器配置以及一些通用的東西。試試看！