Overviewe代驾前端助手 edaijia fe assistant
efes的git commit检测规则中，eslint、csslint，和图片必须add提交为强制检测，error将导致提交失败。version字符串检测只做提示，供开发人员参考。
本助手是在前端自动化工具 gsp 的基础上做的定制开发。后期对整个结构做了重构，采用类REST风格，每个命令作为一个独立的模块（放置在commonds目录下，通过load自动加载）。在此感谢 gsp 的开发者 viclm
PrepareRequirementsInstall/Update~ npm install -g efes
Getting StartedCreate The Work SpaceMkdir~ mkdir WorkspaceEfes
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"
}
}]
}
Clone Git Repositorys~ efes project
Config Nginx参照 nginx的配置
Config hosts参照 hosts的配置
Run "efes start"由于加载的东西比较多，所以启动比较慢...... ○|￣|_
出现下面提示，表示已经启动成功
~ efes start
正在启动efes本地代理服务...
启动成功，监听端口： 7070
/
访问一个地址，看看效果。
Build A New Efes ProjectInit/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.
此时会生成六个配置文件分别为：
~ 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');
{
"pkg": {
"scripts/index.js": [
"src/js/a.js",
"src/js/b.js"
]
},
"imgMinIgnore":[]
}
编辑完 concatfile.json 后可以去访问以下这个文件，试试效果。http://static.test.resource.com/firstefes/scripts/index.js
Publish The Project在提交代码前，还需要一步操作就是将源代码生成出来。因为开发过程中，编译后的代码都是在内存中，没有在硬盘中生成实际的文件。
~ cd firstefes
~ efes publish
正常提交，会触发 git commit hook，进行语法等提交检查
~ git commit -am "test"
如果需要绕过提交检查可以使用如下命令
~ git commit -am "test" --no-verify
efes 在编译 es6、less、jade 这些文件时，是根据文件名后缀判断的具体适用规则的，如下：
Commands#####运行：
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、支持多个本地路径配置同一个访问路径
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图片。用于本地开发、调试。
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
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;
}
}
efes publish
efes项目目录，配置了.efesconfig和concatfile.json的目录
将efes项目下的源码、图片源文件、html/jade源文件编辑、合并到开发目录
efes hook
git仓库根目录
初始化git commit提交验证。此命令会在.git/hooks目录下添加pre-commit文件，在git commit时，会触发此文件中的操作，进行lint、图片Add提交、version字符串检查（只针对新添加或修改的文件）。
efes init [-f]
本地项目根目录
生成efes项目配置文件和lint检测规则文件。在项目的根目录下使用。 PS：为了避免错误，efes init在windows下请在cmd下运行。
|— fonts 字体
|— images 图片
|— styles 样式
|— scripts 脚本
|— concatfile.json 合并配置文件
|— gulpfile.js gulp任务配置文件
|— package.json npm配置文件
|— .eslintrc eslint规则文件
|— .eslintignore eslint监测忽略规则
|— .csslintrc csslint规则文件
|— .csslintignore csslint监测忽略规则
|— .efesconfig efes项目配置文件
|— src 开发目录
|— js js文件开发目录
|- icons icons精灵图小图片文件目录
|- images 图片文件（将自动压缩、生成webp至根目录下的images文件夹中）
|— css css文件开发目录
efes scaffold 或 efes sc
本地项目根目录
前端脚手架。在脚手架中封装了一些常用的功能，让开发者免于复制粘贴文件的烦恼。 PS：为了避免错误，efes init在windows下请在cmd下运行。
|— fonts 字体
|— images 图片
|— styles 样式
|— scripts 脚本
|— concatfile.json 合并配置文件
|— gulpfile.js gulp 任务配置文件
|— package.json npm配置文件
|— .eslintrc eslint规则文件
|— .csslintrc csslint规则文件
|— .efesconfig efes项目配置文件
|— index.html 首页
|— src 开发目录
|— js js文件开发目录
|- index.js
|- mod
|- call-client.js 客户端内部调用原生功能
|- download.js 唤起客户端或跳转到下载
|- landscape-tip.js 横屏提示js
|- loading.js loading
|- transation.js 滑屏js
|- webp.js webp监测，手动触发替换
|- webp.lazy.js webp监测，自动触发替换，有lazy效果
|- weight.js 重力感应示例
|- images 图片文件（将自动压缩至根目录下的images文件夹中。对不需要压缩的文件在concatfile.json中配置）
|— css css文件开发目录
|- index.css
|- mod
|- animations.css 滑屏css
|- swipe-page.css 滑屏css
|- landscape-tip.css 横屏提示css
|- loading.css loading
|- weight.css 重力感应示例
{
"pkg": {
"scripts/base.js": [
"/other-project/src/**/*.*",
"!/other-project/src/**/*cookie.*",
"src/base.babel"
],
"scripts/index.js": [
"/other-project/libs/zepto.min.js",
"/other-project/libs/base.js",
"/other-project/libs/react.min.js",
"/other-project/libs/react-dom.min.js",
"libs/redux.min.js",
"libs/react-redux.js",
"src/index.jsx"
],
"scripts/aaa.js": [
"src/bbb.jsx"
],
"styles/index.css": [
"/other-project/libs/reset.mobile.min.css",
"src/css/index.less"
]
}
}
efes ver [-s xxxx]
任意项目目录
为当前目录下所有的html中引用的js、css（只处理相对路径）添加/替换版本号字符串，默认为：VERSION。
efes tinypng [-f xxxx] [-d xxxx] 或 efes tp [-f xxxx] [-d xxxx]
任意项目目录
将目标图片进行压缩
efes webp [-f xxxx] [-d xxxx]
任意项目目录
将目标图片文件转换为webp格式
efes sprite [-r] [-a xxxx] [-f 'xxxx'] [-d xxxx] 或 efes sp [-r] [-a xxxx] [-f 'xxxx'] [-d xxxx]
任意项目目录
将目标目录下的所有图片文件合并为精灵图，并生成相应的css文件，css中图片的宽高使用的是rem为长度单位。
下面的插件，请先确认下列 npm 包是否已经安装：
Sublim插件：
git 中文文件名 乱码 mac
git 默认中文文件名是 xx%
是因为 对0x80以上的字符进行quote
只需要
git config core.quotepath false
core.quotepath设为false的话，就不会对0x80以上的字符进行quote。中文显示正常
修复init、scaffold命令不能生成脚手架文件bug
脚手架添加icons精灵图自动合并功能。
修复init生成项目初始文件时，部分文件不能正确生成bug
新增替换版本号字符串命令『efes ver』。
gulp提供图片压缩支持（使用pngquant压缩引擎）。
src目录中增加html，方便自动刷新。 bugs fixed
修复gulp编译es6时的错误。
优化commit的速度。
bugs fixed
遗留bug：
FAQs
edaijia fe assistant
The npm package efes receives a total of 28 weekly downloads. As such, efes popularity was classified as not popular.
We found that efes demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.