fis3的简单使用

fis3的教程官网：http://fis.baidu.com/fis3/docs/beginning/intro.html

FIS3 是什么

FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。

 

基本配置(fis-conf.js):

//打包配置
fis.match('::package', {
    postpackager: fis.plugin('loader', {
        //allInOne: true,
        processor: {
            ".jade": "html",    //预编译把jade模板当成是Html，这样在资源定位上会替换成功，不然资源定位会失效
            ".html": "html"
        }
    }), //打包载入资源配置
    spriter: fis.plugin("csssprites", {
        //使用矩阵排列方式，默认为线性`linear`
        layout: 'matrix',
        scale: 1,
        margin: 10
    })  //打包阶段设置合并雪碧图
});

 

 

// 加 md5

fis.match('*.{js,css,png}', { useHash: true });

// 启用 fis-spriter-csssprites 插件

fis.match('::package', { spriter: fis.plugin('csssprites') })

// 对 CSS 进行图片合并

fis.match('*.css', { // 给匹配到的文件分配属性 `useSprite` useSprite: true });

fis.match('*.js', { // fis-optimizer-uglify-js 插件进行压缩，已内置

optimizer: fis.plugin('uglify-js') });

fis.match('*.css', { // fis-optimizer-clean-css 插件进行压缩，已内置

optimizer: fis.plugin('clean-css') });

fis.match('*.png', { // fis-optimizer-png-compressor 插件进行压缩，已内置

optimizer: fis.plugin('png-compressor') });

 

 

所需要的FIS插件

fis3-hook-relative   --FIS所采用的编译后资源都是用绝对定位的，如果要想资源使用相对定位呢，可以安装此插件

fis.hook("relative"); //使用资源相对定位插件
fis.match("**", {
    relative: true
});

fis-parser-jade   --jade模板编译插件

fis.match("**.jade", {
　　parser: fis.plugin("jade", {

    　　pretty: false
　　}),
　　rExt: ".html"

});

fis-parser-sass   --sass编译插件

fis.match("**.scss", {

　　parser: fis.plugin('sass'),

　　rExt: ".css"

});

......补充

转载于:https://www.cnblogs.com/yinglau/p/4843685.html