現(xiàn)在web開發(fā)的趨勢是前后端分離。前端采用某些js框架，后端采用某些語言提供restful API，兩者以json格式進行數(shù)據(jù)交互。

如果后端采用node.js，則前后端可以使用同一種語言，共享某些可重用的Js代碼，并共享構(gòu)建工具。但很多時候我們可能采用別的語言，如ruby/java/scala等，此時前后端代碼基本上是完全獨立的。雖然大家都在同一個項目中，但可以分成互相獨立的兩塊，并且前后端通常使用不同的構(gòu)建工具。

比如當后端使用Scala時，我們會使用sbt進行項目構(gòu)建，對scala代碼進行編譯、測試、打包等。它的專長是處理與scala相關(guān)的任務(wù)，但對于前端的支持比較弱。前端一些常見的任務(wù)，如js庫的下載和管理、css文件的轉(zhuǎn)換、js文件合并壓縮、js測試的執(zhí)行等，很難在sbt中找到好用的插件，而利用js世界里的工具來做反而更加方便一些。

我們項目組這幾天正在討論是否在項目中引入一些前端框架，還是直接用原生Javascript寫。經(jīng)過反復(fù)討論和調(diào)研，最終決定引入AngularJs。但AngularJs的引入并不是單一的任務(wù)，因為我們還需要考慮前端代碼的測試、依賴管理等，都需要有相應(yīng)的工具支持，所以最后引入了這么一整套工具：

1. Grunt – Js任務(wù)管理工具，通過各種插件對項目進行各種操作，比如文件轉(zhuǎn)換、運行測試、打包部署等。相當于java里的ant/maven/gradle，ruby中的rack，scala中的sbt。
2. Bower – Js庫依賴管理工具。當你需要jquery時，不需要手動下載，只需要執(zhí)行bower install jquery
3. RequireJs – Js庫加載管理，及模塊化支持?？梢园葱杓安⑿屑虞djs庫，可以把我們的代碼以模塊化的方式組織。
4. AngularJs – Js前端框架，支持依賴注入，雙向綁定等我認為很重要的功能

這套東西都是比較基礎(chǔ)且使用比較廣泛的。一般一旦在項目中引入前端框架，或者需要寫比較多的Js代碼時，我們都會采用它們，所以很有必要學(xué)習(xí)并掌握它們。

各工具都相當?shù)莫毩?/h2>

在開始前，需要先提示一下，在javascript的世界里，很多東西都是由社區(qū)提供的，所以每一種工具都相當獨立。比如，很多工具都有著自己獨立的配置文件，自己的命令行參數(shù)，有時候還需要有一些額外的插件把兩個工具結(jié)合起來。

所以下面將會有很多比較瑣碎的命令，我們需要一一了解。不過好在我們一旦了解了，下次就可以使用已經(jīng)配置好的文件，通過幾條命令將把有的東西都準備好，很方便。

安裝nodejs

在Mac中，我們可以使用brew來安裝。在其它系統(tǒng)下，請使用相應(yīng)的工具或直接到官網(wǎng)下載。

brew install node

Nodejs可以讓我們在服務(wù)器端使用javascript編程，它是很多js工具的基礎(chǔ)。如果你已經(jīng)安裝，請確保使用最新版本：

brew upgrade node

查看版本：

node -v

我這里顯示：

v0.10.28

npm

Npm是node官方提供的包依賴管理工具。我們下面使用的grunt等，都是以插件形式下載安裝的。

當我們安裝好nodejs后，npm就自動可用了。

查看版本：

npm -v

我這里顯示：

2.0.0-alpha-5

創(chuàng)建項目目錄

下面我們從零開始，首先在任意位置新建一個目錄作為我們的項目根目錄，比如：

mkdir ~/myproject

然后進入該目錄：

cd ~/myproject

后面的命令都將在項目根目錄下操作。

為npm創(chuàng)建package.json

