第一章：压缩js(nodejs,uglify)

第一步：安装nodejs环境

直接下载http://www.nodejs.org/download/

下载完成后直接下一步下一步即可，完了我们就具有nodeJS环境了

以下几步都有点忘了，下次试试吧：

第二步：新建一个package.json文件和Gruntfile.js文件

package.json文件内容：

 1 {
 2   "name": "qx_tjk_js",
 3   "version": "0.0.1",
 4   "devDependencies": {
 5     "grunt": "~0.4.1",
 6     "grunt-contrib-concat": "~0.1.1",
 7     "grunt-contrib-uglify": "~0.2.1",
 8     "grunt-contrib-watch": "~0.6.1",
 9     "grunt-html-build": "~0.3.2",
10     "grunt-css":   ">0.0.0"
11   }
12 }

View Code

"grunt-contrib-concat": "~0.1.1"：是用来合并的；"grunt-contrib-uglify": "~0.2.1"就是用来压缩js的；"grunt-contrib-watch": "~0.6.1"：用来配置监听，当文件触发保存时，会自动重新压缩这些文件；"grunt-css": ">0.0.0"是用来合并css文件的；"grunt-html-build": "~0.3.2"：是用来配合合并css的还是用来压缩html的，已经忘了（有时间可以试试）!!

Gruntfile.js文件内容：

 1 qxmenus的菜单服务（需要具有面向对象，可以在更多的项目中重用，不要写重复的代码）
 2
 3
 4 module.exports = function (grunt) {
 5     grunt.initConfig({
 6         pkg: grunt.file.readJSON('package.json'),
 7         concat: {
 8             jqueryModule: { // 1
 9                 src: ['../Scripts/lib/jquery/*.js'],
10                 dest: 'dist/jquery.module.<%= pkg.version %>.js'
11             },
12             bootstrapModule: { // 2
13                 src: ['../Scripts/lib/bootstrap/*.js'],
14                 dest: 'dist/bootstrap.module.<%= pkg.version %>.js'
15             },
16             qxlib: { // 3
17                 src: ['../Scripts/lib/qxlib/*.js'],
18                 dest: 'dist/qx.lib.<%= pkg.version %>.js'
19             },
20             angularModule: { // 4
21                 src: ['../Scripts/lib/angular/*.js'],
22                 dest: 'dist/angular.module.<%= pkg.version %>.js'
23             },
24             qxAngularModule: { // 5
25                 src: ['../Scripts/tjk/comm/*.js',
26                       '!../Scripts/tjk/comm/socket.io.js',
27                       '!../Scripts/tjk/comm/qx.service.socket.js'
28                 ],
29                 dest: 'dist/qx.angular.module.<%= pkg.version %>.js'
30             },
31             noLoginedJs: {
32                 src: [...],
33                 dest: 'dist/qx.tjk.login.<%= pkg.version %>.js'
34             },
35             memberCenterJs: {
36                 src: [...],
37                 dest: 'dist/qx.tjk.center.<%= pkg.version %>.js'
38             }
39         },
40         uglify: {
41             common: { // 公共的js
42                 src: ['dist/jquery.module.<%= pkg.version %>.js',
43                       'dist/bootstrap.module.<%= pkg.version %>.js',
44                       'dist/qx.lib.<%= pkg.version %>.js',
45                       'dist/angular.module.<%= pkg.version %>.js',
46                       'dist/qx.angular.module.<%= pkg.version %>.js'
47                 ],
48                 dest: 'dist/tjk.common-min.<%= pkg.version %>.js'
49             },
50             nologined: { // 未登录的相关页面
51                 src: 'dist/qx.tjk.login.<%= pkg.version %>.js',
52                 dest: 'dist/tjk.nologined-min.<%= pkg.version %>.js'
53             },
54             logined: { // 登录后的相关页面
55                 src: 'dist/qx.tjk.center.<%= pkg.version %>.js',
56                 dest: 'dist/tjk.logined-min.<%= pkg.version %>.js'
57             }
58         },
59         watch: {
60             options: {
61                 livereload: true
62             },
63             grunt: {
64                 files: ['Gruntfile.js']
65             },
66             styles: {
67                 files: ['../Components/*/js/*.js', '../Scripts/lib/*/*.js', '../Scripts/tjk/*/*.js'],
68                 tasks: ['concat', 'uglify'],
69                 options: {
70                     nospawn: true
71                 }
72             }
73         }
74     });
75
76     // 载入concat和css插件，分别对于合并和压缩
77     grunt.loadNpmTasks('grunt-contrib-concat');
78     grunt.loadNpmTasks('grunt-contrib-uglify');
79     grunt.loadNpmTasks('grunt-contrib-watch');
80     grunt.loadNpmTasks('grunt-css');
81     // 默认任务
82     grunt.registerTask('default', ['watch']);
83     grunt.registerTask('default', ['concat', 'uglify']);
84
85 };

