Reasy纯前端工具使用教程(二)

Reasy内置插件用法

注：目前每个插件都尽可能地编写了详细的readme及example，使用前可以去github上把每个插件本身clone下来，然后参考reasy

Reasy 目前内置的插件集有(FIS3内置的除外)：

reasy-parser-sass，sass编译插件，增加了对node-sass最新功能的支持，并解决了国内用户安装不上的问题
fis-parser-less, less编译插件
fis-hook-modules, 模块化插件, 可以对Amd,Cmd等模块化方案进行一键封装
fis-parse-art-template, 对artTemplate前端模板编译进行了封装，实现模板静态预编译
fis3-hook-iconfont, svg图标自动转字体文件的插件
fis-lint-jshint, 基于jshint的静态代码检查插件
fis-postprocessor-autoprefixer, css私有前缀自动补全插件
fis-parse-js-macro, js宏定义预处理插件
reasy-command-b28, b28多国语自动转化插件
fis-optimizer-html-minifier, html压缩插件
reasy-command-rules, 该插件主要用于检测用可用规则。
fis3-hook-relative, 相对路径生成插件
reasy-postpackager-qunit, 自动化单元测试插件,该插件目前存在部分用户安装不上的问题，所有暂时没有内置。
fis3-deploy-replace, 多路径发布插件
web-debug, 纯前端调试辅助工具。

fis-parser-less

less编译插件，能够自动将less文件编译为css文件

语法

less语法详见 http://less.bootcss.com/functions/

Demo

fis
.match('**.less', {
    parser: fis.plugin('less')
})
.match('**mixins/**.less', {
    release: false
});

reasy-parser-sass

sass编译插件，自动将scss文件编译为css，并且具有自定义全局控制变量的功能。

语法

saas语法详见 Sass入门或 Sass中文网

Demo

fis-conf.js

fis.match('**.scss', {
  parser: fis.plugin('sass', {
    sourceMap: false, //设置不输出map文件，默认为true。 注：map文件可以用于辅助定位，调试阶段建议输出
    define: {//scss预定义变量，可以使用配置控制sass编译
      product: 'mobile',
      defaultColor: '#000'
    }
  }),
  rExt: 'css' //将scss文件格式转为css文件
});

a.scss

@if ($product == mobile) {
  body {
    color: $defaultColor;
  }
} @else {
  body {
    color: #111;
  }
}

fis-parser-art-template

基于artTemplate的预编译插件

语法

artTemplate语法

artTemplate有两种语法，原生语法和简洁语法，默认为simple简洁语法，关于模版语法请参见 https://github.com/aui/artTemplate/#%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95

artTemplate数据设置

为了便于控制与项目重构，实现数据与模版分离，目前采用的方式主要有: 1. 与模版文件同名的json文件 2. 全局数据config.json 3. fis-conf.js里面的define

数据以JSON形式或js对象形式存在。为了方便全局控制，全局数据采用了路径设值的方法，即对象前面的层级为文件路径，最后一级对象为该路径文件的数据，如：

{
  "index/": {
    "index.html": {
      title: "首页",
      scripts: ["index.js"],
      release: false,//特殊属性，用于控制文件输出，false表示不输出
      noParse: false //特殊属性，用于告诉解析器无需编译此文件，直接原样输出
    }
  }
}

表示为index/index.html设置

{
  title: "首页",
  scripts: ["index.js"],
  release: false,//特殊属性，用于控制文件输出，false表示不输出
  noParse: false //特殊属性，用于告诉解析器无需编译此文件，直接原样输出
}

它也可以写成：

{
  "index/index.html": {
    title: "首页",
    scripts: ["index.js"],
    release: false,//特殊属性，用于控制文件输出，false表示不输出
    noParse: false //特殊属性，用于告诉解析器无需编译此文件，直接原样输出
  }
}

属性具有继承性，即父一级的属性可以被子级继承，如：

{
  "title": "product",
  "scripts": ["common.js"],
  "home/": {
    "title": "home module",
    "scripts": ["home.js"],
    "home.html": {
      data: "hello world!"
    }
  }
}

那么home/home.html最终得到的变量为：

{
  "title": "home module",
  "scripts": ["common.js", "home.js"],//注意：数组属于延长继承，同样，对象{}类形也是如此
  "data": "hello world!"
}

解析器区分是否为路径主要是看有没有后缀，没有进行更多检测，所以文件名务必加上后缘，而变量切勿使用类文件名变量

release以及noParse为特殊系统变量，分别表示是否输出文件和是否解析，true为是，false为否

Demo

//fis-conf.js  fis3
fis.match('**.{html,tpl}', {
    parser: fis.plugin('art-template', {
        native: false,//表示不使用原生语法解析，默认为false
        define: {
            "title": "hello, art-template",
            "stylesheets": ["main.css"],
            "scripts": ["main.js"],
            "module/": {
              "title": "home module",

              "home.tpl": {
                "stylesheets": ["home.css"],
                "scripts": ["home.js"]
              }
            },
            "index.tpl": {
              "stylesheets": ["index.css"],
              "scripts": ["index.js"]
            }
        }
    })
});

