node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

08cms

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.scssdist/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
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    {% block body %}{% endblock %}
</body>
</html>

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