首先我們需要為npm提供一個package.json，告訴它我們的項目信息，特別是項目中將會使用的插件。我們不需要手動創(chuàng)建，因為可以直接調(diào)用以下命令：

npm init

它會問我們一些問題，我們可以按需回答，也可以全部使用默認值，反正以后可以改起來也很容易。

最后將會產(chǎn)生如下的package.json文件：

{
  "name": "grunt-bower-angular-demo",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/freewind/grunt-bower-angular-demo.git"
  },
  "author": "",
  "license": "BSD",
  "bugs": {
    "url": "https://github.com/freewind/grunt-bower-angular-demo/issues"
  }
}

對于像我們這樣的非nodejs項目來說，里面的大部分內(nèi)容都沒用，可以刪掉大部分，只剩下：

{
  "name": "grunt-bower-angular-demo",
  "version": "0.0.0"
}

安裝 grunt

npm install grunt --save-dev

將使用npm下載grunt插件，它們將保存到項目根目錄下的node_components目錄下。

后面的--save-dev參數(shù)是說，把這個插件信息，同時添加到package.json的devDependencies中：

"devDependencies": {
  "grunt": "~0.4.5"
}

由于grunt僅在開發(fā)階段使用，所以使用--save-dev。如果是運行時使用的，則用--save

安裝 grunt-cli

上面安裝的grunt并不包含命令行工具，我們還需安裝相應(yīng)的grunt-cli，才能在命令行中調(diào)用grunt命令：

npm install grunt-cli -g

后面的-g是說，把grunt-cli安裝成全局工具，以便在任意目錄下使用。

安裝后，輸入:

grunt --version

我這里顯示為：

grunt-cli v0.1.13
grunt v0.4.5

在比較少的情況下，可能提示找不到grunt，則需要根據(jù)安裝grunt-cli時的提示信息，把相應(yīng)的路徑添加到PATH中：

echo PATH=$PATH:/your/path/to/grunt >> ~/.bashrc
source ~/.bashrc

為grunt創(chuàng)建配置文件Gruntfile.js

安裝grunt-init

npm install grunt-init -g

下載grunt模板

git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile

生成Gruntfile

grunt-init gruntfile

根據(jù)需要回答問題，或者使用默認值，將得到以下Gruntfile.js文件：

/*global module:false*/
module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    // Metadata.
    pkg: grunt.file.readJSON('package.json'),
    banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
      '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
      '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
      '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
      ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n',
    // Task configuration.
    concat: {
      options: {
        banner: '<%= banner %>',
        stripBanners: true
      },
      dist: {
        src: ['lib/<%= pkg.name %>.js'],
        dest: 'dist/<%= pkg.name %>.js'
      }
    },
    uglify: {
      options: {
        banner: '<%= banner %>'
      },
      dist: {
        src: '<%= concat.dist.dest %>',
        dest: 'dist/<%= pkg.name %>.min.js'
      }
    },
    jshint: {
      options: {
        curly: true,
        eqeqeq: true,
        immed: true,
        latedef: true,
        newcap: true,
        noarg: true,
        sub: true,
        undef: true,
        unused: true,
        boss: true,
        eqnull: true,
        browser: true,
        globals: {
          jQuery: true
        }
      },
      gruntfile: {
        src: 'Gruntfile.js'
      },
      lib_test: {
        src: ['lib/**/*.js', 'test/**/*.js']
      }
    },
    qunit: {
      files: ['test/**/*.html']
    },
    watch: {
      gruntfile: {
        files: '<%= jshint.gruntfile.src %>',
        tasks: ['jshint:gruntfile']
      },
      lib_test: {
        files: '<%= jshint.lib_test.src %>',
        tasks: ['jshint:lib_test', 'qunit']
      }
    }
  });
  // These plugins provide necessary tasks.
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-qunit');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  // Default task.
  grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
};

它里面已經(jīng)包含了一些常用的插件，比如grunt-contrib-jshint等，我們可根據(jù)需要刪減一些用不上的。