更多demo详见 https://github.com/lwdgit/fis-parser-art-template/tree/reasy/example

fis-parse-js-macro

JS轻量的宏定义引擎，主要用于JS预编译输出

语法

采用 ｛｛｝｝做为界定符。如｛｛if true｝｝

暂时支持的标记有 if, else, else if, elseif以及=value写法，支持嵌套。

js-macro

用法

fis.match('**.{jsm,js}', {
  parser: fis.plugin('js-macro', {
    define: {
      product: 'mobile'
    }
  })
})

Demo

详见 https://github.com/lwdgit/fis-parser-js-macro/tree/master/example

fis-postprocessor-autoprefixer

css自动补全与清理插件。它可以自动补全css3样式，并清理不必要的冗余样式。注：不支持ie8以下的非css3样式补全，如filter

配置规则

详见 https://github.com/ai/browserslist#queries

用法

reasy.extend('autoprefix');

或

fis.match('**.{css,less,scss}', {
  postprocessor: fis.plugin('autoprefixer', {
      "browsers": ["last 30 versions"],
      "cascade": true,
      "remove": true
  })
})

fis3-hook-iconfont

一款将svg图标文件转化为字体文件的插件，并能自动生成对应样式。

背景

目前移动端iconfont字体使用越来越广泛，由于缺少比较好的自动化工具，开发者在修改字体图标时需要在手动转换(svg转ttf)才能完成字体生成工作。

官方的fis-command-webfont插件只能在fis里面单独调用，无法集成在编译过程中。本插件实现了将转化过程集成在编译中，并能自动更新对应css，进一步简化了字体图标修改的步骤。

您可以通过第三方平台来了解字体生成与转换过程: https://icomoon.io/app/#/select/font 、 https://everythingfonts.com/#

用法

reasy.extend('iconfont');
//或
fis.hook('iconfont', {
    'fonts': '**.svg', //图标文件
    'destFont': 'fonts', //产出字体目录
    'fontName': 'reasy_font', //产出字体名称
    'destHtml': 'fonts/demo.html',//用于展示如何使用该字体，如果无需输出示例页面，请设置为false
    'destCss': 'style/font.css',//注：如果css文件已经存在，则会将对应位置的样式占位符替换为字体样式，默认跟字体在一块
    'iconClass': 'reasy-font',//定义字体图标应用的主样式，默认为icon-font
    'placeholder': 'reasyfont'//css占位符，用于自动替换指定位置的字符串为css,默认跟fontName一致
    //占位符形式为 : /**reasyfont**/ ...css /**end reasyfont**/
});

如a.css文件里面有如下代码：

body {
  background: #fff;
}
/**reasyfont**/


/**end reasyfont**/

则会被替换为：

body {
  background: #fff;
}

/********reasyfont********/
@font-face {
  font-family:"reasy_font";
  src:url("../fonts/reasy_font.eot");
  src:url("../fonts/reasy_font.eot?#iefix") format("embedded-opentype"),
    url("../fonts/reasy_font.woff") format("woff"),
    url("../fonts/reasy_font.ttf") format("truetype"),
    url("../fonts/reasy_font.svg#reasy_font") format("svg");
  font-weight:normal;
  font-style:normal;
}

.reasy-font {
  font-family:"reasy_font";
  display:inline-block;
  vertical-align:middle;
  line-height:1;
  font-weight:normal;
  font-style:normal;
  speak:none;
  text-decoration:inherit;
  text-transform:none;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}


.icon-advanced:before {
  content: '\e001';
}

... other css...

/******end reasyfont********/

Demo

见 https://github.com/lwdgit/fis3-hook-iconfont/tree/master/example

reasy-postpackager-qunit

此插件用于自动进行qunit单元测试，测试浏览器采用的是phantomjs，因phantomjs比较难安装上（需要FQ），所以暂时没有将该插件内置。有条件的可以自行安装。

关于单元测试

在计算机编程中，单元测试（又称为模块测试）是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中，一个单元就是单个程序、函数、过程等；对于面向对象编程，最小单元就是方法，包括基类（超类）、抽象类、或者派生类（子类）中的方法。 — 引自维基百科

如果你以前从未写过任何单元测试，你可能直接将你的代码上到网站上，点击一会看看是否有什么问题出现，并且尝试去解决你所发现的问题，采用这种方法会有很多的问题。首先，这是很腻烦的。点击事实上并不是一件轻松的工作，因为你不得不确保每样东西都被点到而且很有可能你错过了一个或两个。

