# 08cms 中文文档 规范地址：https://npmcn.com/package/08cms/ 版本：1\.0\.0 npm 元数据更新时间：2022-04-04T10:08:24.939Z 中文译文更新时间：2026-10-31T11:49:58.550Z 软件包许可：未声明 本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/08cms 原文对照：https://npmcn.com/package/08cms/?lang=original ## 关键信息（来自 npm 元数据） - TypeScript 类型：未声明 - Node.js 要求：\>=0\.10\.0 - 运行依赖：56 个 - 首次发布：2017-06-28T09:21:03.623Z - 最新版本发布：2017-06-28T09:21:03.623Z - 已发布版本数：1（近 12 个月 0 个） ## 中文简介 **ats08** 全称08cms automatic tools(08cms 自动化工具)； 设计目的，传统的构建工具对于一个刚接触前端的童鞋过于复杂，还要会写js，还要配置插件什么的 为了让前端写页面更简单方便，自己封装了一套工具，使用者只要用命令行指定目录及简单的几个设置就可以用； 简单说ats08是基于gulp开发的一个cli工具； `特别说明：该工具只适合传统的多页面构建，不适合单页面设计，若是单页面请移步Webpack` ## 安装 ```sh npm install 08cms ``` 也可以使用：`pnpm add 08cms`、`yarn add 08cms`、`bun add 08cms` ## README # ats08 #### 简介 **ats08** 全称08cms automatic tools(08cms 自动化工具)； 设计目的，传统的构建工具对于一个刚接触前端的童鞋过于复杂，还要会写js，还要配置插件什么的 为了让前端写页面更简单方便，自己封装了一套工具，使用者只要用命令行指定目录及简单的几个设置就可以用； 简单说ats08是基于gulp开发的一个cli工具； `特别说明：该工具只适合传统的多页面构建，不适合单页面设计，若是单页面请移步Webpack` #### 集成功能 - sass生成css - js语法检查、压缩、合并 - 图片压缩，合并 - 字体压缩，合成 - 浏览器自动刷新 - ftp自动上传 - html模板,基于swig模板引擎 - markdown文件生成说明文档 - 自动抓取js的说明信息生成js说明文档 - vue 转 js #### 安装node插件 1. `node` `git` 安装 请自行百度 2. 在版本库里右键git bash here打开命令行工具(当然用cmd,powershell也可以) 3. 执行命令`npm install -g cnpm --registry=https://registry.npm.taobao.org` 使用淘宝镜像 4. 执行命令`cnpm install` 这个过程要很久，20-30分钟，期间会安装一系列插件 5. 如果没有显示`npm ERR`表示安装完毕，如果显示再执行`cnpm install` #### 目录结构 ```text ├── .babelrc - ├── bin - ├── default.js - ├── dev.js - ├── imageresize.js - ├── init.js - ├── jshint.js - ├── markdown.js - ├── pack.js - ├── web.js - └── webdown.js - ├── editorconfig - ├── gulpfile.js - ├── lib - ├── base.json - ├── configs.js - ├── csscomb.json - ├── init.js - ├── js - └── jquery.js - ├── swig - ├── filters.js - └── locals.js - ├── tasks-info.js - └── utils.js - ├── package.json - ├── readme.md - ├── src - └── libs - ├── css - ├── ats.scss - ├── demo.scss - ├── inherit - ├── mixins - ├── static - ├── _font-demo.scss - ├── _font-modal.scss - ├── _grid.scss - ├── _header.scss - ├── _img-demo.scss - ├── _modal.scss - └── _variables.scss - ├── demo.html - ├── fonts - ├── _demo - └── _modal - ├── images - └── _demo - ├── js - ├── demo.js - ├── plugin - ├── static - ├── _common - ├── _js_header.html - └── _seajs - ├── pic - └── s.png - └── _base.html - └── tpl - ├── css - ├── fonts.scss - └── images.scss - ├── html - ├── fonts.html - ├── images.html - └── toolsbar.html - ├── markdown - ├── fonts - ├── glyphicons-halflings-regular.eot - ├── glyphicons-halflings-regular.svg - ├── glyphicons-halflings-regular.ttf - ├── glyphicons-halflings-regular.woff - ├── glyphicons-halflings-regular.woff2 - ├── modal.eot - └── modal.woff - ├── img - ├── glyphicons-halflings-white.png - └── glyphicons-halflings.png - ├── index.html - ├── quicksearch.html - ├── scripts - ├── fulltext-search-ui.js - ├── fulltext-search.js - ├── highlight.min.js - ├── jqmodal.js - ├── jquery.zeroclipboard.js - ├── lunr.min.js - ├── prettify - ├── toc.js - └── ZeroClipboard.swf - └── styles - ├── highlight - ├── jqmodal.css - └── site.cerulean.css - └── readme.md - ``` #### 处理规则 ##### Scss - 从 `src/css/a.scss` 到 `dist/css/a.css` - 完成后自动刷新浏览器 ##### JS - 合并 合并前 ```text src ├── js ├── _xxx ├── a.js ├── b.js ``` 合并后 ```text dist ├── js ├── xxx.js ``` - 所有有下划线的文件夹都会将其内部的文件合并成一个文件（以当前文件夹命名） - 代码里加`// @require('babel')`标记里，代码可以使用es6写法，工具会自动转换 ##### Images - 合并 合并前 ```text src ├── images ├── _xxx ├── a.png ├── b.png ``` 合并后 ```text dist ├── images ├── xxx.png - 合成后的图片 ├── xxx.html - 可以直接打开预览调用方式 src ├── css ├── _img-xxx.scss - 可直接 `@impot '_img-xxx'`合成后图片的css ``` - 合并后 所有有下划线的文件夹都会将其内部的文件合并成一个文件（以当前文件夹命名） ##### Fonts - 合并 合并前 ```text src ├── fonts ├── _xxx ├── a.svg ├── b.svg ``` 合并后 ```text dist ├── fonts ├── xxx.eot - 合成后的字体 ├── xxx.woff - 合成后的字体 ├── xxx.html - 可以直接打开预览调用方式 src ├── css ├── _font-xxx.scss - 可直接 `@impot '_font-xxx'`合成后字体的css ``` - 合并后 所有有下划线的文件夹都会将其内部的文件合并成一个文件（以当前文件夹命名） ##### Html - 合并 合并前 ```text src ├── _base.html ├── index.html ``` 合并后 ```text dist ├── index.html ``` - 支持[swig](https://twig.sensiolabs.org/doc/2.x/)模板引擎 - 下划线的不会被处理 - 模板代码如下 \_base.html ```twig {% block title %}{% endblock %} {% block body %}{% endblock %} ``` index.html ```twig {% extends './_base.html' %} {% block title %}标题{% endblock %} {% block body %} 内容 {% endblock %} ``` ##### Vue - 合并 处理前 ```text src ├── js ├── aaa.vue ├── _xxx ├── a.vue ├── b.vue ``` 处理后 ```text dist ├── js ├── aaa.js ├── xxx.js ``` - 基本与JS一样 - 所有有下划线的文件夹都会将其内部的文件合并成一个文件（以当前文件夹命名） #### 使用说明 例： gulp build -p 'C:\\Users\\Administrator\\Desktop\\test' 显示帮助信息(参数一个字母一个中线，如：-p，大于一个字母两个中线，如：--path) gulp 查看任务列表 gulp init 查看(设置)当前配置 -p(--path) 项目地址 类型：string, 默认值：保留上次的值 可多个项目地址，用逗号隔开 前提是多个项目里的每个项目需要预先配配置好 ``` -a(--alias) 可配置别名 给配置起一个别名，下次直接用别名，如 gulp watch -p 'C:\Users\Administrator\Desktop\test\' --src './src' --dist './dist' -a 'demo' --distEx 'C:\Users\Administrator\Desktop\test\dist1\' 下次可直接 gulp watch -a 'demo' -d(--dev) 启用开发模式 类型：bool, 默认值：true --au(--author) 作者 类型：string, 默认值：保留上次的值 -m(--mode) 模式 类型：int, 默认值：保留上次的值 1 - src/ 直接src为源目录(常用)，下面有js,css,images,fonts 11 - src/ 直接src为源目录(常用)，下面有js,css,images,fonts 2 - src/libs libs为源目录，下面有js,css,images,fonts，比1模式多一层 21 - src/libs libs为源目录，下面有js,css,images,fonts，比1模式多一层 4 - ats自身核心开发模式 c - 自定义，有时源代码目录和生成目标目录不是固定， 可以手动指定 --src 源代码目录，当 mode 为"c"时有效 类型：string, 默认值：保留上次的值 PS：与p的相对路径 --dist 源代码目录，当 mode 为"c"时有效 类型：string, 默认值：保留上次的值 PS：与p的相对路径 --scssPaths scss源目录 类型：string, 默认值：保留上次的值 PS：需要绝对路径 --distEx 扩展生成目录，有时我们生成的目录不仅仅只dist目标， 可能还要将生成的文件复制到另一个目录， 这样就可以给ats再多指定一个生成目录 类型：string, 默认值：保留上次的值 PS：需要绝对路径 其它 Js支持es6写法，具体使用在内容里加 // @require('babel') 注意要写在注释里，不然会被解析 ``` gulp build 初始化或同步一个项目 -p -d -a -m --src --dist --distEx 同init ``` --all 重建, 默认不重建，只同步 ``` gulp watch 监控一个项目目录 -p -d -a -m --src --dist --distEx 同init ``` -s(--server) 创建一个web服务器(写静态页面时需要) 类型：bool, 默认值：false -o(--open) 直接在浏览器打开，-s为真时有效 类型：bool, 默认值：false -f(--ftp) 处理的文件后直接上传到远程ftp 类型：bool, 默认值：false ``` gulp add 新加一个分类到项目里 -n(--name) 分类名称 类型：string, 默认值：null gulp clean 清理文件 -p 同build 清理后项目目录下src目录,谨慎使用！ gulp pack:patch 压缩文件并删除原文件 -p 项目地址 ``` -n 打包名称 ``` gulp markdown markdown文件转html -p 从p目录里抓取所有内容，并生成说明文档到当前目录下的docs中 ``` --pEx 可选，默认从p目录里抓取内容，也可以额外指定一个目录一并抓取 -t(--type) 可选，直接从p目录抓取太慢，可以指定类型或者目录，地址抓取 按类型 --type='js,md,twig,css' 按目录 --type='e:/a,e:/b' 按地址 --type='e:/a.md,e:/b.js' ``` gulp webdown 下载网页(扒皮) -h 网页地址 ``` -n 页面名称 -l 内容图片的标志 -d 下载目录 ``` ## 常见问题 ### 08cms 是什么？ ats08 全称08cms automatic tools\(08cms 自动化工具\)； 设计目的，传统的构建工具对于一个刚接触前端的童鞋过于复杂，还要会写js，还要配置插件什么的 为了让前端写页面更简单方便，自己封装了一套工具，使用者只要用命令行指定目录及简单的几个设置就可以用； 简单说ats08是基于gulp开发的一个cli工具； 特别说明：该工具只适合传统的多页面构建，不适合单页面设计，若是单页面请移步Webpack ### 如何安装 08cms？ 在项目目录运行 npm install 08cms，或使用 pnpm add / yarn add / bun add。 ### 08cms 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/08cms 是否存在。 ### 08cms 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=0\.10\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### 08cms 可以商用吗？ 08cms 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。 ### 08cms 还在维护吗？ 最新版本 1\.0\.0 发布于 2017/06/28（9 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2017/06/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。