第一章：压缩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 }
"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 };
contact下面的对象是用来合并的配置，名字是可以随便取的；同理，uglify下面的对象是用来压缩前面合并的js文件的名字也是随便取；watch...不解释了。
第三步：构建模块文件夹
新建一个文件夹：D:log，然后把上一步新建的两个文件放进来。运行>cmd，然后引导到D:log，先执行安装命令：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:workspacejavascriptkarma>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:workspacejavascriptkarma>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:workspacejavascriptkarmakarma.conf.js".
安装集成包karma-jasmine
~ D:workspacejavascriptkarma>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:workspacejavascriptkarma>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)GoogleChromeApplicationchrome.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.7z DevKit-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:Ruby200dev 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-x64dev 2 ruby dk.rb install
注：cd /d D:Ruby200-x64dev 这应该都是引导到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，就说明完成了。