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

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

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

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

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

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

各工具都相當(dāng)?shù)莫?dú)立

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

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

安裝nodejs

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

brew install node

Nodejs可以讓我們?cè)?span style="width: auto; height: auto;">服務(wù)器端使用javascript編程，它是很多js工具的基礎(chǔ)。如果你已經(jīng)安裝，請(qǐng)確保使用最新版本：

brew upgrade node

查看版本：

node -v

我這里顯示：

v0.10.28

npm

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

當(dāng)我們安裝好nodejs后，npm就自動(dòng)可用了。

查看版本：

npm -v

我這里顯示：

2.0.0-alpha-5

創(chuàng)建項(xiàng)目目錄

下面我們從零開(kāi)始，首先在任意位置新建一個(gè)目錄作為我們的項(xiàng)目根目錄，比如：

mkdir ~/myproject

然后進(jìn)入該目錄：

cd ~/myproject

后面的命令都將在項(xiàng)目根目錄下操作。

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

首先我們需要為npm提供一個(gè)package.json，告訴它我們的項(xiàng)目信息，特別是項(xiàng)目中將會(huì)使用的插件。我們不需要手動(dòng)創(chuàng)建，因?yàn)榭梢灾苯诱{(diào)用以下命令：

npm init

它會(huì)問(wèn)我們一些問(wèn)題，我們可以按需回答，也可以全部使用默認(rèn)值，反正以后可以改起來(lái)也很容易。

最后將會(huì)產(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"
  }
}

對(duì)于像我們這樣的非nodejs項(xiàng)目來(lái)說(shuō)，里面的大部分內(nèi)容都沒(méi)用，可以刪掉大部分，只剩下：

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

安裝 grunt

npm install grunt --save-dev

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

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

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

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

安裝 grunt-cli

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

npm install grunt-cli -g

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

安裝后，輸入:

grunt --version

我這里顯示為：

grunt-cli v0.1.13
grunt v0.4.5

在比較少的情況下，可能提示找不到grunt，則需要根據(jù)安裝grunt-cli時(shí)的提示信息，把相應(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ù)需要回答問(wèn)題，或者使用默認(rèn)值，將得到以下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ù)需要?jiǎng)h減一些用不上的。

它同時(shí)還會(huì)在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"

這些插件還未下載，如果需要，可以運(yùn)行:

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在某種意義上相似，它是用來(lái)管理常用的js庫(kù)的依賴的，比如jquery, underscore, angularjs等。

我們可以通過(guò)npm安裝它：

npm install bower -g

把它裝為全局工具

為bower生成配置文件bower.json

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

bower init

將會(huì)生成如下的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"
  ]
}

對(duì)于我們的項(xiàng)目來(lái)說(shuō)，里面的東西基本上都沒(méi)用。有用的是后面將會(huì)出現(xiàn)的dependencies

下載requirejs、jquery、angularjs

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

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

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

安裝grunt-bower-task

bower只負(fù)責(zé)把依賴下載到本地的bower_components目錄，并不負(fù)責(zé)把它們拷貝到我們項(xiàng)目中實(shí)際使用的地方，比如public/js/lib目錄下。

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

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

然后打開(kāi)其文檔：https://www./package/grunt-bower-task ，按照上面的提示進(jìn)行配置。

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

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

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

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

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

關(guān)于RequireJs

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

bower install requirejs

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

強(qiáng)烈建議先了解RequireJs的運(yùn)行原理再動(dòng)手寫(xiě)代碼，不然肯定會(huì)遇到各種坑。RequireJs的文檔寫(xiě)得有點(diǎn)繞，可參考我的另一篇文章：TODO

配置RequireJs

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

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

在HTML中引入requirejs

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

在HTML中合適位置加入：

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

這里首先加載了require.js，并通過(guò)data-main屬性告訴requirejs：當(dāng)你加載完以后，請(qǐng)加載config.js文件進(jìn)行初始化。

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();
});

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

shim中用來(lái)處理一些沒(méi)有遵守requirejs規(guī)范的js庫(kù)，比如underscore之類?？稍诶锩鎸?duì)它們進(jìn)行一些依賴聲明、初始化操作等。這里暫時(shí)用不上。

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

app.js

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

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

index.html

為了能讓例子跑起來(lái)，我們還需要?jiǎng)?chuàng)建一個(gè)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>

啟動(dòng) web server

進(jìn)入項(xiàng)目根目錄，運(yùn)行：

grunt bower

把bower下載的js庫(kù)拷貝到public/js/lib下。

然后啟動(dòng)web server:

python -m SimpleHTTPServer

最后打開(kāi)瀏覽器，訪問(wèn)：

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

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

hello, requirejs

Angularjs

然后我們做一個(gè)簡(jiǎn)單的angular的例子。

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

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

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

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>

準(zhǔn)備相應(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']);
    });
});

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

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

修改angularjs的占位符

在html中顯示angularjs里的一個(gè)字段時(shí)，我們使用{{}}來(lái)占位，比如：

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

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

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

然后我們就可以寫(xiě)成：

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

了.

項(xiàng)目代碼

上面的操作，都在這個(gè)項(xiàng)目中： https://github.com/freewind/grunt-bower-angular-demo

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