它同時還會在package.json里添加上這些插件的依賴：

"grunt-contrib-concat": "~0.4.0",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-qunit": "~0.5.2",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-watch": "~0.6.1"

這些插件還未下載，如果需要，可以運行:

npm install

把它們下載到本地

bower

npm install bower -g

package.json

{
  "engines": {
    "node": ">= 0.10.0"
  },
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-contrib-qunit": "~0.5.2",
    "grunt-contrib-concat": "~0.4.0",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

安裝bower

bower跟npm在某種意義上相似，它是用來管理常用的js庫的依賴的，比如jquery, underscore, angularjs等。

我們可以通過npm安裝它：

npm install bower -g

把它裝為全局工具

為bower生成配置文件bower.json

bower也有它自己的配置文件bower.json，我們不需要手動創(chuàng)建。

bower init

將會生成如下的bower.json:

{
  "name": "grunt-bower-angular-demo",
  "version": "0.0.0",
  "homepage": "https://github.com/freewind/grunt-bower-angular-demo",
  "authors": [
    "Peng Li <nowind_lee@qq.com>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

對于我們的項目來說，里面的東西基本上都沒用。有用的是后面將會出現(xiàn)的dependencies

下載requirejs、jquery、angularjs

bower insall requirejs --save
bower insall jquery --save
bower install angularjs --save

將會自動下載jquery到angularjs相應(yīng)的文件，到項目根目錄下的bower_components目錄。并在bower.json中添加：

"dependencies": {
  "angularjs": "~1.2.20",
  "jquery": "~2.1.1",
  "requirejs": "~2.1.14"
}

安裝grunt-bower-task

bower只負責把依賴下載到本地的bower_components目錄，并不負責把它們拷貝到我們項目中實際使用的地方，比如public/js/lib目錄下。

為了實現(xiàn)這樣的功能，我們還需要另一個插件的幫助：

npm install grunt-bower-task --save-dev

然后打開其文檔：https://www./package/grunt-bower-task ，按照上面的提示進行配置。

首先在Gruntfile中合適位置添加：

grunt.loadNpmTasks('grunt-bower-task');

然后在grunt.initConfig({...})參數(shù)中，添加相應(yīng)的配置項：

bower: {
    install: {
      options: {
        targetDir: './public/js/lib',
        layout: 'byComponent',
        install: true,
        verbose: false,
        cleanTargetDir: false,
        cleanBowerDir: false,
        bowerOptions: {}
      }
    }
  }

這里指定拷貝的目標目錄為public/js/lib，且文件按照模塊分成單個目錄(byComponent)。如果想把所有的js放在同一個目錄，所有的css文件放在同一個目錄，則使用byType

關(guān)于RequireJs

在前面我們已經(jīng)使用bower安裝了requirejs:

bower install requirejs

RequireJs可用來管理頁面中使用的js庫之間的依賴關(guān)系，可以按需、并行、延遲加載js庫。同時它可以讓我們以模塊化的形式組織js代碼。

強烈建議先了解RequireJs的運行原理再動手寫代碼，不然肯定會遇到各種坑。RequireJs的文檔寫得有點繞，可參考我的另一篇文章：TODO

配置RequireJs

前面我們第三方的依賴，通過grunt-bower-task拷貝到了public/js/lib目錄下。我們自己寫的js，將會放置在public/js目錄下。

我們需要手動創(chuàng)建一個config.js文件，用來配置和初始化requirejs。

在HTML中引入requirejs

如果我們使用了requirejs，則在HTML中，我們通常只需要一個<script src="http:///blog/20140727/..."></script>標簽引入requirejs并指定入口文件即可，而不需要寫多個script標簽手動加載其它js文件。

在HTML中合適位置加入：

<script src="http:///public/js/lib/requirejs/require.js" data-main="/public/js/config.js"></script>

這里首先加載了require.js，并通過data-main屬性告訴requirejs：當你加載完以后，請加載config.js文件進行初始化。

config.js

config.js內(nèi)容如下：

requirejs.config({
  baseUrl: '/public/js',
  paths: {
    app: 'app',
    jquery: 'lib/jquery/jquery',
    angular: 'lib/angularjs/angular'
  },
  shim: {
  }
});
requirejs(['app'], function(app) {
  app.hello();
});

我們在paths中聲明了幾個模塊，其中的app是我們自己創(chuàng)建的js文件，用于放我們自己的業(yè)務(wù)代碼，它對應(yīng)于/public/js/app.js. jquery與angular對應(yīng)的文件是我們使用grunt-bower-task拷貝過來的第三方j(luò)s庫。

shim中用來處理一些沒有遵守requirejs規(guī)范的js庫，比如underscore之類?？稍诶锩鎸λ鼈冞M行一些依賴聲明、初始化操作等。這里暫時用不上。

最后用requirejs來導(dǎo)入我們自己的模塊，可在后面的callback中拿到對應(yīng)模塊的實例，并對它進行一些操作，比如我們調(diào)用了app.hello()方法。

app.js

為了讓這個例子完整，我們可以定義相應(yīng)的app.js:

define([], function() {
  return {
    hello: function() {
      alert("hello, requirejs");
    }
  }
});

index.html

為了能讓例子跑起來，我們還需要創(chuàng)建一個public/index.html，內(nèi)容如下：

<html>
<head>
  <script src="http:///public/js/lib/requirejs/require.js" 
          data-main="/public/js/config.js"></script>
</head>
<body>
  <div>Hello, world!</div>
</body>
</html>

啟動 web server

進入項目根目錄，運行：

grunt bower

把bower下載的js庫拷貝到public/js/lib下。

然后啟動web server:

python -m SimpleHTTPServer

最后打開瀏覽器，訪問：

http://localhost:8000/public/index.html

如果一切正常的話，會看到彈出一個提示框，上面內(nèi)容為：

hello, requirejs

Angularjs

然后我們做一個簡單的angular的例子。

由于angularjs并不是按requirejs的模塊方式組織代碼的，我們需要在config.js中添加：

shim: {
    angular : { exports : 'angular'}
}

Angularjs會在全局域中添加一個名為angular的變量。我們必須在shim中顯式把它暴露出來，才能通過模塊注入的方式使用它，比如：

define(['angular'], function(ng) {
  // we can use argument `ng` instead of gloabl `angular` now
});

在index.html中添加angular代碼

<div ng-controller="MyController">
    <input type="text" ng-model="name" />
    <span>{{name}}</span>
</div>

準備相應(yīng)的controller

把app.js的內(nèi)容改為：

define(['angular'], function(angular) {
    angular.module('myApp', [])
      .controller('MyController', ['$scope', function ($scope) {
        $scope.name = 'Change the name';
      }]);
    angular.element(document).ready(function() {
      angular.bootstrap(document, ['myApp']);
    });
});

在這段代碼里，我定義了一個angularjs自己的模塊myApp，以及相應(yīng)的MyController。在后面，通過angular.bootstrap方法，把該模塊與document結(jié)合在了一起。

啟動web server，就可以看到效果了。當我們修改了頁面上輸入框里的內(nèi)容，它旁邊的文字也會跟著改變。

修改angularjs的占位符

在html中顯示angularjs里的一個字段時，我們使用{{}}來占位，比如：

<span>{{name}}</span>

如果我們同時使用了mustcahe模板，就會有沖突。我們可以更改angularjs的配置：

angular.module('myApp', []).config(function($interpolateProvider){
        $interpolateProvider.startSymbol('[[').endSymbol(']]');
    }
);

然后我們就可以寫成：

<span>[[name]]</span>

了.

項目代碼

上面的操作，都在這個項目中： https://github.com/freewind/grunt-bower-angular-demo

另外，關(guān)于requirejs/angularjs的結(jié)合使用，可以參看這個比較好的樣板項目： https://github.com/tnajdek/angular-requirejs-seed