# 开发环境配置说明文档 ## 需要的东西 * node/npm * compass(compass依赖ruby,需使用gem install compass进行安装) * git * PHP5.3 * Nginx ## 步骤 ### NODE安装 [node官方](https://nodejs.org/en/)下载后安装即可 ### SPM安装 项目使用spm作为前端资源调试、打包的工具,通过npm安装。注意:spm版本统一使用**3.4.1** `npm install -g spm@3.4.1` ### ruby->compass安装 [ruby官方Downloads](https://www.ruby-lang.org/en/downloads/)下载安装 任务栏打开 `Start Command Prompt With Ruby`,运行 `gem install compass`安装 PS:此步可能由于国外源的问题下载比较慢,可以更换源或者直接copy他人目录 ### 安装GIT [GIT官方](http://git-scm.com/download/) ### GIT账号 * [git.dev.yoho.cn](git.dev.yoho.cn)注册git账号 * 将注册的账号告知组长,开放权限 * 配置git账号给`git config --global user.name "your name"` / `git config --global user.email "your email"` * 在GIT BASH中运行`ssh-keygen -t rsa -C "your email"`,将~/.ssh目录下的pubkey的内容copy到git.dev.yoho.cn中的SSH Keys中 ### 拉取代码 * git clone git@git.dev.yoho.cn:web/yohobuy.git * git checkout develop * git submodule init * git submodule update ### PHP和Nginx 如果不想自己搭建和配置,直接copy同桌的目录来就可以了,nginx和php5.3.29。copy后修改nginx配置中的路径就可以了: conf/vhosts,nginx注册表文件,restart-nginx.bat, start-nginx.bat, start-php5.3.29.bat 修改完成后可以直接点击start-php5.3.29.bat 和 start-nginx.bat启动PHP和NGINX的服务 PS: nginx的vhost配置参考附件 ### 配置HOSTS #### H5 127.0.0.1 m.dev.yohobuy.com 127.0.0.1 static.m.dev.yohobuy.com #### WEB 127.0.0.1 web.dev.yohobuy.com 127.0.0.1 webstatic.dev.yohobuy.com ### 最后一步 进入yohobuy/static目录,运行npm install 和 spm install(需要先`spm config set registry http://spm.yoho.cn`将源指定到我们自己的包仓库)安装下依赖, 成功后在当前目录运行`gulp`启动开发环境服务...看看[m.dev.yohobuy.com](m.dev.yohobuy.com)有没有反应? Done ? 'congratulations' : '看看是不是缺了什么,不能解决的时候再问问其他人看看' ## 其他你需要做的事情 * js代码风格严格控制,所以请按照[代码规范](http://git.dev.yoho.cn/web/learning-documentation/tree/master/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E7%9B%B8%E5%85%B3/%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83)编码,JS代码采用了pre-commit的hook进行控制,之前需要你安装下[代码检查](http://git.dev.yoho.cn/ued/yoho-fe/tree/master/code-checker)所需要的东西,请了解并执行。 * GIT使用规范你需要熟读,可以看[git flow](http://git.dev.yoho.cn/web/learning-documentation/wikis/home)、[pro git](http://git-scm.com/book/en/v2) * 其他开发中使用到的东西(handlebars,sass,seajs,spm等)请参考git库web/learing documentation或者自行google ## FE开发规则 * HTML请包裹`<div class="your-page yoho-page"></div>` * css请包裹 `.your-page{...}`,防止样式污染 * 数据结构需及时更新维护至docs/data-structure.md和docs/web-data-structure.md ## 附:Nginx配置 ``` server { listen 80; server_name m.dev.yohobuy.com *.dev.yohobuy.com; #access_log /nginx/logs/access_test_yoho_cn.log combined; error_log F:/nginx/logs/error_test_yoho_cn.log warn; root F:/yohobuy/yohobuy/m.yohobuy.com/public; # https #ssl on; #ssl_certificate //nginx/data/server.pem; #ssl_certificate_key /nginx/data/server.key; #ssl_session_timeout 10m; location / { index index-dev.php; if (!-f $request_filename){ rewrite ^/(.+)$ /index-dev.php?$1& last; } } location ~ .*\.php?$ { fastcgi_pass 127.0.0.1:9000; fastcgi_index index-dev.php; #fastcgi_param PATH_INFO $fastcgi_script_name; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; } } server { listen 80; server_name static.dev.yohobuy.com; #access_log /nginx/logs/access_test_yoho_cn.log combined; #error_log /nginx/logs/error_test_yoho_cn.log warn; root F:/yohobuy/static; # https #ssl on; #ssl_certificate //nginx/data/server.pem; #ssl_certificate_key /nginx/data/server.key; #ssl_session_timeout 10m; location / { expires 1h; } location ~* \.(svg|eot|ttf|woff|otf)$ { add_header Access-Control-Allow-Origin *; expires 30d; } } server { listen 80; server_name web.dev.yohobuy.com *.dev.yohobuy.com; #access_log /nginx/logs/access_test_yoho_cn.log combined; error_log F:/nginx/logs/error_test_yoho_cn.log warn; root F:/yohobuy/yohobuy/www.yohobuy.com/public; # https #ssl on; #ssl_certificate //nginx/data/server.pem; #ssl_certificate_key /nginx/data/server.key; #ssl_session_timeout 10m; location / { index index-dev.php; if (!-f $request_filename){ rewrite ^/(.+)$ /index-dev.php?$1& last; } } location ~ .*\.php?$ { fastcgi_pass 127.0.0.1:9000; fastcgi_index index-dev.php; #fastcgi_param PATH_INFO $fastcgi_script_name; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; } } server { listen 80; server_name webstatic.dev.yohobuy.com; #access_log /nginx/logs/access_test_yoho_cn.log combined; #error_log /nginx/logs/error_test_yoho_cn.log warn; root F:/yohobuy/web-static; # https #ssl on; #ssl_certificate //nginx/data/server.pem; #ssl_certificate_key /nginx/data/server.key; #ssl_session_timeout 10m; location / { expires 1h; } location ~* \.(svg|eot|ttf|woff|otf)$ { add_header Access-Control-Allow-Origin *; expires 30d; } } ```