fis3

Posted 2020-10-31 kim

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‘);