CYB-CLI

# 目录结构及HTML模板

# 基本目录结构

project
├── package.json             # 项目package文件，可以自行安装扩展npm功能包
├── cyb.config.js            # cyb功能配置文件
├── .babelrc                 # babel配置文件（可自行安装插件扩展配置）
├── webpack.config.js        # webpack配置文件（可选）
└── src                     
    ├── static               #（建议将静态资源部署到此目录）
    │   ├── fonts            
    │   ├── images           
    │   └── styles      
    │       └── 页面名称.{css,less,sass,styl}   # 必须在styles根目录入口样式才会被编译(可选的样式部署方式)
    └── views               
        ├── 页面名称          # 页面目录名
        │   ├── index.html   # 必须以index命名
        │   ├── index.js     # 必须以index命名
        │   ├── index.{css,less,sass,styl}     # 必须以index命名（可选的样式部署方式）
        │   └── folder       #可以自定义创建目录（用于存放模块级别的js/样式/字体/图片等，通过webpack的import方式引入）             
        └── public           # 公共文件目录（可选）
            └── folder       # 可以自定义创建目录（可选）

为了提高项目的功能扩展和可维护性，以上是工程框架建议的文件开发结构，每个项目团队可以根据团队情况，自行规划统一的详细的目录结构。

目录规则

  • src 源码目录（必须）
  • src/views 逻辑代码存放目录（必须）
  • src/views/页面名称 存放以页面为单位的前端资源
  • src/views/页面名称/index.html 页面html（必须以index命名）
  • src/views/页面名称/index.js 页面脚本（必须以index命名）

# HTML模板

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="no" />
  <meta name="format-detection" content="telephone=no">
  <title>页面标题</title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <!-- inject:vendor:css -->
  <!-- endinject -->
  <!-- inject:common:css -->
  <!-- endinject -->
  <!-- inject:page:css -->
  <!-- endinject -->
</head>

<body>
  <!--  html代码-start  -->

  <!--  html代码-end/  -->
  <!-- inject:vendor:js -->
  <!-- endinject -->
  <!-- inject:common:js -->
  <!-- endinject -->
  <!-- inject:page:js -->
  <!-- endinject -->
</body>

</html>

HTML模板规则

  • 样式在顶部，脚本在底部
  • <!-- inject:vendor:css --> 第三方框架库样式
  • <!-- inject:common:css --> 项目公共样式
  • <!-- inject:page:css --> 本页面样式
  • <!-- inject:vendor:css --> 第三方框架库脚本
  • <!-- inject:common:css --> 项目公共脚本
  • <!-- inject:page:css --> 本页面脚本

在构建过程中，对应资源链接会被自动注入。

# preload

<link rel="preload"> 是一种 resource hint，用来指定页面加载后很快会被用到的资源，所以在页面加载的过程中，我们希望在浏览器开始主体渲染之前尽早 preload。如果在html模板中，加入对应的注释标签，cyb-cli 会为初始化渲染需要的文件自动生成 preload 代码。

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <!-- inject:preload:js -->
  <!-- endinject -->
  <!-- inject:preload:css -->
  <!-- endinject -->
  <!-- inject:preload:eot -->
  <!-- endinject -->
  <!-- inject:preload:ttf -->
  <!-- endinject -->
  <!-- inject:preload:woff -->
  <!-- endinject -->
  <!-- inject:preload:woff2 -->
  <!-- endinject -->
</head>

<body>
</body>
</html>

以上代码会被cyb-cli编译成：

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <link rel="preload" href="**/*.*.js" as="script" crossorigin="anonymous">
  <link rel="preload" href="**/*.*.css" as="style" crossorigin="anonymous">
  <link rel="preload" href="**/*.*.eot" as="font" crossorigin="anonymous">
  <link rel="preload" href="**/*.*.ttf" as="font" crossorigin="anonymous">
  <link rel="preload" href="**/*.*.woff" as="font" crossorigin="anonymous">
  <link rel="preload" href="**/*.*.woff2" as="font" crossorigin="anonymous">
</head>

<body>
</body>
</html>

# 多页和单页应用

  • src/views/页面名称 存放以页面为单位的前端资源
  • src/views/页面名称/index.html 页面html（必须以index命名）
  • src/views/页面名称/index.js 页面脚本（必须以index命名）
project
└── src                     
    └── views               
        ├── 页面名称1          # 页面目录名 最终编译为 dist/{页面名称1}.html
        ├── 页面名称2         # 页面目录名 最终编译为 dist/{页面名称2}.html         
        └── public           # 公共文件目录（可选）
            └── folder       # 可以自定义创建目录（可选）

# custum 文件夹

任何放置在 custum 文件夹的静态资源都会被简单的复制，而不经过任何编译。你需要通过绝对路径来引用它们。

适合的文件类型

  • 音频文件(mp3/WAV/Mid等)
  • 视频文件（Mp4/MOV/AVI等）
  • 图像文件(jpg/jpeg/png/svg等)
  • Flash(swf)文件
  • 文档格式的文件（Doc/PPT/PDF等）
  • 无需编译的样式或脚本文件

部署目录

project
└── src                     
    └── custom
         ├── 文件...
         ├── 文件...                   
         └── folder           # 可以自定义创建目录（可选）
              ├── 文件...                   
              └── 文件...

发布项目时会自动将custom目录中所有文件不做任何编译，不添加版本号，并发布到dist目录。dist/custom/*

← CSS相关 →