前端构建工具-fis3

简介

首先说说什么是Fis3：
Fis3，为你定制的前端工程构建工具,是百度旗下一款前端工程构建工具，按找它官网的说法：

解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题

那么，既然市面上已经有那么多成熟好用的前端构建工具（grunt、gulp、webpack等等）了，为什么我还要安利一波Fis3呢。
我想它最大的优点正如它介绍所说：傻瓜式

对比

Gulp or Webpack

1. Gulp

gulp是前端开发过程中一种基于流的代码构建工具,它的特别是流式构建，我们直接看它的配置Demo:

//gulpfile.js
var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
  gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 现在 `base` 的值为 `client/js/`
  .pipe(minify())
  .pipe(gulp.dest('build'));
});

2.Webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等。直接上配置Demo

//webpack.config.js
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
 
module.exports = {
    //插件项
    plugins: [commonsPlugin],
    //页面入口文件配置
    entry: {
        index : './src/js/page/index.js'
    },
    //入口文件输出配置
    output: {
        path: 'dist/js/page',
        filename: '[name].js'
    },
    module: {
        //加载器配置
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    //其它解决方案配置
    resolve: {
        root: 'E:/github/flux-example/src', //绝对路径
        extensions: ['', '.js', '.json', '.scss'],
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }
};

3.Fis3相比上两者优缺点

优点

我们先说优点，Fis3在我这段时间的使用，感受如下：

上手简单（官方文档半小时，可能你看完这篇blog也能上手了）
配置简单
插件够用

综上所述，就是开发成本小。

缺点

凡事有两面性，Fis3不可避免有自己的缺点：

社区不丰富
相比Gulp、Webpack的活跃，Fis3仅有百度员工维护
插件扩展性差
除非百度已经集合了的插件，否则你很难加入外部插件
fis并不合适大型项目的构建
这是别人说的，在我看来，正式源于它社区环境差，扩展性不好而导致的。
fis的推广度并不好

发现国内的插件/工具推广度都不好？

适合群体
由于它的优缺点，fis3相对适合

小型应用构建

（md5，css profix，html template）及

小团队开发

（博主就是个人负责公司web开发）

fis3和webpack的区别可以参考知乎回答很全面:https://www.zhihu.com/question/50829160

下载安装

安装NodeJS
下载地址: http://nodejs.cn/download/
推荐下载最新版本的NodeJS,如 v8.1.3+ 等。
安装到默认目录,完成后查看版本号: node -v
npm安装fis3
在 cmd 中执行: npm install -g fis3
安装fis3后,在 cmd 中执行 fis3 -v 判断是否安装成功

简单使用

说明:** fis3等前端构建工具,依赖的是相对路径, 如./xxx/xxx.js 等; 识别: <img src="">、<link href="">、 <script src="">`url(‘’)` 等资源配置。

如果你的项目不符合此要求, 需要进行一定的修改。

首先,在前端代码的根目录中,创建文件 fis-conf.js。 fis3 会查找此文件作为配置。

修改fis-conf.js文件的内容:

// 配置不同环境的资源前缀
fis.media('prod').match('*.{js,css,png}', {
  domain: 'http://localhost:6666'
});

fis.media('test').match('*.{js,css,png}', {
  domain: 'http://192.168.1.245:81'
});

fis.media('dev').match('*.{js,css,png}', {
  domain: 'http://localhost:6666'
});


// 所有js, css 加 hash
fis.match('*.{js,css,png}', {
  useHash: true
});

// 生产环境进行JS压缩
fis.media('prod').match('*.js', {
  optimizer: fis.plugin('uglify-js')
});

// dev 环境不加hash, 不进行压缩和优化
fis.media('dev').match('*.{js,css,png}', {
  useHash: false,
  optimizer: null
});

// 清除其他配置，只保留如下配置
fis.match('*.js', {
  // fis-optimizer-uglify-js 插件进行压缩，已内置
  optimizer: fis.plugin('uglify-js')
});

fis.match('*.css', {
  // fis-optimizer-clean-css 插件进行压缩，已内置
  optimizer: fis.plugin('clean-css')
});

fis.match('*.png', {
  // fis-optimizer-png-compressor 插件进行压缩，已内置
  optimizer: fis.plugin('png-compressor')
});

//不需要压缩、合并图片、也不需要 hash
/*fis.media('debug').match('*.{js,css,png}', {
  useHash: false,
  useSprite: false,
  optimizer: null
})*/

简单解释一下, fis.media('prod') 意思是生产环境的配置。

使用fis3时,可以指定打包版本, 例如:

1	fis3 release prod -d prod_release1

如果不指定, 则默认为 dev 环境(fis3中称为media)

指定输出目录是 -d 选项,可以指定绝对路径,相对路径；

另外, fis.match 是很简单的配置,后面会覆盖前面。

其中, useHash 指定是否根据内容生成 hash, 例如 common-utils.js 在生成目录下会变成: common-utils_331734d.js;

optimizer 指定优化配置,例如文件压缩、合并,内联等;

其他插件可能需要安装额外的 npm 组件/插件;

如果项目未拆分, 与 MAVEN 一起组合使用时, 先执行 fis3 的构建(可以指定 html 等文件的输出目录), 然后通过 copy-resources 等插件进行组装。

如果需要更复杂的功能,请参考官方的配置文档: https://fex-team.github.io/fis3/docs/beginning/release.html

参考博客:https://blog.csdn.net/renfufei/article/details/74926339

简介

对比