本文提及配置 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
});

通过上面两个例子,大家不难看出;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>

那么对上面的配置

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')
})

文档内容有误,可提 PR,文档地址: /doc/docs/api/config.md