├── bin └── fisb ├── package.json ├── fisb.js └── README.md /bin/fisb: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | require('../fisb.js').cli.run( process.argv ); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fis-bytedance", 3 | "version": "0.0.7", 4 | "description": "bytedance fe build", 5 | "bin": { 6 | "fisb": "bin/fisb" 7 | }, 8 | "main": "fisb.js", 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "keywords": [ 13 | "fis-bytedance", 14 | "fisb", 15 | "fis" 16 | ], 17 | "author": "bytedancefe", 18 | "license": "BSD", 19 | "dependencies": { 20 | "fis": "^1.9.31", 21 | "fis-lint-jshint": "0.0.10", 22 | "fis-parser-babel": "xiangshouding/fis-parser-babel", 23 | "fis-parser-less": "^0.1.3", 24 | "fis-parser-utc": "0.0.2", 25 | "fis-postpackager-autoload": "0.0.13", 26 | "fis-postpackager-simple": "0.0.23", 27 | "fis-postprocessor-require-async": "0.0.8" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /fisb.js: -------------------------------------------------------------------------------- 1 | var fis = module.exports = require('fis'); 2 | 3 | fis.cli.name = 'fisb'; 4 | fis.cli.info = fis.util.readJSON(__dirname + '/package.json'); 5 | 6 | fis.config.merge({ 7 | projectname: '', 8 | statics: '/resource', 9 | templates: '/template', 10 | modules : { 11 | // 自动css sprites插件 12 | spriter: 'csssprites', 13 | parser : { 14 | //utc：underscore自带模板语言 15 | tmpl: 'utc', 16 | //css方言 17 | less: 'less', 18 | es6: 'babel' 19 | }, 20 | postprocessor : { 21 | js : 'jswrapper, require-async' 22 | }, 23 | postpackager : ['simple', 'autoload'] 24 | }, 25 | settings : { 26 | postprocessor : { 27 | jswrapper : { 28 | type : 'amd' 29 | } 30 | }, 31 | postpackager : { 32 | //用于配合amd规范进行require文件的自动合并 33 | autoload: { 34 | //使用静态资源地图，便于支持require.async进行异步组件加载 35 | useSiteMap: true, 36 | //资源资源地图放置位置 37 | subpath : 'static/pkg/asyncmap.js', 38 | //自动加载script依赖的占位标识符 39 | scriptTag: '', 40 | //自动加载css依赖的占位标识符 41 | styleTag: '', 42 | //资源表占位标识符 43 | resourceMapTag: '' 44 | }, 45 | //用于进行零散文件依据pack配置进行打包替换 46 | simple: { 47 | //不开启自动的零散资源合并 48 | //所有资源严格进行手动整合 49 | autoCombine: false 50 | } 51 | }, 52 | spriter: { 53 | csssprites: { 54 | margin: 30 55 | } 56 | } 57 | }, 58 | roadmap : { 59 | ext : { 60 | //输出为css文件 61 | less : 'css', 62 | es6: 'js' 63 | }, 64 | path : [{ 65 | //前端模板 66 | reg : '**.tmpl', 67 | //当做类js文件处理，可以识别__inline, __uri等资源定位标识 68 | isJsLike : true, 69 | release : false 70 | }, { 71 | reg : /(\/_.*|\.inline\.less|readme.txt|build\..*)$/, 72 | release : false 73 | }, { 74 | reg : /^\/(pagelet|common|static)\/.*\.(less|css)$/, 75 | useSprite : true, 76 | release: '${statics}/${projectname}/$&' 77 | }, { 78 | reg : /^\/(pagelet|common)\/.*\.js$/, 79 | isMod : true, 80 | release: '${statics}/${projectname}/$&' 81 | }, { 82 | reg : /^\/(pagelet|page)\/(.*)\.html$/, 83 | release : '${templates}/${projectname}/$&' 84 | }, { 85 | reg : /^\/(pagelet|common|static)\/.*\.(less|css)$/, 86 | useSprite : true, 87 | release: '${statics}/${projectname}/$&' 88 | }, { 89 | reg : '/static/**.html', 90 | release: '${statics}/${projectname}/$&' 91 | }, { 92 | reg : /^\/(pagelet|common|static)\/.*\/.*$/, 93 | release: '${statics}/${projectname}/$&' 94 | } 95 | ] 96 | } 97 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 头条前端构建工具(fisb) 2 | ========================== 3 | fis-bytedance是一套基于 [Fis](http://fis.baidu.com) 进行封装的适用于头条前端开发方式的本地自动化辅助工具 4 | 5 | 一、安装方式 6 | -------------------------- 7 | 1、基于`nodeJS`，需先安装 [Node](http://nodejs.org) 环境 8 | 9 | 2、安装本地自动化辅助工具`fisb` 10 | ```bash 11 | $ npm install -g fis-bytedance 12 | ``` 13 | 14 | 3、查看当前`fisb`版本 15 | ```bash 16 | $ fisb -v 17 | ``` 18 | 19 | 4、安装完成 20 | 21 | 22 | 二、使用方式——本地调试 23 | -------------------------- 24 | 1、先下载基于`fisb`构建的头条前端通用代码示例 25 | ```bash 26 | $ git clone https://github.com/zhoujq/bytedance-fedemo.git 27 | ``` 28 | 29 | 2、进入`bytedance-fedemo` 目录，发布项目 30 | ```bash 31 | $ fisb release 32 | ``` 33 | 34 | 3、启动本地调试服务器用于预览发布项目 35 | ```bash 36 | $ fisb server start 37 | ``` 38 | 39 | 4、访问 http://127.0.0.1:8080/template/bytefe/page/ 查看结果 40 | 41 | 42 | 三、使用方式——远程调试 43 | -------------------------- 44 | 1、远程调试基于`Fis`远程开发调试工具[fisrcv](https://github.com/zhoujq/fis-receiver) 45 | 46 | 2、远端机器安装`fisrcv`，用于接收本地代码实时上传 47 | ```bash 48 | $ npm install -g fis-receiver 49 | ``` 50 | 51 | 2、如远程机器无root权限，可讲`fisrcv`安装到用户目录下，手动将bin目录添加到环境变量内 52 | 53 | 3、启动`fisrcv`服务 54 | ```bash 55 | $ fisrcv 8999 56 | ``` 57 | 58 | 4、修改本地项目`fis-conf.js`文件，增加`deploy`配置项 59 | ```javascript 60 | fis.config.merge({ 61 | deploy: { 62 | dev: { 63 | receiver: 'http://:8999/receiver', 64 | from: '/template', 65 | //远端目录 66 | to: '/home/template/' 67 | } 68 | } 69 | }); 70 | ``` 71 | 72 | 5、重新发布当前项目 73 | ```bash 74 | $ fisb release -d dev 75 | ``` 76 | 77 | 四、功能说明 78 | -------------------------- 79 | 1、支持`less`与`sass`解析 80 | 81 | 2、支持`underscore template`前端模板解析 82 | 83 | 3、支持基于`AMD`规范的模块依赖关系管理 84 | 85 | 4、支持使用`require.async`进行异步模块加载 86 | 87 | 5、支持图片自动拼接处理，无需手动`sprite` 88 | 89 | 6、支持基于`AMD`规范的模块依赖自动加载 90 | 91 | 7、其他功能与详细使用说明见 [Fis官方网站](http://fis.baidu.com) 92 | 93 | 94 | 五、目录规范 95 | -------------------------- 96 | 1、前端项目目录规范 97 | 98 | [website] 99 | | -- [common] 100 | | | -- [dialog] 101 | | | | -- dialog.tmpl 102 | | | | -- dialog.less 103 | | | | -- dialog.js 104 | | | -- [util] 105 | | | | -- user.js 106 | | | | -- date.js 107 | | | -- [...] 108 | | -- [pagelet] 109 | | | -- [pl_a] 110 | | | | -- pl_a.js 111 | | | | -- pl_a.less 112 | | | | -- pl_a.html 113 | | | -- [...] 114 | | -- [page] 115 | | | -- index.html 116 | | | -- ... 117 | | -- [static] 118 | | | -- [lib] 119 | | | | -- jquery.js 120 | | | | -- ... 121 | | | -- [style] 122 | | | | -- reset.less 123 | | | | -- ... 124 | | | -- [image] 125 | | | | -- image_a.png 126 | | | | -- ... 127 | | -- fis-conf.js 128 | 2、目录结构说明 129 | >**[website]**：站点项目目录 130 | 131 | >**[common]**：用于放置通用代码，*common*只允许被*pagelet*与*common*内其他组件进行引用； 132 | 133 | >**[pagelet]**：用于放置页面模块代码，每个*pagelet*因包含自身所需的模板、JS与CSS，只可以被*page*所引用，且完全禁止*pagelet*内存在互相引用与嵌套关系。*pagelet*的html容器、css作用域、JS作用域都应完全一样，遵循以"pagelet-"开头，加模块功能的命名方式（例如：`pagelet-feedlist`）； 134 | 135 | >**[page]**：用于当前站点主页面模板，*page*是由一到多个*pagelet*构成； 136 | 137 | >**[static]**：用于存放所有的通用静态资源（类库、图片、基础CSS等） 138 | 139 | >**fis-conf.js**：*FIS*所依赖的项目配置文件，每个站点目录应该有且只有一个*fis-conf.js*文件； 140 | 141 | 142 | 六、相关工具与文档地址 143 | -------------------------- 144 | 1、[FIS](https://github.com/fex-team/fis) 145 | 146 | 2、[fis-bytedance](https://github.com/zhoujq/fis-bytedance) 147 | 148 | 3、[fis-receiver](https://github.com/zhoujq/fis-receiver) 149 | 150 | 4、[bytedance-fedemo](https://github.com/zhoujq/bytedance-fedemo) 151 | 152 | 5、[LESS](http://www.lesscss.net/) 153 | 154 | 6、[SASS](http://www.sass-lang.com/) 155 | 156 | 7、[AMD](https://github.com/amdjs/amdjs-api/wiki/AMD) 157 | 158 | 8、[underscore template](http://underscorejs.org/#template) 159 | --------------------------------------------------------------------------------