fis3的一些配置

百度fis对于前端的一些自动化操作确实是强大的。以前一直用harpjs来做静态服务器，对于sass、jade等优化也是做的挺好，但是就是配置少了些。

fis3的一些常用配置备份下，尽可能的模拟出harpjs运行环境.

最常用的命令行：

fis3 server start  //启动一个服务
fis3 release -wL   //发布网站，-wL参数为实时自动刷新

最常用的配置：

fis.media()接口提供多种状态功能，比如有些属性配置是开发阶段的，有些是上线时需要起作用的。

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

运行sass,jade等。

//npm install -g fis-parser-sass
fis.match('*.scss', {
  rExt: '.css', // from .scss to .css
  parser: fis.plugin('sass', {
    //fis-parser-sass option,expanded：没有缩进的、扩展的css代码。nested：嵌套缩进的css代码。compact：简洁格式的css代码。compressed：压缩后的css代码
    expanded : true
  })
});

//npm install -g fis-parser-jade
fis.match('*.jade', {
  rExt: '.html',
  loaderLang: 'html',
  parser: fis.plugin('jade', {
    pretty  : true
  })
});

js模块化，以mod.js为例子

// npm install [-g] fis3-hook-module
fis.hook('module', {
    mode: 'commonJs'  // requirejs加载器设置值为 'amd'
});
fis.match('/mod/*.js', {
    isMod: true, // 指明模块文件，组件建议都是匿名方式 define
    release: '/static/$0'
});
fis.match('::package', {
    // npm install [-g] fis3-postpackager-loader
    // 分析 __RESOURCE_MAP__ 结构，来解决资源加载问题
    postpackager: fis.plugin('loader', {
        resourceType: 'commonJs',
        useInlineMap: true // 资源映射表内嵌
    })
})

文件压缩与合并

fis.match('::packager', {
  postpackager: fis.plugin('loader', {
    allInOne: true
  })
});

fis.match('*.{css,scss}', {
  optimizer: fis.plugin('clean-css')
});


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

关于jade编译出来后无法正常解析js模块，和文件正常合并等问题

我用jade编译出来的文件同原生html文件还是有差距的。

无法用上面方法合并压缩文件

js模块不能正确打包，模块化js文件没有正常加载依赖的js文件。

上面的问题折腾了我很久，下载了若干插件还是不行。后来找到了一个解决办法。

fis大牛给出帮助信息了，就是关于 fis3-postpackager-loader 插件静态资源前端加载器，用来分析页面中使用的和依赖的资源（js或css）, 并将这些资源做一定的优化后插入页面中。如把零散的文件合并。

注意:此插件做前端硬加载，适用于纯前端项目，不适用有后端 loader 的项目。因为不识别模板语言，对于资源的分析和收集，比较的粗暴！！！

默认 loader 只会以 html 的方式处理后缀为 .html 的文件，如果希望其他后缀也以 html 的方式去处理，请设置 loaderLang 属性。

fis.match('*.md', {
  loaderLang: 'html'
});

fis3-postpackager-loader 参考文档

Fis中嵌入资源

嵌入资源能解决上面jade的问题。可以在html文件中切入一个jade文件。

<link rel="import" href="a.jade?__inline">

依照这个原理，其实模块化很容易实现。如上a.jade中可以引入相关的css,js文件。当然在css中也可引入css文件。

@import url('demo.css?__inline');

这个会和sass文件中引入scss文件一样。在html这css中文件后缀加上?__inline会将图片文件转化为base64字符串。

Tips

最近es6好像开始火起来了。在fis上试着装了一个es6转es5插件。

//npm install -g fis-parser-es6-babel
fis.set('project.fileType.text', 'es6');
fis.match('*.es6', {
    rExt: '.js',
    parser: fis.plugin('es6-babel', {})
});

一个小问题就是Sublime3无法为.es6的文件语法高亮，其实很简单：

打开文件后点击右下角的Plain Text，在出现的文件格式中选择open all with current extension as… ->”需要显示的语法类型”。这样以后打开这个类型的文件就会自动进行语法高亮了。

全局或本地安装插件

npm install [-g] fis3-hook-relative

fis-conf.js 启用插件

fis.hook('relative');

让所有文件，都使用相对路径。

fis.match('**', { relative: true })