当前焦点!简单了解一下FIS yarnglobaladdfis3使用方法

简单了解一下FIS

(相关资料图)

一、基本使用二、fis的编译与压缩2.1、编译scss2.2、编译js2.3、压缩 三、respect

一、基本使用

安装

yarn global add fis3

因为fis3.0版本相较于之前版本有了很大变化，所以单独取名为fis3

使用

fis3 release

release方法是fis3当中默认的构建任务，这个构建任务会将项目中所有需要被构建的文件自动构建到一个临时目录当中，这个目录一般在用户目录中可以找到 我们也可以指定构建输出目录

fis3 release -d output

指定构建结果输出到根目录的output目录中 可以看到构建成功了，但是fis并没有对这些需要编译的文件进行转换，而是直接将它们输入到文件夹当中。默认只是将代码当中对资源文件的引用相对路径转换成绝对路径，从而实现资源的绝对定位。 资源定位是fis当中的核心特性，它的作用就是将我们开发阶段的路径彻底地与部署的路径之间的关系分离开。 我们也可以通过配置文件将输出的资源文件指定到assets目录下，做法就是新建一个 fis-conf.js文件，内容如下：

// 在fis-conf.js文件当中，有一个特有的全局对象fis// 利用fis.match方法去为我们在构建任务当中匹配到的一些文件添加一些指定的配置fis.match("*.{js,scss,png}", {// 为js/scss/png文件添加配置    // 将它们release后的结果放入assets下面的$0，$0指的就是当前文件的一个原始目录结构    release: "/assets/$0" })

此时再执行fis3 release -d output，资源文件就会都在assets里面了 html文件中对资源文件的引用路径也自动转换了。

二、fis的编译与压缩

2.1、编译scss

安装 fis-parser-node-sass

yarn add fis-parser-node-sass --dev

之后在 fis-conf.js文件中配置

fis.match("**/*.scss", {// 通过fis的plugin方法自动载入fis-parser-node-sass插件    parser: fis.plugin("node-sass"),// 这样一来就会自动转换scss文件中的语法，但是扩展名并不会被修改    rExt: ".css" // 修改扩展名})

如此依赖构建任务就会将scss文件内的语法进行转换，并修改扩展名为css，同时html文件中的引用路径也会自动修改。

2.2、编译js

安装 fis-parser-babel-6.x，因为fis官方发布的插件是基于babel6的版本

yarn add fis-parser-babel-6.x --dev

之后在 fis-conf.js文件中配置即可

fis.match("**/*.js", {parser: fis.plugin("babel-6.x") })

2.3、压缩

压缩不需要再额外安装插件，都是fis中自带的，只需要再fis-conf.js中配置即可，完整配置如下：

fis.match("*.{js,scss,png}", {// 为js/scss/png文件添加配置    // 将它们release后的结果放入assets下面的$0，$0指的就是当前文件的一个原始目录结构    release: "/assets/$0" })// 转换scss文件语法fis.match("**/*.scss", {// 通过fis的plugin方法自动载入fis-parser-node-sass插件    parser: fis.plugin("node-sass"),// 这样一来就会自动转换scss文件中的语法，但是扩展名并不会被修改    rExt: ".css", // 修改扩展名    optimizer: fis.plugin("clean-css") // 压缩css})// 转换js文件语法fis.match("**/*.js", {parser: fis.plugin("babel-6.x"), // 因为fis官方发布的插件是基于babel6的版本    optimizer: fis.plugin("uglify-js")// 压缩js})

三、respect

我们还可以通过respect命令去查看fis构建的详细过程

fis3 inspect

如图，可以看到构建过程中对文件执行了那些操作