View Code

contact下面的对象是用来合并的配置，名字是可以随便取的；同理，uglify下面的对象是用来压缩前面合并的js文件的名字也是随便取；watch...不解释了。

第三步：构建模块文件夹

新建一个文件夹：D:\blog，然后把上一步新建的两个文件放进来。运行>cmd，然后引导到D:\blog，先执行安装命令：npm install（它会根据package.json里面的配置，自己导入需要的包）。如果npm install 失败了，，，我忘了，有时间再找台新电脑试试这些步骤

如果npm install 平台度过，就只需根据需要配置grunt.js里面配置，再执行：cmd>grunt就Ok了厄~~

注意：最开始安装的时候，nodejs的安装目录是指向到C盘User目录下面的（当然这个看你怎么配置的，具体怎么配的，忘了！）。所有的-g安装的包，也就全部都在那个目录下面了。

但通常情况下，项目都会随意放在其他盘里，于是基于这些包的安装，必须先引导到你的项目的目录下面去执行安装命令（npm install）。

第二章：安装karma和jasmine

如果上面的node环境安装好了，这几个就很简单了。

第一步：安装karma

执行安装命令：npm install karma -g(一般不需要-g，如果你项目不是放在默认目录里的话)

安装时提示：npm varn optional dep failed, continuing...        执行karma start：提示karma不是内部或外部命令

网上查资料，必须在全局安装“karma-cli”：npm install -g karma-cli

# 测试是否安装成功
~ D:\workspace\javascript\karma>karma start
INFO [karma]: Karma v0.10.2 server started at http://localhost:9876/
INFO [Chrome 28.0.1500 (Windows 7)]: Connected on socket nIlM1yUy6ELMp5ZTN9Ek自动打开浏览器，并看到karam界面，就说明安装成功了。

第二步：初始化karma并安装jasmine

初始化karma配置文件karma.conf.js(在安装完karma时，一直提示：no provider for framework:jasmine... 错误。后台经人指点，进行了karma的初始化，才OK[这是一个坑啊~~])

~ D:\workspace\javascript\karma>karma initWhich testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmineDo you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> noDo you want to capture a browser automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
>Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yesConfig file generated at "D:\workspace\javascript\karma\karma.conf.js".

安装集成包karma-jasmine

~ D:\workspace\javascript\karma>npm install karma-jasmine

第三步：实现自动化测试

3步准备工作：

• 1. 创建源文件：用于实现某种业务逻辑的文件，就是我们平时写的js脚本
• 2. 创建测试文件：符合jasmineAPI的测试js脚本
• 3. 修改karma.conf.js配置文件(这个配置文件要放在项目根目录下面)

1). 创建源文件：用于实现某种业务逻辑的文件，就是我们平时写的js脚本
有一个需求，要实现单词倒写的功能。如：”ABCD” ==> “DCBA”

~ vi src.js
function reverse(name){return name.split("").reverse().join("");
}

2). 创建测试文件：符合jasmineAPI的测试js脚本

describe("A suite of basic functions", function() {it("reverse word",function(){expect("DCBA").toEqual(reverse("ABCD"));});
});

3). 修改karma.conf.js配置文件(这个配置文件要放在项目根目录下面)
我们这里需要修改：files和exclude变量

module.exports = function (config) {config.set({basePath: '',frameworks: ['jasmine'],files: ['souce/1.js','test/1.js','*.js'],exclude: ['karma.conf.js'],reporters: ['progress'],port: 9876,colors: true,logLevel: config.LOG_INFO,autoWatch: true,browsers: ['Chrome'],captureTimeout: 60000,singleRun: false});
};

