fis3

对于fis的总结好像丢了,再次借鉴官方文档摘抄和总结一些知识点,以供温习和记忆

项目根目录:fis3配置文件(默认fis-conf,js)所在的目录为项目根目录。

fis3 release -d ./output    构建发布到项目目录的output目录下

fis3 release -d ../dist   构建发布到项目父级目录的dist子目录下

对比发布之后和发布之前的引用路径,将相对路径替换成了绝对路径

fis3的构建过程对资源URL进行了替换,替换成了绝对URL,体现了fis一个重要特性:资源定位

接着在项目的根目录执行命令 fis3 release -d ../output发布到../output下,

在默认不配置的情况下只是对资源相对路径修改成了绝对路径,通过配置文件可以轻松分离开发录路径(源码路径)与部署路劲。不如我们想让所有的静态资源构建后到static目录下,在fis.conf.js里面进行配置:

fis.match(‘*.{png,js,css},{

release : ‘/static/$0’

}’);

初始化的fis-conf.js如下本身就带有图片压缩的功能的配置

// default settings. fis3 release

// Global start

fis.match(‘*.{js,css}‘, {

useHash: true//  开启md5戳

});

fis.match(‘::image‘, {

useHash: true

});

//js压缩

fis.match(‘*.js‘, {

optimizer: fis.plugin(‘uglify-js‘)

});

//css压缩

fis.match(‘*.css‘, {

optimizer: fis.plugin(‘clean-css‘)

});

//png图片压缩

fis.match(‘*.png‘, {

optimizer: fis.plugin(‘png-compressor‘)

});

// Global end

// default media is `dev`

fis.media(‘dev‘)

.match(‘*‘, {

useHash: false,

optimizer: null

});

// extends GLOBAL config

fis.media(‘production‘);

虽然有功能配置,单丝缺少相应的插件依旧不能执行,package.json中并没有安装相关的依赖包,压缩功能,添加md5戳还是无法实现。下面开始添加常用的插件:

安装方式都是  npm  install  —save-dev  插件名

1压缩js:fis-optimizer-uglify-js

2压缩css:fis-optimizer-clean-css

3压缩图片:fis-optimizer-png-compressor

4编译less: fis-parser-less-2.x

5编译scss: fis-parse-node-sass

6图片合并:fis-sriter-csssprites  除了配置此插件,还有一项重要的事,就是在需要合并的图片后面加上?__inline

7基于页面的打包:fis3-postpackager-loader

完整的fis-conf.js如下:

//加 md5

fis.match(‘*.{js,css,png,gif}‘, {

useHash: true // 开启 md5 戳

});

// 启用 fis-spriter-csssprites 插件

fis.match(‘::package‘, {

spriter: fis.plugin(‘csssprites‘)

})

// 对 CSS 进行图片合并

