sphinx 神马搜索前端构建工具。
npm install -g sphinxjs
执行sphinx -h 查看命令的相关帮助：
Usage: sphinx <command>
命令：
release 编译发布项目 [aliases: r]
server 编译发布项目，并启用web server [aliases: s]
release [options]
--glob, -g [array] 使用glob配置要编译的文件
--dest, -d [string] 编译输出目录
--optimize, -o [boolean] 启用压缩
--conf [string] 指定配置文件的路径
--cwd [string] 指定要编译项目的路径
--clean, -c [boolean] 清除缓存
server [options]
--live, -L [boolean] 启用livereload，自动刷新浏览器
--qrcode [boolean] 生成URL二维码
--startpath [string] 指定打开浏览器时的相对路径
--port, -p [number] web server的端口
--glob, -g [array] 使用glob配置要编译的文件
--dest, -d [string] 编译输出目录
--optimize, -o [boolean] 启用压缩
--conf [string] 指定配置文件的路径
--cwd [string] 指定要编译项目的路径
--clean, -c [boolean] 清除缓存
选项：
-v, --version 显示版本号
-c, --clean 清除缓存
-h, --help 显示帮助文档 [布尔]
使用sphinx只有两条命令：
- sphinx release: 编译并发布项目
- sphinx server: 编译发布项目，并启动内置调试服务器
sphinx的所有命令行参数都可在sphinx-conf.js中进行配置
module.exports = {
glob: [
"+(img)/**"
],
solution: 'sc',
entry: 'result.html',
dest: 'output'
}NOTE: solution和entry是SM搜索sc业务基于sphinx封装解决方案的专用参数。
sphinx使用node-glob提供glob的支持，具体规则node-glob或者node-glob学习笔记，这里简单列下规则：
- `*` 匹配0或多个除了 `/` 以外的字符
- `?` 匹配单个除了 `/` 以外的字符
- `**` 跨路径匹配任意字符
- `[]` 若字符在中括号中，则匹配。若以 ! 或 ^ 开头，若字符不在中括号中，则匹配
- `!(pattern|pattern|pattern)` 不满足括号中的所有模式则匹配
- `?(pattern|pattern|pattern)` 满足 0 或 1 括号中的模式则匹配
- `+(pattern|pattern|pattern)` 满足 1 或 更多括号中的模式则匹配
- `*(pattern|pattern|pattern)` 满足 0 或 更多括号中的模式则匹配
- `@(pattern|pattern|pattern)` 完全匹配模式中的一个
sphinx release --glob '+(img|css|js)/**'
在项目中可以使用COMMONJS规范的模块化，但是要遵循以下约定：
- 需要使用 'use module' 来做标示，便于sphinx做离线转化。
- 使用 "require" 请求依赖。
- 必须使用 “module.exports” 作为模块的输出。
- 在script标签上加入 data-main 支持模块化代码。
- 支持别名机制，可以在配置文件中配置。
sphinx-conf.js 中配置模块化使用的别名以及依赖
module.exports = {
alais: {
zepto: {
path: '/js/zepto.js',
exports: 'zepto'
},
share: {
path: '/js/sm.helper.share.js',
exports: 'sm.helper.share',
deps: ['/js/sm.helper.ucAPI.v1.js']
}
}
}b.js
'use module';
var zepto = require('zepto');
var share = require('share');
var a = require('./a.js');
console.log(a.say());a.js
'use module';
module.exports = {
say: function () {
return 'hello';
}
}c.css
div{
color: red;
}index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script data-main>
require('./c.css');
</script>
</head>
<body>
<script data-main>
require('./b.js');
</script>
</body>
</html>- 在html支持script、link、style等带有src或href属性的资源定位。
- 在js文件中支持使用__uri进行资源定位。
- 在css文件中识别url进行资源定位。
-
在html中内嵌资源
- 内嵌图片
<!--源码--> <img title="SM" src="images/SM.png?__inline"/> <!--编译后--> <img title="SM" src="data:image/png;base64,asdfasdfsdfadf"/>
- 内嵌样式
<!--源码--> <link rel="stylesheet" type="text/css" href="demo.css?__inline"> <!--编译后--> <style>img { border: 5px solid #ccc; }</style>
- 内嵌脚本
<!--源码--> <script type="text/javascript" src="demo.js?__inline"></script> <!--编译后--> <script type="text/javascript">console.log('inline file');</script>
- 内嵌页面
<!--源码--> <link rel="import" href="demo.html?__inline"> <!--编译后--> <h1>demo.html content</h1>
-
在js中内嵌资源
在js中可以利用__inline(path)内嵌资源。
-
在css中内嵌资源
通过添加 ?__inline 编译标记都可以把文件内容嵌入进来
TMPL文件是sphinx中的模板文件，主要使用Underscore来编译。