其次，你为测试做的每件事情是不能复用的，这意味着它很难回归。什么是回归？想像一下你写了一些代码并测试，修复了所有你发现的缺陷，然后发布。此时，一个用户发送了一些关于新缺陷的反馈，并且需要一些新功能。你返回到代码中，修复这些新缺陷并增加新功能。接下来可能会发生的就是一些旧的缺陷又重现了，这就叫“回归” 。看，现在你还得再去点击一遍，而且有可能你还找不到这些旧的担担缺陷；即使你这么做，这还需要一段时间才能弄清楚你的问题是由回归引起的。使用单元测试，你写测试去发现缺陷，一旦代码被修改，您通过测试再筛选一次。如果回归出现，一些测试一定会失败，你可以很容易地认出他们，知道哪部分代码包含了错误。既然你知道你刚才修改了什么，就可以很容易地解决。

另外一个单元测试的优点，尤其是对于web开发来说: 它使跨浏览器兼容性测试很容易。仅仅在不同浏览器中运行你的测试案例就行，如果一个浏览器出现问题，你修复它并重新运行这些测试案例，确保不会在别的浏览器引起回归，一旦全部通过测试，你可以肯定的说，所有的目标浏览器都支持。出处 http://www.zhujiangroad.com/program/JavaScript/74222.html

关于QUnit

QUnit（http://qunitjs.com/）是一个非常强大的javascript单元测试框架，可以帮你调试代码。它是由 jQuery 团队的成员写的，而且是 jQuery 的官方测试套装。但QUnit一般是足以测试任何常规 javascript 代码，它甚至可能通过一些 javascript 引擎比如 Rhino 或 V8 来测试服务器端 JavaScript 。

关于QUnit的教程网上有很多，这里就不在细说，官方网站：http://qunitjs.com/

用法

reasy.extend('qunit');
//或

fis.match('::packager', {
  postpackager: fis.plugin('qunit', {
    all: ['test/*.html']
  })
});

测试代码 reasy-ui

fis-lint-jshint

对js进行静态检查的工具。

注：使用lint模块需要在命令行上加上-l选项

用法

纯命令行：reasy -c -l -R jshint
配置

  reasy.extend('jshint');//or reasy.extend('jshint', {/**config**/});
  //或
  fis.match('**.js', {
        lint: fis.plugin('jshint', {
            i18n: 'zh-CN',
            //jshint options
            es3: true,
            camelcase: true,
            curly: true,
            eqeqeq: true,
            forin: true,
            immed: true,
            latedef: true,
            newcap: true,
            noarg: true,
            noempty: true,
            ignored: [/(\bj\b|\bjquery|zepto|reasy|bootstrap|\brequire|\bsea|shim\b|shiv\b|\blib|\bcomponent|\bmin\b).*\.js/i]
        })
  })

fis3-hook-relative

将绝对路径转为相对路径的插件。

用法

reasy.extend('relative');
//或

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

fis-optimizer-html-minifier

html压缩插件

用法

fis.match('**.html', {
    optimizer: fis.plugin('html-minifier')
});

fis-hook-modules

模块化插件，此插件可以实现对模块(CMD,AMD)的自动封装。

关于模块化

详见：http://fis.baidu.com/fis3/docs/lv3.html#%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91

用法

reasy.extend('sea', moduleDir);//sea.js作为示例，moduleDir表示模块化代码的目录,默认为modules

//或

fis.hook('module', {
    mode: 'cmd',

    // 记得设置这个。
    forwardDeclaration: true,

    baseUrl: moduleDir,
    paths: paths
})
.match(moduleDir + '/**.js', {
    isMod: true
})
.match(moduleDir + '/sea*.js', {
    isMod: false
}, true)
.match('::packager', {
    postpackager: fis.plugin('loader')
});

Demo

见 https://github.com/fex-team/fis3-demo/blob/master/use-seajs/

Reasy的Demo库

因Reasy全面兼容FIS3，所以不再提供单独的Demo库，这里给出FIS3官方库：https://github.com/fex-team/fis3-demo/

另外reasy的extend只是一些预写好的配置，主要是为了进一步简化FIS3的使用，有兴趣的可以查看 https://github.com/wEasyTeam/reasy/tree/master/rules

Reasy纯前端自动构建工具

基于fis3的纯前端工程自动化工具

Reasy纯前端工具使用教程(二)

Reasy内置插件用法

fis-parser-less

语法

Demo

reasy-parser-sass

语法

Demo

fis-parser-art-template

语法

Demo

fis-parse-js-macro

语法

用法

Demo

fis-postprocessor-autoprefixer

配置规则

用法

fis3-hook-iconfont

背景

用法

Demo

reasy-postpackager-qunit

关于单元测试

关于QUnit

用法

fis-lint-jshint

用法

fis3-hook-relative

用法

fis-optimizer-html-minifier

用法

fis-hook-modules

关于模块化

用法

Demo

Reasy的Demo库