efes

概述 Overview

e代驾前端助手 edaijia fe assistant

efes的git commit检测规则中，eslint、csslint，和图片必须add提交为强制检测，error将导致提交失败。version字符串检测只做提示，供开发人员参考。

本助手是在前端自动化工具 gsp 的基础上做的定制开发。后期对整个结构做了重构，采用类REST风格，每个命令作为一个独立的模块（放置在commonds目录下，通过load自动加载）。在此感谢 gsp 的开发者 viclm

准备 Prepare

1 安装环境 Requirements

• node 4.1.0+ 下载地址：http://npm.taobao.org/mirrors/node
• python 2.x
• nginx

2 安装/更新 Install/Update

~ npm install -g efes

开始 Getting Started

1 创建工作目录 Create The Work Space

1.1 创建目录 Mkdir

~ mkdir WorkspaceEfes

1.2 创建『efesproject.json』配置文件 Create The Config File "efesproject.json"

~ touch efesproject.json
~ vim efesproject.json

这里只是一个简单的示例，详细文档查看下面对efesproject.josn的说明。

{
  "global": {
    "git": {
      "host": "https://github.com/",
      "config": {
        "user.name": "your_github_user_name",
        "user.email": "your_github_user_email"
      },
      "branch": {
        "local": "master",
        "remote": "origin/master"
      }
    },
    "domain": {
      "publish": "static.resource.com",
      "dev": "static.test.resource.ccom"
    }
  },
  "projects": [{
    "name": "wap",
    "git": {
      "repo": "edaijia-fe/efes-exp-wap"
    },
    "rewrite": {
      "root": "efes-exp-wap/main",
      "request": "/"
    },
    "domain": {
      "publish": "wap.efes.com",
      "dev": "wap.test.efes.com"
    }
  }, {
    "name": "www",
    "git": {
      "repo": "edaijia-fe/efes-exp-www"
    },
    "rewrite": {
      "root": "efes-exp-www",
      "request": "/"
    },
    "domain": {
      "publish": "www.efes.com",
      "dev": "www.test.efes.com"
    }
  }]
}

1.3 拉去git仓库 Clone Git Repositorys

~ efes project

1.4 配置nginx Config Nginx

参照 nginx的配置

1.5 配置hosts Config hosts

参照 hosts的配置

1.6 运行『efes start』 Run "efes start"

由于加载的东西比较多，所以启动比较慢...... ○|￣|_

出现下面提示，表示已经启动成功

~ efes start
正在启动efes本地代理服务...
启动成功，监听端口： 7070
/

访问一个地址，看看效果。

2 创建新项目 Build A New Efes Project

2.1 初始化/脚手架生成项目 Init/Scaffold

~ cd WorkspaceEfes
~ mkdir firstefes
~ cd firstefes
~ efes init

或在 www.efes.com这个下面建一个子项目，相应的后面的域名、访问路径也会随之修改。

~ cd WorkspaceEfes
~ cd efes-exp-www
~ mkdir firstefes
~ cd firstefes
~ efes init

按提示填写答案，在选择『使用脚手架生成文件结构』时，选择『 NO 』。

如下显示：

~ firstefes efes init
此操作会根据下面的问题，为efes项目在当前目录创建三个配置文件：
.eslintrc: eslint检测规则，同时也是Sublime的插件Sublime-contrib-eslint配置文件
.csslintrc: csslint检测规则
.efesconfig: efes项目配置文件

