Skip to content

Latest commit

 

History

History
140 lines (99 loc) · 7.05 KB

5.md

File metadata and controls

140 lines (99 loc) · 7.05 KB
Raw

构建工具 for teamwork

1. 为什么需要 “构建工具 for teamwork”

现在对于构建工具的使用已经非常广泛了，从 grunt 到 gulp，再到 webpack，一个个更加强大工具在不断出现，前端的技术更新节奏之快真的有点让人应接不暇呢（^_-）。但这些构建工具也只是提供了一些基础子集，对于团队来说，还需要把这些子集进行组合，打造适合团队开发的构建工具。

2. 适合团队的构建工具应当具有的一些特性

这里只涉及团队开发的特性，不涉及前端构建的基本特性，如：合并压缩代码，去缓存，提取公共文件等。

  • 有良好的项目结构（目录结构，文件结构，模块化分组结构，组件化结构），并对其具有一定的约束力；
  • 页面之间、组件之间应该是相互隔离、解耦的，更新其中的一个页面（或组件）不会影响到其他的页面（或组件）；
  • 对多页面和单页面应用都有完备的支持；
  • 对扩展语言的支持（可选）：TypeScript、coffeescript、less、sass、ejs、jade；
  • 对框架的支持（可选）：react、vue、angular；
  • 自动化构建，以尽量少的命令做尽量多的事情（一条命令搞定所有事情当然是做好的啦，嘻嘻）；
  • 扩展性好，能够很方便的扩展工具的功能；
  • 可配置性好，可以通过配置来启用或禁用一些功能；
  • 支持多个页面一起构建，支持多服务器环境，支持 web、static 分离，支持适配任何后端语言，支持命令行配置，支持个人本地化配置（每个人自己独有的配置），支持页面本地化配置（每个页面独有的配置）；
  • 文件构建记录，每次只上传服务器不存在的文件；
  • 能够快速创建新项目，并能方便的在多个项目之间共享组件；
  • ...

3. lila 构建工具

lila 底层使用 webpack 打包代码，使用 gulp 对打包好的代码进行额外的数据流操作，如文件变动记录，上传代码到服务器等，当然完全支持上面所列的诸多特性。

3.1 目录结构

lila 对文件结构有很清晰的定义，包括目录结构、文件结构、模块化分组结构、组件化结构，并且页面之间、组件之间是相互隔离、解耦的。

多页面构建，无论你是否使用单页面应用（SPA），或者任何框架。

|-- project/ 工程目录
    |-- src/ 源代码目录
        |-- component/ 全局组件目录
        |-- util/ 全局工具函数目录
        |-- ...
        |-- category1/ 类别 1 目录
            |-- page1/ 页面 1 目录（即这个页面的工作空间，这个页面的所有资源都将在这个目录下）
                |-- index.html html 入口文件
                |-- index.js js 入口文件
                |-- index.(css|less|scss) 样式入口文件
                |-- js/ js 文件目录
                    |-- ajax/ 对 ajax 封装的目录
                    |-- util/ 工具类函数的目录
                    |-- pages/ spa 应用页面目录
                    |-- data/ 静态数据目录
                    |-- tpl/ 模板目录
                    |-- (event|view)/ 事件监听文件目录
                    |-- ...
                |-- data/ 本地 json 数据模拟
                |-- (css|less|scss)/ 样式文件目录
                |-- images/ 图片文件目录
                |-- components/ 组件目录（如果基于 react, vue 等组件化框架）
                |-- ...

3.2 命令

lila 的哲学是一个命令做完所有事情，所以现在命令不是很多，但基本上都能物尽其用。

3.2.1 dev

开发一个模块（页面、组件），通过开启一个本地服务器，加上热更新和热替换，实现一个模块的快速开发。

3.2.1.1 实现库
3.2.1.2 用法
lila dev moduleName

3.2.2 dist

对指定模块进行构建。可以同时对多个模块进行构建，也可指定要构建的环境（服务器环境，本地环境）。

3.2.2.1 中间会做些什么

通过 webpack 构建，确定是否需要单独打包 css 文件，是否需要分割 js 为多个文件，是否动态加载一些 js，是否需要压缩代码，是否需要记录本次构建文件变动，根据配置确定 html、css 对其他的资源应用路径的正确（尤其是分布式服务器的时候）等。

3.2.2.2 用法
lila dist moduleName [-e 0|1|2] [-l localName]
  • e|env：指定服务器环境
  • l|local：指定本地个人环境
3.2.2.3 同时构建多个模块

通过指定 moduleName 确定需要构建的模块。

  • test/index：一个模块
  • test/index,test/index2：多个模块
  • test/*：通配符，表示 test 目录下所有存在的模块
  • test/index,test2/*：多种模式
  • *|all：表示所有模块

3.2.3 sync

先执行构建任务，然后把构建好的同步到服务器，支持文件变动记录（只上传服务器不存在的文件）和分布式服务器。

lila sync moduleName [-e 0|1|2] [-l localName]

3.2.3 analyze|ana

查看每个文件模块的大小，确定哪些比较大的文件需要单独分割出来加载，以提高加载速度。

3.3 配置

项目的配置在项目根目录下的 lila.config.js 中，每个模块的自定义配置在模块工作空间下的 config.js 文件中。

  • minJs, minCss, minHtml：代码压缩
  • htmlReplace, htmlInsert, htmlExtension：html 变换
  • recordFileChanges：本地文件变动记录
  • packCssSeparately：是否单独打包 css
  • splitJs：分割 js
  • staticServerUrl：静态资源服务器地址
  • network：服务器配置，可配置多个 web、static 服务器
  • directoriesToSync：其他需要捅不到服务器的目录（无法加入源代码的文件，如 ueditor）
  • enableCssModules：开启 css-modules 功能
  • ...

4. 后续

更多博客，查看 https://github.com/deepraining/blogs

作者：深雨 (@deepraining)

版权声明：自由转载-非商用-非衍生-保持署名（创意共享 3.0 许可证）