javascript编译环境搭建

1. 安装nodejs作为js的编译和运行环境

</pre><pre name="code" class="python"> wget https://nodejs.org/dist/v5.9.0/node-v5.9.0-x86.msi

注意根据自己的机器环境下载32位或者64位的版本

2. 安装npm，相当于js的rpm包管理工具

git clone --recursive git://github.com/isaacs/npm.git  

在node命令行中执行

node cli.js install npm -gf  

3.安装grunt，相当于javascript的make工具

npm install -g grunt-cli

接着安装各种插件

npm install grunt-cmd-transport --save-devnpm install grunt-cmd-concat --save-devnpm install grunt-include-replace --save-devnpm install grunt-contrib-clean --save-devnpm install grunt-contrib-copy --save-devnpm install grunt-contrib-watch --save-devnpm install grunt-contrib-uglify --save-devnpm install grunt-filerev --save-devnpm install grunt-usemin --save-devnpm install grunt-contrib-less --save-dev

4.编辑package.json，定义了js包的版本

{  "name": "video",  "version": "0.1.0",  "devDependencies": {    "copy": "0.0.1",    "grunt": "^0.4.5",    "grunt-cmd-concat": "^0.2.7",    "grunt-cmd-transport": "^0.4.1",    "grunt-contrib-clean": "^0.6.0",    "grunt-contrib-copy": "^0.5.0",    "grunt-contrib-less": "^0.11.4",    "grunt-contrib-uglify": "^0.5.1",    "grunt-contrib-watch": "^0.6.1",    "grunt-filerev": "^2.0.0",    "grunt-filerev-replace": "^0.1.1",    "grunt-html-build": "*",    "grunt-include-replace": "^2.0.0",    "grunt-usemin": "^2.4.0"  }}

5.gruntfile.js，相当于makefile

