ats08
简介
ats08 全称08cms automatic tools(08cms 自动化工具);
设计目的,传统的构建工具对于一个刚接触前端的童鞋过于复杂,还要会写js,还要配置插件什么的
为了让前端写页面更简单方便,自己封装了一套工具,使用者只要用命令行指定目录及简单的几个设置就可以用;
简单说ats08是基于gulp开发的一个cli工具;
特别说明:该工具只适合传统的多页面构建,不适合单页面设计,若是单页面请移步Webpack
集成功能
- sass生成css
- js语法检查、压缩、合并
- 图片压缩,合并
- 字体压缩,合成
- 浏览器自动刷新
- ftp自动上传
- html模板,基于swig模板引擎
- markdown文件生成说明文档
- 自动抓取js的说明信息生成js说明文档
- vue 转 js
安装node插件
node
git
安装 请自行百度- 在版本库里右键git bash here打开命令行工具(当然用cmd,powershell也可以)
- 执行命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用淘宝镜像 - 执行命令
cnpm install
这个过程要很久,20-30分钟,期间会安装一系列插件 - 如果没有显示
npm ERR
表示安装完毕,如果显示再执行cnpm install
目录结构
├── .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
- 合并 合并前
src ├── js ├── _xxx ├── a.js ├── b.js
合并后
dist ├── js ├── xxx.js
- 所有有下划线的文件夹都会将其内部的文件合并成一个文件(以当前文件夹命名)
- 代码里加
// @require('babel')
标记里,代码可以使用es6写法,工具会自动转换
Images
- 合并 合并前
src ├── images ├── _xxx ├── a.png ├── b.png
合并后
dist ├── images ├── xxx.png - 合成后的图片 ├── xxx.html - 可以直接打开预览调用方式 src ├── css ├── _img-xxx.scss - 可直接 `@impot '_img-xxx'`合成后图片的css
- 合并后 所有有下划线的文件夹都会将其内部的文件合并成一个文件(以当前文件夹命名)
Fonts
- 合并 合并前
src ├── fonts ├── _xxx ├── a.svg ├── b.svg
合并后
dist ├── fonts ├── xxx.eot - 合成后的字体 ├── xxx.woff - 合成后的字体 ├── xxx.html - 可以直接打开预览调用方式 src ├── css ├── _font-xxx.scss - 可直接 `@impot '_font-xxx'`合成后字体的css
- 合并后 所有有下划线的文件夹都会将其内部的文件合并成一个文件(以当前文件夹命名)
Html
- 合并 合并前
src ├── _base.html ├── index.html
合并后
dist ├── index.html
- 支持swig模板引擎
- 下划线的不会被处理
- 模板代码如下 _base.html
{% block title %}{% endblock %} {% block body %}{% endblock %}
index.html
{% extends './_base.html' %}{% block title %}标题{% endblock %}{% block body %}内容{% endblock %}
Vue
- 合并 处理前
src ├── js ├── aaa.vue ├── _xxx ├── a.vue ├── b.vue
处理后
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 下载目录