efes

概述 Overview

e代驾前端助手 edaijia fe assistant

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

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

安装环境 Requirements

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

安装/更新 Install/Update

npm install -g efes

命令 Commands

project

运行：

efes project

运行目录：

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

功能简介：

根据efesproject.json文件中的配置，克隆/更新git仓库的代码。

efesproject.json：

{
  "publishDomain" : "static.resource.com”,
  "devDomain"     : "static.d.resource.com",
  "projects"        : [{
    "name"          : "efes-core”,
    "git"           : "https://xxx.git.com/efes-core.git”,
    "localDir"      : "efes-core”,
    "publishDir"    : "/core/“
  }, {
    "name"          : "efes-events",
    "git"           : "https://xxx.git.com/efes-events.git",
    "localDir"      : "efes-events",
    "publishDir"    : "/"
  }, {
    "name"          : "efes-main",
    "git"           : "https://xxx.git.com/efes-main.git",
    "localDir"      : "efes-main",
    "publishDir"    : "/"
  }, {
    "name"          : "efes-other",
    "git"           : "https://xxx.git.com/efes-other.git",
    "localDir"      : "efes-other",
    "publishDir"    : "/other/"
  }, {
    "name"          : "wap",
    "git"           : "https://xxx.git.com/wap.git",
    "localDir"      : "wap",
    "publishDir"    : "/",
    "publishDomain" : "wap.resource.com",
    "devDomain"     : "wap.d.resource.com"
  }]
}

参数说明：

publishDomain：线上访问域名（最顶部的为全局配置。此外，每个项目看自定义其域名）
devDomain：测试、开发访问域名（最顶部的为全局配置。此外，每个项目看自定义其域名）
projects：项目信息
name：项目名称
git：项目的git地址
localDir：项目的本地路径
publishDir：项目的访问路径，规则如下：
     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 访问资源同时，将最终工作资源到发布目录

nginx的配置：

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

server {
  listen       80;
  server_name  static.resource.com static.d.resource.com www.resource.com wap.resource.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 ~* /.+\.[a-z]+$ {
      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 压缩代码
--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                         样式
    |— 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文件开发目录

scaffold

运行

efes scaffold 或 efes sc

运行目录

本地项目根目录

功能简介

前端脚手架。在脚手架中封装了一些常用的功能，让开发者免于复制粘贴文件的烦恼。 PS：为了避免错误，efes init在windows下请在cmd下运行。

options

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

h5 脚手架包含功能

loading模板
横屏提示模板
重力感应示例
webp监测，自动替换
唤起客户端或跳转到下载
PS：由于使用的是WebViewJavascriptBridge，作为和客户端通讯的规则，调用时需要和客户端定好WebViewJavascriptBridge接口
客户端内部调用原生功能插件
PS：经测试，ios9和Android有新的规则，现有代码只能在微信中唤起客户端。

h5 脚手架目录结构

    |— 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           重力感应示例

ver

运行：

efes ver [-s xxxx]

运行目录：

任意项目目录

功能简介：

为当前目录下所有的html中引用的js、css（只处理相对路径）添加/替换版本号字符串，默认为：VERSION。

options

-s [value] 自定义的版本号字符串。

gulp自动化功能

自动编译coffee、es6、less、jade
根据concatfile.json配置的内容，自动合并js(coffee、es6)、css(less)
支持sourcemap功能。
文件有改变时自动刷新页面。
图片自动压缩；icons精灵图自动合并；自动转换为webp图片

Sublime 配套插件(建议安装Sublime3)

下面的插件，请先确认下列 npm 包是否已经安装：

elint 安装命令：npm install -g elint
csslint 安装命令：npm install -g csslint

Sublim插件：

SublimeLinter：https://sublime.wbond.net/packages/SublimeLinter
SublimeLinter-csslint：https://sublime.wbond.net/packages/SublimeLinter-csslint
SublimeLinter-contrib-eslint：https://packagecontrol.io/packages/SublimeLinter-contrib-eslint
JsFormat：https://packagecontrol.io/packages/JsFormat

git commit 中文乱码解决方案

git 中文文件名乱码 mac
git 默认中文文件名是 xx%
是因为对0x80以上的字符进行quote
只需要
git config core.quotepath false
core.quotepath设为false的话，就不会对0x80以上的字符进行quote。中文显示正常

更新日志

v0.2.0更新

添加start命令，本地代理服务器，替换每次需要开启gulp的繁琐操作。
添加publish命令，编译、合并、生成发布代码
修改脚手架和gulp，将原有编译策略按目录查询改为按文件名后缀判断文件类型。
efesconfig增加dev_dir(开发目录，默认为src)，publish_dir(发布目录，默认为当前路径)配置。
webp文件不单独生成到webps目录下，改为同目录，只改变后缀名。

v0.1.16更新

添加lint ignore配置，分别对应 .eslintignore 和 .csslintignore两个文件。
PS：.eslintignore sublime的linter插件支持，.csslintignore不支持
优化lint速度。
删除脚手架生产的不必要的文件。
修复h5脚手架中 webp.js的使用'let'关键字的bug.

v0.1.15更新

修复init、scaffold命令不能生成脚手架文件bug

v0.1.14更新

添加 efes scaffold 脚手架h5模块代码
添加图片 webp 自动转换功能

v0.1.13更新

脚手架添加icons精灵图自动合并功能。

v0.1.12更新

修复init生成项目初始文件时，部分文件不能正确生成bug

v0.1.10更新

新增替换版本号字符串命令『efes ver』。
gulp提供图片压缩支持（使用pngquant压缩引擎）。
src目录中增加html，方便自动刷新。 bugs fixed
修复gulp编译es6时的错误。
优化commit的速度。

v0.1.9更新

bugs fixed

修复windows下不能init不能生成文件、目录的bug。

v0.1.8更新

调整init命令的脚手架选项，改为选择是否使用脚手架。
支持脚手架生成文件结构
支持sourcemap功能

遗留bug：

sourcemap 对同名的css、js文件不能正确区分。

efes Release 0.1.40

Release 0.1.40 Toggle Dropdown 0.1.41 0.1.40 0.1.39 0.1.38 0.1.37 0.1.36 0.1.35 0.1.34 0.1.33 0.1.32

Documentation

efes

概述 Overview

安装环境 Requirements

安装/更新 Install/Update

命令 Commands

project

运行：

运行目录：

功能简介：

efesproject.json：

参数说明：

start

运行：

运行目录：

功能简介：

options

nginx的配置：

publish

运行

运行目录

功能简介

options

hook

运行：

运行目录：

功能简介：

init

运行：

运行目录：

功能简介：

options

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

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

生成文件目录结构：

scaffold

运行

运行目录

功能简介

options

h5 脚手架包含功能

h5 脚手架目录结构

ver

运行：

运行目录：

功能简介：

options

gulp自动化功能

Sublime 配套插件(建议安装Sublime3)

git commit 中文乱码解决方案

更新日志

v0.2.0更新

v0.1.16更新

v0.1.15更新

v0.1.14更新

v0.1.13更新

v0.1.12更新

v0.1.10更新

v0.1.9更新

v0.1.8更新

Stats

Development practices

Releases

Contributors

efes
Release 0.1.40

Release 0.1.40

0.1.41

0.1.40

0.1.39

0.1.38

0.1.37

0.1.36

0.1.35

0.1.34

0.1.33

0.1.32