js压缩工具FIS3的安装及使用

原创 2015年11月18日 11:07:37

js压缩工具FIS3的安装及使用

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

   FIS3是百度FEX-TEAM团队开发的前端工具。它可以对一个项目中的静态资源JS(比如JS脚本、CSS文件、图片)进行压缩。所谓的压缩是指将JS脚本和CSS文件中的空格去掉,使占用字节最小。而图片压缩后也会变小;可以将一个项目中的所有脚本合并到一个文件中,这个过程也叫做打包,当然CSS文件和图片也可以打包。

  要想使用FIS3,首先要安装node.js和npm

  1.安装node.js和npm

     1)下载安装文件node.js,node.js的官网是http://nodejs.org/,因为我的电脑是win7,所以选择64位的,然后进行安装

      2)安装后在安装目录中会看到nodejs文件夹下面有npm,直接用npm安装相环境既可。

        

  3)安装fis3

    npminstall -g fis3

-g 安装到全局目录,必须使用全局安装,当全局安装后才能在命令行(cmd或者终端)找到 fis3 命令

安装完成后执行 fis3 -v 判断是否安装成功,如下:

表示安装成功了

   4)压缩js、css、html文件

      FIS3 配置文件(默认fis-conf.js),内容如下:

     

fis.match('*.js', {
  useHash: false, // default is true
  // 指定压缩插件 fis-optimizer-uglify-js 
  optimizer: fis.plugin('uglify-js', {
    // option of uglify-js
  })
});

+fis.match('*.css', {
+  useHash: false, //default is `true`
+  // compress css invoke fis-optimizer-clean-css
+  optimizer: fis.plugin('clean-css', {
+    // option of clean-css
+  })
+});

fis.match('*.html', {
  //invoke fis-optimizer-html-minifier
  optimizer: fis.plugin('html-minifier')
});
fis-conf.js文件的内容来自于FIS3官网的文档

       然后进入进入项目根目录执行命令,进行构建,这里所说的项目根目录是指 FIS3 配置文件(默认fis-conf.js)所在的目录,我的项目根目录是:

    

然后通过cmd进入根目录



    构建发布到项目目录的 output 目录下,命令是: fis3 release -d ./output

   

 然后在同目录下有一个output文件夹,里面是yzfindex.js对应的压缩后的文件






     

fis简单压缩、合并使用方法,fis基本使用

1、基本用法 fis install: 命令安装fis仓库提供的各种 组件、框架、示例、素材、配置等 开发资源。 fis release: 命令用于编译并发布的你的项目,拥有多个参数调整编译发布操作。...

js压缩工具uglify-js--nodejs常用模块(3)

模块介绍 uglify-js是主流的js合并压缩工具,jquery现在用的就是这个工具。支持功能有:文件的合并,生产map文件,去注释去空格,混淆压缩缺点:这个工具只针对js,至少官方没有说明支...

YUI Compressor使用配置方法 JS/CSS压缩工具

YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具,采用Java开发,东西很好用,安装也挺简单的,需要先下载安装jdk才可以,可能有些朋友不懂如何配置的,这里脚本之家为大家分享...

使用Yahoo.Yui.Compressor实现自己的Css&JS压缩工具

网上压缩css和js工具很多,但在我们的系统中总有特殊的地方。也许你会觉得用第三方的压缩工具很麻烦。我就遇到了这样问题,我不想在本地压缩,只想更新到服务器上去压缩,服务器压缩也不用备份之类的操作。于是...

关于web性能的思考与分享[07]——【原创】fis3构建工具使用教程(02)

调式+发布前提回顾 前面一节《【原创】fis3构建工具使用教程(01)》中我们初步介绍了怎么使用fis3进行构建,例如资源定位、雪碧图、压缩资源文件等功能的使用,希望你还记得如何使用它们。如果你忘...

前端构建工具-fis3使用入门

本文主要介绍前端构建工具-fis3 如何使用。 FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规...

fis3前端工程构建工具使用小结

使用百度前端工程构建工具FIS3经验整理 工具集介绍地址:http://fis.baidu.com/fis3/index.html1.安装fis3环境...

关于web性能的思考与分享[06]——【原创】fis3构建工具使用教程(01)

安装 首先安装nodejs,安装的同时会安装npm(该过程略过),详细请参考教程https://nodejs.org,安装完成之后使用命令行工具测试是否安装成功。 windows系统下使用:nod...

CSS,JS文件压缩工具

js/css文件常见的压缩工具有: YUIcompressor GUI TBcompressorESC(ECMAScript cruncher)JSmin GUI:JsMinGUIDojo Sh...
  • e_wsq
  • e_wsq
  • 2011年12月29日 16:49
  • 471

js/css 压缩工具推荐

1.YUI-compressor 使用教程 下面是介绍yuicompressor用命令行方式来调用。 命令行用法 语法: java -jar yuicompressor-x.y.z.jar [opti...
  • qbook
  • qbook
  • 2011年05月09日 10:36
  • 851
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js压缩工具FIS3的安装及使用
举报原因:
原因补充:

(最多只允许输入30个字)