JS>> vfis>> 返回
项目作者: lpreterite

项目描述 :
The make fis3 to support vue, es6 and make it more easy !
高级语言: JavaScript
项目地址: git://github.com/lpreterite/vfis.git
创建时间: 2017-01-11T02:50:19Z
项目社区:https://github.com/lpreterite/vfis

开源协议:MIT License

下载


vfis-cli

Build Status

这个项目是把基于fis3构建的比较常用的功能集成一起的构建工具。包含功能以下功能:

  • 支持vue
  • 支持sass
  • autoprefixer兼容css
  • babel兼容es6
  • js依赖及引入
  • 按需合并文件
  • 图片合并
  • 图片压缩

安装及使用

安装

  1. npm i -g vfis-cli

由于依赖的各种库比较大,请耐心等待。

使用

生成

  1. vfis release -d ./output

生成并监控

  1. vfis release -wL ./output

预览

  1. vfis server start --root ./output

更多使用移步到 fis3 起步构建

设置

配合简易的设置可简化更多工作,下面是简单的使用例子,如想了解更多可看详细文档

快速上手

第一步,安装

  1. // 安装vfis构建优化模块
  2. $ npm i -D vfis

第二步,开始使用

  1. //设置
  2. # fis-conf.js
  3. const vfis = require('vfis');
  4. vfis({
  5. input: 'src/(*.html)',
  6. output: {
  7. default:{
  8. basePath: 'assets'
  9. }
  10. },
  11. pack: {
  12. vendor: {
  13. 'vender.js': ['node_modules/**'],
  14. 'main.js': ['src/**']
  15. }
  16. }
  17. });
  18. // 生成并监控文件变化自动刷新页面
  19. $ fis3 release -d ./output -wL
  20. // 预览
  21. $ fis3 server start --root ./output

第三步,理解输出设置

  1. fis.set('vfis.config', {
  2. input: '**/(*.html)', //访问的文件入口
  3. output: { //输出文件目录及相关的设置
  4. default: {
  5. basePath: 'assets', //静态资源目录
  6. pagePath: '', //页面生成目录
  7. url: '', //静态资源访问的虚拟目录(指虚拟目录路径)
  8. domain: '', //静态资源访问的域(指网站访问域,如:http://uxfeel.com)
  9. }
  10. }
  11. })

运行环境

  1. node 4.4.x
  2. npm 3.10.x
  3. python 2.7.x
  4. win系统还需 Microsoft Visual Studio 2010以上
  5. linux系统需要 c++运行环境

环境安装细节

win下需要管理者权限

  1. # 更新npm
  2. sudo npm update -g npm
  3. # 安装fis3
  4. sudo npm install -g fis3

安装依赖

命令行进入项目目录根

  1. npm i

安装其他问题

假如运行出错,或很久不动,可能是node-sass安装问题,使用ctrl+c停止命令,然后重装。

  1. npm rebuild node-sass