概述
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-clinpm install grunt-cmd-transport --save-dev
npm install grunt-cmd-concat --save-dev
npm install grunt-include-replace --save-dev
npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-filerev --save-dev
npm install grunt-usemin --save-dev
npm install grunt-contrib-less --save-dev{
"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"
}
}
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']);
}7. 下载nginx 1.4.0版本
修改配置nginx/conf/nginx.conf，并且修改C:WindowsSystem32driversetchosts
把测试环境的域名映射为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;
}
}
}
最后
以上就是唠叨八宝粥为你收集整理的javascript编译环境搭建的全部内容，希望文章能够帮你解决javascript编译环境搭建所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复