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

目录结构

    
├── .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

    <title>{% block title %}{% endblock %}</title>


    {% 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	下载目录