serve static files in the air
npm install airs在线解析压缩合并Less,打包压缩Javascript.
npm install airs -g或
yarn global add airs
直接执行air启动http server
air -p 9090 指定端口
air -d /tmp/ 指定根目录
所有less文件改为css后缀访问直接现场解析
类似于nginx的ssi(server side include)功能自动启用
> 可以使用连字符将资源合并
>
> 连字符的优先级高于配置文件
>
> 文件查找解析优先级高于配置文件
>
> less文件解析和配置文件优先级高于静态文件
对于js文件
> 同名静态文件的优先级高于配置文件.
对于js,css
优先级: 连字符>配置文件>静态文件
开启http server
与直接执行air一样
压缩less,javascript
后面可以跟文件列表,将会处理less和js后缀文件
air compress hello.less hi.less jquery.js etpl.js
--debug 以debug模式压缩
--clean 更强的压缩模式,清除console,debugger等
break change
https://github.com/less/less.js/releases/tag/v4.0.0
less 4.0 开始, math 默认值发生了改变, 除法必须使用括号了.
http://lesscss.org/usage/#less-options-math
可以使用配置文件 lessOptions 端, 还原到旧版行为
``json`
{
"lessOptions": {
"math": "always"
},
"static": {
"js": {
"js/all.js": [
"js/jquery.js",
"js/etpl.js"
]
},
"css": {
"css/style.css": [
"css/page.less",
"css/admin.less"
]
}
}
}
lessOptions 指定 math 为 always, 行为同3.0版本
lessOptions的配置项有
> math
>
> urlArgs , 如果是启动http server方式,query上的参数urlArgs,可覆盖此配置文件值
>
> globalVars less 的 globalVars 参数, 此配置可由 环境变量 GLOBALVARS (key=value)形式字符串
>
> modifyVars less 的 modifyVars 参数, 此配置可由 环境变量 MODIFYVARS (配置key=value) 覆盖, 优先级 -m 参数 (使用http形式是query.modifyVars) > 环境变量 > 配置文件
安装git hooks, 会将指定目录的git钩子安装到当前仓库, 当前位置必须是仓库根目录
要使用格式化和lint,需要全局安装prettier,eslint
为启用对vue的支持还需要eslint-plugin-html
对async支持,还需要添加babel-eslint
`
yarn global add prettier eslint babel-eslint vue-eslint-parser eslint-plugin-vue
`
需 eslint > 5.0.0
要跳过eslint检查,使用
git commit -n
或者
git commit --no-verify
参数
> -dir somedir 可以指定配置文件的目录
手动对指定文件进行格式化和lint
例如:air lint src/index.js
> 该命令必须在项目根目录执行,会查找当前目录下的config配置
>
> 该命令与commit时执行的命令逻辑相同
>
> 可以使用通配符 air lint src/*.js
忽略部分lint
// eslint-disable-line 对当前行忽略
// eslint-disable-next-line 对下一行忽略
/ eslint-disable / 关闭eslint
/ eslint-enable /开启eslint
参数
> -dir somedir 执行lint和格式化时可以指定配置文件所在目录
>
> --lint 默认执行完毕后会使用git add -u再次添加此文件,此参数可以阻止该行为
使用art-template模板渲染
air template tpl.html -o output.html --debug --art
加上--debug为不压缩
-o指定输出文件,如果不指定则直接输出到标准输出
--art 表示使用art-template模板,否则使用ssi
tpl.html的数据文件会在static.json配置文件中自动查找
`json`
"template": {
"tpl.html": "data/index.json"
}
http server 和 air compress 命令可以使用配置文件
使用配置文件需要有规则的目录结构
在根目录下建立static文件夹
在static目录内建立static.json文件,配置Less和Javascript映射
static.json
`
{
"static": {
"js": {
"js/all.js": ["js/jquery.js", "js/etpl.js"]
},
"css": {
"css/style.css": ["css/page.less", "css/admin.less"]
}
}
}
`
此时,在static目录下执行 将会将上述js文件压缩为all.js
less文件解析合并压缩为style.css
air compress可在项目中的任意文件夹位置执行
注意
> 被压缩的js需要为es5语法
> 若要使用ssi,请不要使用中文命名html文件
* 默认已支持nginx ssi 规则,且默认启用
* 支持另一种模板 art-template
如需使用art-template模板引擎,使用air -p 8899 --art启动
同时,可以使用配置文件对模板填充数据,配置文件声明在template段内
`json
{
"static": {
"js": {
"js/all.js": ["js/jquery.js", "js/etpl.js"]
},
"css": {
"css/style.min.css": ["css/page.less", "css/admin.less"]
}
},
"template": {
"index.html": "data/index.json"
}
}
`
其中为index.html`这个请求路径指定了模板数据,数据可使用三种格式
* 直接在配置文件里以对象的方式声明
* 在配置文件里指定使用一个json文件声明
* 在配置文件里指定使用一个js文件申明,js文件需为commonJs模块化
> 模板文件的修改会立即生效
>
> 配置文件的修改需重启
>
> 模板数据文件的修改需重启
>
> query 参数会自动传递给模板,如果有申明同名的模板数据则被覆盖