Skip to content

Latest commit

 

History

History
161 lines (116 loc) · 4.68 KB

config.md

File metadata and controls

161 lines (116 loc) · 4.68 KB
Raw

本文提及配置 API & 属性都可以在 配置 API 和 配置属性 找到

FIS3 配置设计了一套类似 css 的规则，而就如同 css 一样，有 !important 也有 @media，那么就在这篇文档中揭露我们的类 css 配置；默认情况下，配置文件写到 fis-conf.js文件中，此文件放到项目的根目录下，或说有此文件的目录被看做是项目根目录

以下例子配置内容，都应该指的是 fis-conf.js 的内容，不再特别说明；

通过 API fis.match() FIS3 在处理的时候首先会加载项目内的所有文件，然后通过 fis.match() 来为某一个文件分配不同的属性，这些属性叫做文件属性。这些属性控制这个文件经过怎么样的操作；

先来一个例子

启用插件的例子

fis.match('a.js', {
    optimizer: fis.plugin('uglify-js')
});

fis.match('b.min.js', {
    optimizer: null
})

如上面，a.js 文件分配了属性，其中处理过程中会调用 fis-optimizer-uglify-js 插件进行压缩；而已经压缩过的 b.min.js 就不需要进行压缩了，那么它的 optimizer 就设置为 null；

可以不设置这个属性为 null 因为默认为 null

规则覆盖的例子

假设 fis.match() 给若干文件分配了属性，当两个规则之间匹配的文件相同时，后设置的可以覆盖前面设置的属性，如果前面规则没有某属性则追加；

fis.match('{a,b,c}.js', {
    optimizer: fis.plugin('uglify-js')
});

fis.match('{a,b}.js', {
    isMod: true,
    optimizer: null
});
  • c.js 分配到的属性是 {optimizer: fis.plugin('uglify-js')}，意思是最终会被压缩
  • a.js 和 b.js 分配到的属性是 {isMod: true, optimizer: null} 意思是最终会附带属性 isMod 并进行组件化处理、不做压缩

通过上面两个例子，大家不难看出；FIS3 设计的是一套类 css 的配置体系，那么其中 fis.match() 就是用来设置规则的；其中第一个参数可当成是 selector 其设置的类型是 glob 或者是 [正则][]；

media

多状态，刚才说到过，FIS3 中都靠给文件分配不同属性来决定这个文件经过哪些处理的；那么 media 就能让我们在不同状态（情形）下给文件分配不同属性；这个任务就由 fis.media() 完成；

假设我们有如下需求，当在开发阶段资源都不压缩，但是在上线时做压缩，那么这个配置如何写呢；

//default `dev` mode
fis.match('**.js', {

});

fis.media('prod')
    .match('**.js', {
        optimizer: fis.plugin('uglify-js')
    })
    .match('**.css', {
        optimizer: fis.plugin('clean-css')
    });

这样就写完了，那么怎么在编译发布的时候使用 media 呢，是这样的；

fis3 release <media>

那么对上面的配置

  • fis3 release 默认开发状态不做压缩
  • fis3 release prod 上线编译调用

important

fis.match() 的第三个参数就是设置 !important 的，那么设置了这个属性后，后面的规则就无法覆盖了。

比如

fis.match('{a,b,c}.js', {
    optimizer: fis.plugin('uglify-js')
}, true);

fis.match('a.js', {
    optimizer: null
})

这样的设置下，当 a.js 处理使还是会被调用压缩器进行压缩；

::package

fis.match('::package', {
   packager: fis.plugin('map')
});

表示当 packager 阶段所有的文件都分配某些属性

::image

// 所有被标注为图片的文件添加 hash
fis.match('::image', {
  useHash: true
});

::text

// 所有被标注为文本的文件去除 hash
fis.match('::text', {
  useHash: false
});

:js

匹配模板中的内联 js，支持 isHtmlLike 的所有模板

// 压缩 index.html 内联的 js
fis.match('index.html:js', {
  optimizer: fis.plugin('uglify-js')
});

// 压缩 index.tpl 内联的 js
fis.match('index.tpl:js', {
  optimizer: fis.plugin('uglify-js')
})

:css

匹配模板中内联 css，支持 isHtmlLike 的所有模板

// 压缩 index.html 内联的 css
fis.match('index.html:css', {
  optimizer: fis.plugin('clean-css')
});

// 压缩 index.tpl 内联的 css
fis.match('index.tpl:css', {
  optimizer: fis.plugin('clean-css')
})