module.exports = function(grunt) {  'use strict';  grunt.initConfig({    fixturesPath: ".",    includereplace: {      dist: {        options: {          // Task-specific options go here.        },        src: ['htmlSrc/**/*.html', 'htmlSrc/*.html'],        dest: '.html/'      }    },    copy: {      html: {        files: [{          expand: true,          cwd: '.html/htmlSrc/',          src: ['*.html'],          dest: '../views/'        }]      },      js: {        files: [{          expand: true,          cwd: '.build/jsSrc/',          src: ['jsSrc/**/*.js', '!init/*-debug.js'],          dest: 'js/'        }]      },      less: {        files: [{          expand: true,          cwd: '.css/init/',          src: ['*.css'],          dest: 'css/'        }]      }    },    uglify: {      options: {        banner: '/*<%= grunt.template.date(new Date(),"yyyy-mm-dd HH:MM:ss") %> */\n',        beautify: {          ascii_only: true // 转义non-ascii字符        }      },      js: {        files: [{          expand: true,          cwd: '.build/',          src: ['jsSrc/init/**/*.js', '!jsSrc/init/**/*-debug.js'], // 压缩除debug文件          dest: 'js/',          ext: '.js'        }]      },    },    transport: {      options: {        idleading: ''      },      all: {        files: {          '.build': [            'jsSrc/**/*.js',            '!node_modules/**/*.js'          ]        }      }    },    concat: {      main: {        options: {          include: 'all'        },        files: [{          expand: true,          cwd: '.build/',          src: ['jsSrc/init/*.js', 'jsSrc/init/**/*.js'], // 合并所有js/任意/page/的所有js文件          dest: '.build/',          ext: '.js'        }]      }    },    less: {      active: {        files: [{          expand: true,          cwd: 'less/',          src: [            "**/*.less"          ],          dest: '.css',          ext: '.css'        }]      }    },    watch: {      options: {        // event: ["changed"],        // debounceDelay: 250      },      html_active: {        files: [          'htmlSrc/**/*.html',          'html/**/*.html'        ],        tasks: ['includereplace:dist', 'copy', 'clean']      },      lessss: {        files: [          'less/**/*.less'        ],        tasks: ['less', 'copy:less']      },      js: {        files: [          'jsSrc/**/*.js', 'jsSrc/*.js'        ],        tasks: ['clean', 'transport', 'concat', 'uglify', 'clean']      }    },    filerev: {      options: {        algorithm: 'md5',        length: 8      },      js: {        src: ['.build/jsSrc/init/*.js', '!.build/jsSrc/init/*-debug.js']      }    },    usemin: {      html: '.html/htmlSrc/*.html',      options: {        blockReplacements: {          filerev: function(block) {            // return '<link rel="stylesheet" href="' + block.dest + '">';            return '<script type="text/javascript" src="'+ block.dest +'"> </script>';          }        }      }    },    clean: {      dest: ['<%= fixturesPath %>/.html/', '.build', '.css']    }  });  grunt.loadNpmTasks('grunt-cmd-transport');  grunt.loadNpmTasks('grunt-cmd-concat');  grunt.loadNpmTasks('grunt-include-replace');  grunt.loadNpmTasks('grunt-contrib-clean');  grunt.loadNpmTasks('grunt-contrib-copy');  grunt.loadNpmTasks('grunt-contrib-watch');  grunt.loadNpmTasks('grunt-contrib-uglify');  grunt.loadNpmTasks('grunt-filerev');  grunt.loadNpmTasks('grunt-usemin');  grunt.loadNpmTasks('grunt-contrib-less');  //'copy','clean','less','copy:less'  grunt.registerTask('default', ['clean', 'transport', 'concat', 'uglify', 'includereplace', 'filerev', 'usemin','clean']);  grunt.registerTask('watch_html', ['watch']);  grunt.registerTask('lessss', ['less', 'copy:less', 'clean']);}

6. 在static目录下，执行grunt，编译生成js压缩文件

7. 下载nginx 1.4.0版本

修改配置nginx/conf/nginx.conf，并且修改C:\Windows\System32\drivers\etc\hosts

把测试环境的域名映射为127.0.0.1.启动nginx后，访问http://zc-stage1-miui-ad01.bj:8090/miui_ad_statistic-0.0.1/AdStatistic/ad_tv

hosts把zc-stage1-miui-ad01.bj映射到本机.nginx收到8090的请求，把url改为本地的js文件，再把ajax请求转发到测试环境的zc-stage1-miui-ad01.bj:8090。

这样本地修改js文件后，不需要编译发布到线上，就可以看效果。大大加快开发效率。

worker_processes  1;events {    worker_connections  1024;}http {    include       mime.types;    default_type  application/octet-stream;    server_names_hash_bucket_size 64;    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '                      '$status $body_bytes_sent "$http_referer" '                      '"$http_user_agent" "$http_x_forwarded_for"';    access_log  logs/access.log  main;    sendfile        on;    keepalive_timeout  65;    server {        listen       80;        server_name  localhost;        location / {            root   html;            index  index.html index.htm;        }        error_page   500 502 503 504  /50x.html;        location = /50x.html {            root   html;        }    }server {        listen      80;        server_name lbw.mi.com abc.lbw.com;        access_log  /opt/logs/$server_name.access.log  main;                location / {                root D:\\work\\;                expires -1;        }         }    upstream js222 {        server 10.99.168.58:8090;    }    server {        listen      8090;        server_name zc-stage1-miui-ad01.bj;        access_log  /opt/logs/$server_name.access.log  main;                location /miui_ad_statistic-0.0.1/static/ {root D:\\Users\\xiaomi\\git\\miui_ad\\miui_ad_statistic\\src\\main\\webapp\\;                rewrite  ^/miui_ad_statistic-0.0.1/(.*?\/)*?js/jsSrc/(.*\/)*(.*)\.js$   $1/jsSrc/$2$3.js break;                rewrite  ^/miui_ad_statistic-0.0.1/(.*\/)*/js/(.*\/)*(.*)\.js$   $1/js/$2$3.js break;                rewrite  ^/miui_ad_statistic-0.0.1/static/css/(.*\/)*(.*)\.css$   static/css/$1$2.css break;                rewrite  ^/miui_ad_statistic-0.0.1/static/img/(.*\/)*(.*)\.(.*)$   static/img/$1$2.$3 break;                rewrite  ^/miui_ad_statistic-0.0.1/static/(.*\/)*(.*)\.(.*)$   static/$1$2.$3 break;                expires -1;        }        location /miui_ad_statistic-0.0.1/AdStatistic/PageView {root D:\\Users\\xiaomi\\git\\miui_ad\\miui_ad_statistic\\src\\main\\webapp\\;                rewrite  ^/miui_ad_statistic-0.0.1/AdStatistic/PageView$   views/ad_statistic_view.html break;rewrite  ^/miui_ad_statistic-0.0.1/AdStatistic/ad_tv$   views/ad_tv.html break;                expires -1;                                        }        location /miui_ad_statistic-0.0.1/AdStatistic/ad_tv {root D:\\Users\\xiaomi\\git\\miui_ad\\miui_ad_statistic\\src\\main\\webapp\\;rewrite  ^/miui_ad_statistic-0.0.1/AdStatistic/ad_tv$   views/ad_tv.html break;                expires -1;                                        }        location /miui_ad_statistic-0.0.1/ad_tv {root D:\\Users\\xiaomi\\git\\miui_ad\\miui_ad_statistic\\src\\main\\webapp\\;rewrite  ^/miui_ad_statistic-0.0.1/AdStatistic/ad_tv$   views/ad_tv.html break;                expires -1;                                        }        location / {                 proxy_pass http://js222;                 include proxy.conf;        }     }}