JS相关环境搭建：Nodejs、karma测试框架、jsDuck、Express

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

第一步：安装nodejs环境

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

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

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

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

package.json文件内容：

 {
   "name": "qx_tjk_js",
   "version": "0.0.1",
   "devDependencies": {
     "grunt": "~0.4.1",
     "grunt-contrib-concat": "~0.1.1",
     "grunt-contrib-uglify": "~0.2.1",
     "grunt-contrib-watch": "~0.6.1",
     "grunt-html-build": "~0.3.2",
     "grunt-css":   ">0.0.0"
   }
 }

"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文件内容：

 qxmenus的菜单服务（需要具有面向对象，可以在更多的项目中重用，不要写重复的代码）

 module.exports = function (grunt) {
     grunt.initConfig({
         pkg: grunt.file.readJSON('package.json'),
         concat: {
             jqueryModule: { //
                 src: ['../Scripts/lib/jquery/*.js'],
                 dest: 'dist/jquery.module.<%= pkg.version %>.js'
             },
             bootstrapModule: { //
                 src: ['../Scripts/lib/bootstrap/*.js'],
                 dest: 'dist/bootstrap.module.<%= pkg.version %>.js'
             },
             qxlib: { //
                 src: ['../Scripts/lib/qxlib/*.js'],
                 dest: 'dist/qx.lib.<%= pkg.version %>.js'
             },
             angularModule: { //
                 src: ['../Scripts/lib/angular/*.js'],
                 dest: 'dist/angular.module.<%= pkg.version %>.js'
             },
             qxAngularModule: { //
                 src: ['../Scripts/tjk/comm/*.js',
                       '!../Scripts/tjk/comm/socket.io.js',
                       '!../Scripts/tjk/comm/qx.service.socket.js'
                 ],
                 dest: 'dist/qx.angular.module.<%= pkg.version %>.js'
             },
             noLoginedJs: {
                 src: [...],
                 dest: 'dist/qx.tjk.login.<%= pkg.version %>.js'
             },
             memberCenterJs: {
                 src: [...],
                 dest: 'dist/qx.tjk.center.<%= pkg.version %>.js'
             }
         },
         uglify: {
             common: { // 公共的js
                 src: ['dist/jquery.module.<%= pkg.version %>.js',
                       'dist/bootstrap.module.<%= pkg.version %>.js',
                       'dist/qx.lib.<%= pkg.version %>.js',
                       'dist/angular.module.<%= pkg.version %>.js',
                       'dist/qx.angular.module.<%= pkg.version %>.js'
                 ],
                 dest: 'dist/tjk.common-min.<%= pkg.version %>.js'
             },
             nologined: { // 未登录的相关页面
                 src: 'dist/qx.tjk.login.<%= pkg.version %>.js',
                 dest: 'dist/tjk.nologined-min.<%= pkg.version %>.js'
             },
             logined: { // 登录后的相关页面
                 src: 'dist/qx.tjk.center.<%= pkg.version %>.js',
                 dest: 'dist/tjk.logined-min.<%= pkg.version %>.js'
             }
         },
         watch: {
             options: {
                 livereload: true
             },
             grunt: {
                 files: ['Gruntfile.js']
             },
             styles: {
                 files: ['../Components/*/js/*.js', '../Scripts/lib/*/*.js', '../Scripts/tjk/*/*.js'],
                 tasks: ['concat', 'uglify'],
                 options: {
                     nospawn: true
                 }
             }
         }
     });

     // 载入concat和css插件，分别对于合并和压缩
     grunt.loadNpmTasks('grunt-contrib-concat');
     grunt.loadNpmTasks('grunt-contrib-uglify');
     grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.loadNpmTasks('grunt-css');
     // 默认任务
     grunt.registerTask('default', ['watch']);
     grunt.registerTask('default', ['concat', 'uglify']);

 };

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 init

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do 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.
> no

Do 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.
> yes

Config 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.-p645-i386-mingw32.7z

DevKit-mingw64--4.7.---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 all
 2 # installed Rubies to be enhanced to work with the DevKit. This config
 3 # file is generated by the 'ruby dk.rb init' step and may be modified
 4 # before running the 'ruby dk.rb install' step. To include any installed
 5 # Rubies that were not automagically discovered, simply add a line below
 6 # 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 rdiscount
gem 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"
}

执行命令：

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，就说明完成了。