|
現(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è)試、打包等。它的專(zhuān)長(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è)試、依賴(lài)管理等，都需要有相應(yīng)的工具支持，所以最后引入了這么一整套工具：
- Grunt – Js任務(wù)管理工具，通過(guò)各種插件對(duì)項(xiàng)目進(jìn)行各種操作，比如文件轉(zhuǎn)換、運(yùn)行測(cè)試、打包部署等。相當(dāng)于java里的ant/maven/gradle，ruby中的rack，scala中的sbt。
- Bower – Js庫(kù)依賴(lài)管理工具。當(dāng)你需要jquery時(shí)，不需要手動(dòng)下載，只需要執(zhí)行
bower install jquery
- RequireJs – Js庫(kù)加載管理，及模塊化支持?？梢园葱杓安⑿屑虞djs庫(kù)，可以把我們的代碼以模塊化的方式組織。
- AngularJs – Js前端框架，支持依賴(lài)注入，雙向綁定等我認(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官方提供的包依賴(lài)管理工具。我們下面使用的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里添加上這些插件的依賴(lài)：
"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ù)的依賴(lài)的，比如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é)把依賴(lài)下載到本地的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ù)之間的依賴(lài)關(guān)系，可以按需、并行、延遲加載js庫(kù)。同時(shí)它可以讓我們以模塊化的形式組織js代碼。
強(qiáng)烈建議先了解RequireJs的運(yùn)行原理再動(dòng)手寫(xiě)代碼，不然肯定會(huì)遇到各種坑。RequireJs的文檔寫(xiě)得有點(diǎn)繞，可參考我的另一篇文章：TODO
配置RequireJs
前面我們第三方的依賴(lài)，通過(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之類(lèi)。可在里面對(duì)它們進(jìn)行一些依賴(lài)聲明、初始化操作等。這里暫時(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)瀏覽器，訪(fǎng)問(wèn)：
http://localhost:8000/public/index.html
如果一切正常的話(huà)，會(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
|
