1构建目录

将前端构建配置文件所在的目录视为构建目录,也视为当前项目的根目录。

  1. - dest
  2. - src
  3. |-- coolie.config.js

此时,coolie.config.js所在的目录src即为项目根目录,用 webstorm 可以非常好的标记项目根目录。

资源路径策略 - 图1

2glob 路径

  • *:多个文件
  • **:多层级目录
  • 资源路径策略 - 图2更多
    coolie 前端构建的配置文件以下配置是支持 glob 路径的:

  • js.main

  • html.src
  • copy
    这些配置,既可以是 glob 字符串,也可以是 glob 字符串数组。
  1. js.main: [
  2. "/path1/**",
  3. "/path2/**"
  4. ]

2.1示例1

  1. /path/to/*

匹配

  1. /path/to/1.js
  2. /path/to/2

不匹配

  1. /path/to/1/1.js
  2. /path/to/1/2

2.2示例2

  1. /path/to/**

匹配

  1. /path/to/1.js
  2. /path/to/2

也匹配

  1. /path/to/1/1.js
  2. /path/to/1/2

coolie-cli 构建配置项是支持 glob 路径的,因此不需要为每一个文件写配置。造成了项目创建写配置,后期基本不需要变化的现象。

3资源路径

  • 静态路径:使用http://https://ftp://ftps:////(自动适应协议)标记的资源。
  • 绝对路径:资源相对根目录,使用/标记的资源。
  • 相对路径:资源相对于当前文件,使用./标记和直接文件名的资源。
    在前端构建的时候,遇到资源路径时,会进行以下处理:

  • 静态路径:自动跳过。

  • 绝对、相对路径:复制或合并或压缩或合并压缩指定资源到指定目录。
    coolie 在处理资源时,会将资源的路径转为绝对路径。
  1. <img src="/src/path/to/image1.png"/>
  2. <img src="./path/to/image2.png"/>
  3. =>
  4. <img src="/dest/res/image1.png"/>
  5. <img src="/dest/res/image2.png"/>

如果加上目标域http://cdn.com/,则:

  1. <img src="/src/path/to/image1.png"/>
  2. <img src="./path/to/image2.png"/>
  3. =>
  4. <img src="http://cdn.com/dest/res/image1.png"/>
  5. <img src="http://cdn.com/dest/res/image2.png"/>

添加coolieignore以忽略资源构建(详见 coolie 指令

  1. <img src="/src/path/to/image1.png" coolieignore/>
  2. <img src="./path/to/image2.png"/>
  3. =>
  4. <img src="/src/path/to/image1.png"/>
  5. <img src="/dest/res/image2.png"/>

原文: https://coolie.ydr.me/introduction/resource-path