启动karma
单元测试全自动执行

~ D:\workspace\javascript\karma>karma start karma.conf.js
INFO [karma]: Karma v0.10.2 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
WARN [launcher]: The path should not be quoted.Normalized the path to C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
INFO [Chrome 28.0.1500 (Windows 7)]: Connected on socket bVGffDWpc1c7QNdYye_6
INFO [Chrome 28.0.1500 (Windows 7)]: Connected on socket DtTdVbd4ZsgnMQrgye_7
Chrome 28.0.1500 (Windows 7): Executed 1 of 1 SUCCESS (3.473 secs / 0.431 secs)
Chrome 28.0.1500 (Windows 7): Executed 1 of 1 SUCCESS (0.068 secs / 0.021 secs)
TOTAL: 2 SUCCESS

第三章：安装JSDuck

第一步：安装Ruby

Ruby下载地址：http://rubyinstaller.org/downloads/，下载的文件如下：

ruby-2.0.0-p645-i386-mingw32.7zDevKit-mingw64-32-4.7.2-20130224-1151-sfx.exe

第二步：安装Development Kit

1、将DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe解压到指定目录，原文的作者在ruby的安装目录中新建了个叫dev的文件夹，然后解压到dev里面的。

2、使用批处理程序生成config.yml，下面是使用的批处理程序：

1 cd /d D:\Ruby200\dev
2 ruby dk.rb init

3、修改config.yml的内容

 1 # This configuration file contains the absolute path locations of all2 # installed Rubies to be enhanced to work with the DevKit. This config3 # file is generated by the 'ruby dk.rb init' step and may be modified4 # before running the 'ruby dk.rb install' step. To include any installed5 # Rubies that were not automagically discovered, simply add a line below6 # the triple hyphens with the absolute path to the Ruby root directory.7 #8 # Example:9 #
10 # ---
11 # - C:/ruby19trunk
12 # - C:/ruby192dev
13 #
14 ---
15 - D:\Ruby200

我修改成：D:\Ruby200这个目录后，反而后面抛出这些异常，不修改（原为：C:\Ruby200），则可以继续下去，那么这个目录即是指：安装ruby的目录

1 Unable to find rubygems in site_ruby or core ruby ...
2
3 the rdiscount native gem requires installed build tools...
4
5 optparse.rb 346 in 'match' invalid byte sequence in...

4、使用批处理执行安装，下面是使用的批处理程序：

1 cd /d D:\Ruby200-x64\dev
2 ruby dk.rb install

注：cd /d D:\Ruby200-x64\dev 这应该都是引导到devkit的解压目录中执行的命令

第三步：安装rdiscount和jsduck

执行如下批处理程序：

gem install rdiscountgem install jsduck

第四步：生成api文档

新建配置文件extjs-conf.json，内容如下：

{"--": "extjs/src","--warnings": ["-no_doc:extjs/src","-no_doc_member:extjs/src","-link:extjs/src","-type_name:extjs/src"],"--ignore-html": ["locale","debug"],"--images": "extjs/docs/images","--output":"docsIV"
}

View Code

执行命令：

jsduck --config extjs-conf.json

插曲：最开始不知道何种原因，执行时始终抛出如下异常：

但是单独执行某一个文件的压缩时，却是可以的。后来从网上重新找来一个ext-conf.json的文件，才能够正常执行这个命令(jsduck --config extjs-conf.json)。还有可能，我是在jsduck目录下执行的（在根目录下执行时正常）。总结原因，可能两个都有，也可能是其中一个原因：1、ext-conf.json内容有问题；2、ext-conf.json配置文件应该放在根目录下面，并要在根目录下执行命令

第四章：搭建Express Web框架

搭建Express web 框架

安装express：npm install express -g

安装命令工具：npm install -g express-generator

OK，输入express -V(大写)，打印版本号出来，就完成了。

用模板构建一个项目：express xxxx

安装相关依赖：cd xxxx && npm install

构建成功后，启动：npm start

然后，在浏览器中输入：http://localhost:3000/ 会出现Welcome to express，就说明完成了。