fis3—小项目架构

fis3因为做了好多封装,配置起来很简单,只需要引入插件指向对应文件即可,更适合一些小demo;本文是在已安装node、npm的情况下进一步安装fis3。

支持功能:

1、内容嵌入(主要针对图片)、less、自动生成雪碧图、压缩css和js、自动刷新

安装fis3,请注意mac用户安装时前面加sudo,即sudo npm install -g 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 --www //自定义绝对路径

fis3 release -wL //开启自动刷新

fis-conf.js

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

release:'/static/$0',

useHash:true//添加MD5戳,用于强刷缓存

});

fis.match('*.js', {

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

});

fis.match('*.png', {

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

});

fis.match('::package', {

spriter: fis.plugin('csssprites')

});

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

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

});

fis.match('*.css', {

useSprite:true

});

fis.match('*.{less,sass}', {

parser: fis.plugin('less'),// fis-parser-less 插件进行解析

rExt:'.css',// .less 文件后缀构建后被改成 .css 文件

isCssLike:true

});

fis.config.set('settings.spriter.csssprites', {

htmlUseSprite:true,//开启模板内联css处理,默认关闭

styleReg: /(|>))([\s\S]*?)(<\/style\s*>|$)/ig,//默认标签的匹配正则

scale: 1,//雪碧图缩放比例

margin: 10,//图之间的边距

layout:'matrix'//使用矩阵排列方式,默认为线性`linear`

});

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 利用fis3构建前端项目工程 [TOC] FIS3是国内百度公司产出的一款前端工程构建工具,FIS3可以解决前端工...
    JASON_722阅读 1,043评论 0 2
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,278评论 7 35
  • 前端集成解决方案要求: 模块化开发。最好能像写nodejs一样写js,很舒服。css最好也能来个模块化管理! 性能...
    Www刘阅读 3,093评论 1 20
  • 前言 众所周知目前比较火的工具就是gulp和webpack,但webpack和gulp却有所不同,本人两者的底层研...
    cduyzh阅读 1,416评论 0 13
  • 图片发自简书App 今天,我与孩子们一起去了十中,2017年中考体育测试的考点。爸爸妈妈们在考场外等待,眼睛...
    雒江华阅读 1,086评论 8 23