fis.match(‘/css/*.css‘, {

useSprite: true

});

//定位资源,将内容发布到release 指向的目录

fis.match(‘/js/*.js‘,{

release:‘/static$0‘

});

fis.match(‘*.{css,less}‘,{

release:‘/static$0‘

});

fis.match(‘/images/(*.{png,gif,jpg})‘, {

//发布到/static/pic/xxx目录下

release: ‘/static/pic$0‘

});

//压缩

fis.match(‘*.js‘, {

optimizer: fis.plugin(‘uglify-js‘)

});

fis.match(‘*.css‘, {

optimizer: fis.plugin(‘clean-css‘)

});

fis.match(‘*.{png,gif,jpg}‘, {

optimizer: fis.plugin(‘png-compressor‘),

release: ‘/static/pic$0‘

});

// less编译

fis.match(‘*.less‘, {

rExt: ‘.css‘, // from .less to .css

parser: fis.plugin(‘less-2.x‘, {

// fis-parser-less-2.x option

}),

release:‘/static$0‘

});

//scss编译

fis.match(‘*.scss‘, {

release:‘/static/css$0‘,

rExt: ‘.css‘,

parser: fis.plugin(‘node-sass‘, {

// options...

})

});

//基于页面的打包

fis.match(‘::package‘, {

postpackager: fis.plugin(‘loader‘, {

allInOne: true

})

});

//发布的时候忽略以下目录或文件

fis.set(‘project.ignore‘, [

‘output/**‘,

‘node_modules/**‘,

‘.git/**‘,

‘.svn/**‘,

‘package.json‘

]);

//设置默认发布的路径,适用于使用自己的服务器替代内置Server,一般没必要

//fis3-deploy-local-deliver

// fis.match(‘*‘, {

//   deploy: fis.plugin(‘local-deliver‘, {

//     to: ‘/Users/lee/Desktop/output‘

//   })

// })

// default media is `dev`

fis.media(‘dev‘)

.match(‘*‘, {

useHash: false,

optimizer: null

});

// extends GLOBAL config

fis.media(‘prod‘);

原文地址:https://www.cnblogs.com/wyliunan/p/8832010.html

时间: 2024-10-20 07:45:36

fis3的相关文章

集成Visual Studio/MSBuild publish 和FIS3

Fis3 是很不错的前端优化工具,功能强大,在国内也比较流行.Visual Studio和MSBuild就不用说了.但是,想把Fis3结合进Visual Studio 或者 MSBuild的开发流程中去,还没见人做过.究其原因,是因为Fis3会改变html页面本身,包括模板文件,如aspx, cshtml, php文件等等,但是,这些文件属于源文件, 是不应当改变的.但是,Visual Studio的发布功能(publish)或者 MSBuild+MSDeploy却提供了把Fis3结合进去的可能

fis3——针对小项目

支持功能: 内容嵌入(主要针对图片).less.自动生成雪碧图.压缩css和js.自动刷新 安装fis3 npm install -g fis3 npm install -g fis-parser-less npm install -g fis3-postpackager-loader fis3 release -d D:/file/demo... //发布路径 fis3 server start fis3 release -wL //开启自动刷新 fis-config.js fis.match

fis3简单教程

#进入工作目录初始化fis3目录(此步非必须,如果当前目录已有fis-conf.js文件,可以不用初始化)fis3 init#部署(<path>为部署目录,如果想部署到当前output目录,可以把<path>替换为./output,支持相对和绝对路径)fis3 release -d <path>#查看server帮助fis3 server -h#启动服务(<port>为端口,设置成本地未被占用的端口即可,<path>为服务器根路径,按需设置)fi

fis3使用环境

1.全局安装nodejs 2.安装http-server npm install http-server -g 3.安装fis3 npm install -g fis3 如要限制版本号写法是:pm install -g fis3@3.3.0 4.安装fis3插件 FIS3 的插件都是以 NPM 包形式存在的,所以安装 FIS3 的插件需要使用 npm 来安装. 如:npm install -g 插件名 npm install -g fis-parser-less //例子引入一个 less 文件

fis3+vue+pdf.js制作预览PDF文件或其他

人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠人玫瑰,手留余香呢?终于时候到了...哈哈 首先容我吐槽一番,在大前端的背景下各种框架层出不穷,相对的各种打包工具也应用而生,要说最火的就是webpack了,用户多所以社区相对活跃,团队维护,网上也有各种各样的问题可以轻易搜到从而解决自己的遇到的各种奇葩问题,所以90%的项目都会采用webpack来

集成Visual Studio/MSBuild的开发/发布流程和 FIS3

Fis3 是很不错的前端优化工具,功能强大,在国内也比较流行.Visual Studio和MSBuild就不用说了.但是,想把Fis3结合进Visual Studio 或者 MSBuild的开发流程中去,还没见人做过.究其原因,是因为Fis3会改变html页面本身,包括模板文件,如aspx, cshtml, php文件等等,但是,这些文件属于源文件, 是不应当改变的.但是,Visual Studio的发布功能(publish)或者 MSBuild+MSDeploy却提供了把Fis3结合进去的可能

学习笔记:FIS3

环境: https://nodejs.org/en/ NODE.js官网(下载后运行:  https://nodejs.org/dist/v4.2.4/node-v4.2.4-x64.msi v4.2.4 LTS ) 安装在:  C:\nodejs\, 进入此目录,输入: npm install -g fis3 安装完后,敲入命令: node -v /* v4.2.4 */ npm -v /* 2.14.12 */ fis -v /* 1.9.39 */ npm update -g fis3 /

fis3 开启相对地址

fis3 开启相对地址//全局或本地安装插件  npm install -g fis3-hook-relative  //启用插件  fis.hook('relative');  //让所有文件,都使用相对路径.  fis.match('**', { relative: true })

fis3的简单使用

fis3的教程官网:http://fis.baidu.com/fis3/docs/beginning/intro.html FIS3 是什么 FIS3 是面向前端的工程构建工具.解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题. 基本配置(fis-conf.js): //打包配置fis.match('::package', { postpackager: fis.plugin('loader', { //allI

node.js 安装 和fis3安装

然后一路点击下一步 然后点击install按钮 开始安装node.js 然后运行命令行, 在所有程序中找到命令提示符,输入cmd,会跳入如下图,在输入node如果进入到>提示说明node.js安装成功 运行命令行,输入npm如果出现以下提示说明npm命令可以正常使用 接下来在输入"npm install -g fis3" 如果出现错误,说明权限受限 要以管理员身份进入 找到命令提示(管理员)进入cmd 在输入"npm install -g fis3" 如果出现