FIS3学习笔录一

FIS3，前端工程构建工具，解决前端中性能优化，资源加载（异步，同步，按需，预加载，依赖管理，合并，内嵌），模块化开发，自动化工具，开发规范，代码部署等问题。看到这堆文字，还是没有任何感受，硬生生的文字，一点都不形象，那就看后面的具体化吧！

---

准备工作

1. 确保安装了NodeJs环境；
   下载地址：https://nodejs.org/en/
2. 安装fis3:
   npm install -g fis3
3. 创建一个自己的项目目录，cd 进入此目录中初始化，执行：
   fis3 init
4. 对需要的插件进行安装 ，比如安装scss编译插件：
   npm install -g --save-dev fis-parser-node-sass

安装常用插件和配置

在执行初始化后，会出现两个很重要的文件，package.json和fis-conf.js，对于用过gulp和grunt的人肯定很熟悉的。

初始化的fis-conf.js如下，本身就带有js，css，png图片压缩的功能的配置（中文自己注释的）：

// 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

fis.match('*.js', {
  optimizer: fis.plugin('uglify-js')
});

2.压缩css：fis-optimizer-clean-css

fis.match('*.css', {
  optimizer: fis.plugin('clean-css')
});

3.压缩图片：fis-optimizer-png-compressor

fis.match('*.{png,gif,jpg}', {
  optimizer: fis.plugin('png-compressor'),
  release: '/static/pic$0'
});

4.编译less：fis-parser-less-2.x（我是用的这个，还有其他的，但是我没试成功）

fis.match('*.less', {
    rExt: '.css', // from .less to .css
    parser: fis.plugin('less-2.x', {
        // fis-parser-less-2.x option
    })
});

5.编译scss：fis-parser-node-sass
这个插件我开始在mac下一直没安装成功，出现了很多报错，最后：

sudo chown -R $USER /usr/local

然后把node_modules 文件夹删除点，把package.json中的scss的插件依赖删除，最后在install一次就ok了。希望对遇到同样的情况的读者有帮助。

fis.match('*.scss', {
  rExt: '.css',
  parser: fis.plugin('node-sass', {
    // options...
  })
});

6.图片合并：fis-spriter-csssprites
这个估计很多人都熟悉了，之前都是手动的去拼图，浪费了好多时间，有了这个可以直接把你需要的icon图一个个的切下来，扔到图片目录就可以了，不需要担心htttp请求频繁。
这个插件虽然配置OK了，但是还有一项重要的事，就是在需要合并的图片名后面 加上 ?__inline

注意：是两个下划线，我之前就被坑的好惨，可能也是我的眼神不够犀利

// 启用 fis-spriter-csssprites 插件
fis.match('::package', {
  spriter: fis.plugin('csssprites')
})
// 对 CSS 进行图片合并
fis.match('/css/*.css', {
  // 给匹配到的文件分配属性 `useSprite`
  useSprite: true
});

7.基于页面的打包：fis3-postpackager-loader
除了这种打包模式之外，还有一个基于项目的打包，但是基于页面的是实际可行的，一个html中引用了哪些就将这些打包在一起。

fis.match('::package', {
  postpackager: fis.plugin('loader', {
    allInOne: true
    // sourceMap:true,
    // useInlineMap:true
  })
});

完整的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');

至于如何执行，请看下一篇。