# 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` 安装 请自行百度 1. 在版本库里右键git bash here打开命令行工具(当然用cmd,powershell也可以) 1. 执行命令`npm install -g cnpm --registry=https://registry.npm.taobao.org` 使用淘宝镜像 1. 执行命令`cnpm install` 这个过程要很久，20-30分钟，期间会安装一系列插件 1. 如果没有显示`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 下载目录