利用fis3构建前端项目工程

FIS3是国内百度公司产出的一款前端工程构建工具，FIS3可以解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题，首先来简单的实现资源合并压缩提高性能等问题。

安装fix3

npm install -g fis3

创建项目目录

cd 进入此目录中初始化，执行

fis3 init

对需要的插件进行安装 ，比如安装scss编译插件：

npm install -g --save-dev fis-parser-node-sass

注意：如果 fis-parser-node-sass 安装失败，请卸载nodejs，安装低版本即可

 

让 fis3 产出能够支持相对路径。

npm install -g fis3-hook-relative

 

常用fis3插件 http://fis.baidu.com/fis3/docs/common-plugin.html

配置文件

打开fis-conf.js 做相应的配置

// 保持发布使用相对路径
fis.hook('relative');
fis.set('domain_test', '');
// 预发布环境
fis.set('domain_pre', 'http://test.zuobaiquan.com');
// 线上环境
fis.set('domain_build', 'http://zuobaiquan.com');
// 定义版本号
fis.set('version', '1.0.0');

fis.set('project.files', [
    "tpl/**/*.html"
]);

fis.set('project.files', [
  '*.css',
  'js/**',
  'images/**',
  '*.html'
]);

fis.match("*", {
    relative: true
})

//添加时间戳，解决缓存。
.match('*.{js,css,png}', {
    useHash: true
})
.match('::package', {
  spriter: fis.plugin('csssprites', {
    htmlUseSprite: true,
    styleReg: /(<style(?:(?=\s)[\s\S]*?["'\s\w\/\-]>|>))([\s\S]*?)(<\/style\s*>|$)/ig,
    margin: 5
  })
})
.match('/css/*.scss', {
  rExt: '.css',
  parser: fis.plugin('node-sass', {
    // options...
  })
})
.match('css/*.{css,scss}', {
  preprocessor: fis.plugin('autoprefixer', {
    "browsers": ["Android >= 2.1", "iOS >= 4", "ie >= 8", "firefox >= 15"],
    "cascade": true
  })
})
.match('/css/*.{scss,css}', {
    useSprite: true,
    optimizer: fis.plugin('clean-css')
})
.match('/js/*.js', {
  parser: fis.plugin('babel-5.x'),
  // fis-optimizer-uglify-js 插件进行压缩，已内置
  optimizer: fis.plugin('uglify-js')
})
.match('images/*.png', {
    optimizer: fis.plugin('png-compressor', {
        type: 'pngquant'
    })
})
.match('/css/(*.{png,gif})', {
  release: '/images/sprite/$1$2'
});

// fis.media('production').match('/js/*.js', {
//   parser: fis.plugin('jdists', {
//     remove: "debug"
//   })
// })

fis.media('test')
    .match("*", {
        domain: "${domain_test}",
    });

fis.media('pre')
    .match("*", {
      domain: "${domain_pre}",
    });

fis.media('build')
    .match('*', {
      domain: "${domain_build}"
    })

 如果打包build 不需要某些文件夹，可配置：

fis.match('/tpl/*', {
  // 设置 release 为 false，不再产出此文件
  release: false
})

 

开发阶段命令： fis3 server stop && fis3 server clean && fis3 server start -p 4000 && fis3 release test --verbose -wLc
预发布： fis3 release pre --verbose -cd ./pre
发布阶段：fis3 release build --verbose -cd ./dist

fis3 server stop //终止服务 
fis3 server clean //清除服务目录下的文件 
fis3 server start -p 1111 //启动服务，端口号是1111 （不加-p 1111的话默认端口号是8080） 
fis3 release test –verbose -wLc //调试模式 不会关闭cmd

 

项目目录结构

建议安装  fis-parser-babel-5.x 插件，这样就支持 es6、es7 或者 jsx 编译成 es5 啦，是不是很溜！

npm install -g --save-dev fis-parser-babel-5.x

fis-conf.js配置：

fis.match('*.js', {
  parser: fis.plugin('babel-5.x')
})

源码地址：https://github.com/zuobaiquan/framework/tree/master/基于fis3前端工具构建的静态页面框架