请回答下列问题：
[?] 项目名称：  (firstefes)
[?] 项目描述：
error:   Invalid input for 项目描述：
[?] 项目描述：  first efes project
[?] 项目ID：  (firstefes)
[?] 线上环境地址  (http://static.resource.com/firstefes)
[?] 开发环境地址  (http://static.test.resource.com/firstefes)
[?] 发布目录
[?] 开发目录  (src)
? 使用脚手架生成文件结构： NO
[?] 还需要对上述操作进行修改吗？  (y/N)

Write .csslintignore ... OK
Write .efesconfig ... OK
Write .csslintrc ... OK
Write concatfile.json ... OK
Write .eslintignore ... OK
Write .eslintrc ... OK

Done, without errors.

此时会生成六个配置文件分别为：

1. .csslintrc .csslintignore csslint检查规则和排除文件规则，其中排除文件规则对csslint这个插件不起作用，只在git commit的语法检查时生效。
2. .eslintrc .eslintignore eslint检查规则和排除文件规则。
3. .efesconfig efes子项目配置文件
4. concatfile.json 文件合并配置文件

2.2 创建源文件文件

~ cd firstefes
~ mkdir src
~ cd src
~ mkdir js
~ cd js
~ viv a.js
~ vim b.js

src/js/a.js

console.log('come from file a');

src/js/b.js

console.log('come from file b');

2.3 编辑文件合并规则

{
  "pkg": {
    "scripts/index.js": [
      "src/js/a.js",
      "src/js/b.js"
    ]
  },
  "imgMinIgnore":[]
}

编辑完 concatfile.json 后可以去访问以下这个文件，试试效果。http://static.test.resource.com/firstefes/scripts/index.js

2.4 开发

3 发布项目 Publish The Project

3.1 publish

在提交代码前，还需要一步操作就是将源代码生成出来。因为开发过程中，编译后的代码都是在内存中，没有在硬盘中生成实际的文件。

~ cd firstefes
~ efes publish

3.2 commit

正常提交，会触发 git commit hook，进行语法等提交检查

~ git commit -am "test"

如果需要绕过提交检查可以使用如下命令

~ git commit -am "test" --no-verify

编译

efes 在编译 es6、less、jade 这些文件时，是根据文件名后缀判断的具体适用规则的，如下：

1. 适用es6规则的后缀：.es6, .babel, .es2015, .jsx
2. 适用jsx语法的后缀：.jsx
3. 适用less语法的后缀：.less
4. 适用jade语法的后缀：.jade

命令 Commands

project

#####运行： efes project #####运行目录： efes 工作区目录，efesproject.json所在目录。 #####功能简介： 根据efesproject.json文件中的配置，克隆/更新git仓库的代码。 #####efesproject.json：

{
  "global": {
    "git": {
      "host": "ssh://host.you-git-resource.com/",
      "config": {
        "user.name": "hbxeagle",
        "user.email": "hbxeagle@domain1.com"
      },
      "branch": {
        "local": "develop",
        "remote": "origin/develop"
      }
    },
    "domain": {
      "publish": "static.resource.com",
      "dev": "static.test.resource.ccom"
    }
  },
  "projects": [{
    "name": "project0",
    "git": {
      "repo": "project0"
    },
    "rewrite": {
      "root": "pj0/main",
      "request": "/"
    },
    "domain": {
      "publish": "static1.resource.ccom",
      "dev": "static1.test.resource.ccom"
    }
  }, {
    "name": "project1",
    "git": {
      "repo": "project1"
    },
    "rewrite": {
      "root": "project1",
      "request": "/pj1/"
    }
  }, {
    "name": "project1 subProject",
    "rewrite": {
      "root": "fe-edaijia-events",
      "request": "/spj/"
    }
  }, {
    "name": "project2",
    "git": {
      "repo": "project2"
    },
    "rewrite": {
      "root": "project2",
      "request": "/"
    }
  }, {
    "name": "project3",
    "git": {
      "repo": "project3"
    },
    "rewrite": {
      "root": "project3",
      "request": "/"
    }
  }, {
  	"name": "other-host-git-project0",
  	"git": {
      "host": "https://host.you-git-resource-2.com/",
      "config": {
        "user.name": "eagle",
        "user.email": "eagle@aaa.com"
      },
      "branch": {
        "local": "develop",
        "remote": "origin/develop"
      },
      "repo": "project0"
    },
    "domain": {
      "publish": "static.resource1.ccom",
      "dev": "static.test.resource1.ccom"
    },
    "rewrite": {
      "root":"o-project0",
      "request":"/"
    }
  }, {
  	"name": "local-project0",
  	"domain": {
  	  "publish": "local.mydomain.com",
  	  "dev": "local.test.mydomain.com"
  	},
  	"rewrite": {
      "root":"local-project0",
      "request":"/"
    }
  }]
}

参数说明：

global：全局配置
	git：git配置
		host：git仓库的host
		config：git config配置项（key:value）
		branch：默认git分支
			local：本地分支名称
			remote：远程分支名称
	domain：域名
		publish：线上访问域名（最顶部的为全局配置。此外，每个项目看自定义其域名）
		dev：测试、开发访问域名（最顶部的为全局配置。此外，每个项目看自定义其域名）
projects：项目信息
	name：项目名称
	git：git自定义配置（非必填）
		repo：git仓库名称（不需要 .git 后缀）
	rewrite：rewrite对应关系
		root：项目的本地路径，具体参照上面的例子。
		request：项目的访问路径，规则如下：
			1、请求地址为：http://h5.edaijia.cn/core/，则配置为： /core/
			2、请求地址为：http://h5.edaijia.cn/，则配置为：/
			3、支持多个本地路径配置同一个访问路径

start

运行：

efes start

运行目录：

efes 工作区目录，efesproject.json所在目录。

功能简介：

开启node http server。前端开发者可以不用开启gulp，efes会根据配置文件efesproject.json中标注每个目录的域名、访问路径，以及每个目录的.efesconfig、concatfile.json中配置的信息，解析请求动态编译jsx、coffee、s6、less、sass、sass、jade，动态合并js、css，动态发布html，动态处理webp图片。用于本地开发、调试。

options

• -p, --port [value] node http server监听端口，默认为7070，注意要与下面nginx配置相同。
• -d, --direct 直接访问文件，不做任何处理。
• -b, --browsersync 开启browsersync功能(自动刷新功能暂时不能使用)。
• -c, --compress 开启压缩功能。
• --publish 访问资源同时，将最终需要生产的资源发布到发布目录(可能会影响性能，建议使用 efes publish 命令发布)

hosts的配置：

127.0.0.1 static.resource.com
127.0.0.1 static.test.resource.com
127.0.0.1 static.resource1.com
127.0.0.1 static.test.resource1.com
127.0.0.1 local.mydomain.com
127.0.0.1 local.test.mydomain.com

nginx的配置：

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

server {
  listen       80;
  server_name  static.resource.com static.test.resource.com static.resource1.com static.test.resource1.com local.mydomain.com local.test.mydomain.com;
  charset utf-8;
  autoindex       on;
  autoindex_exact_size    on;
  index index.html;

  # BrowserSync websocket
  location ^~ /browser-sync/socket.io/ {
      proxy_pass http://127.0.0.1:7070/browser-sync/socket.io/;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "Upgrade";
  }

  location ~* \.(?:ttf|eot|woff)$ { #|ttc|otf
      add_header "Access-Control-Allow-Origin" "*";
      expires 1M;
      access_log off;
      add_header Cache-Control "public";
      proxy_set_header x-request-filename $request_filename;
      proxy_set_header Host             $host;
      proxy_pass http://127.0.0.1:7070;
  }
  
  location ~ / {
      proxy_set_header x-request-filename $request_filename;
      proxy_set_header Host             $host;
      proxy_pass http://127.0.0.1:7070;
  }
}

publish

运行

efes publish

运行目录

efes项目目录，配置了.efesconfig和concatfile.json的目录

功能简介

将efes项目下的源码、图片源文件、html/jade源文件编辑、合并到开发目录

options

• -c, --compress 压缩代码
• -a, --all git commit 的 -a参数，此参数触发 git commit 操作。
• -m, --message git commit 的 -m参数，此参数触发 git commit 操作。
• --outpath [value] 发布目录，支持相对路径和绝对路径，在不设置outpath 时，默认为项目中 .efesconfig 配置的发布目录。

hook

运行：

efes hook

运行目录：

git仓库根目录

功能简介：

初始化git commit提交验证。此命令会在.git/hooks目录下添加pre-commit文件，在git commit时，会触发此文件中的操作，进行lint、图片Add提交、version字符串检查（只针对新添加或修改的文件）。

init

运行：

efes init [-f]

运行目录：

本地项目根目录

功能简介：

生成efes项目配置文件和lint检测规则文件。在项目的根目录下使用。 PS：为了避免错误，efes init在windows下请在cmd下运行。

options

• -f, --force 在非空目录强制执行。

选择脚手架为『no』时，生成如下几个文件：

• .eslintrc：eslint监测规则(此文件同时也是Sublime的插件Sublime-contrib-eslint配置文件)
• .eslintignore：eslint监测忽略规则
• .csslintrc：csslint监测规则，Sublime的插件支持
• .csslintignore：csslint监测忽略规则，Sublime的插件不支持。
• .efesconfig：efes配置文件

选择脚手架为『yes』时，efes会在项目根目录创建完整的目录结构，和gulp配置。

生成文件目录结构：

    |— fonts                          字体
    |— images                       图片
    |— styles                         样式