百度が開発したFIS3は、フロントエンドエンジニアリングのための構築ツールであり、パフォーマンス最適化、リソース読み込み（非同期/同期/オンデマンド/プリロード/依存管理/結合/インライン化）、モジュール開発、自動化ツール、コーディング規約、コードのデプロイなど、幅広い課題に対応します。以下にリソースの結合・圧縮によるパフォーマンス向上の実装例を示します。

FIS3のインストール

npm install -g fis3

プロジェクトディレクトリの作成

指定されたディレクトリに移動し、初期化コマンドを実行します。

fis3 init

必要なプラグインをインストールします。例としてSCSSコンパイラをインストール：

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

インストールに失敗した場合は、node.jsをアンインストールし、旧バージョンをインストールしてください。

相対パスをサポートするためのプラグインをインストール：

npm install -g fis3-hook-relative

よく使われるFIS3プラグイン一覧: http://fis.baidu.com/fis3/docs/common-plugin.html

設定ファイル

fis-conf.jsを開き、以下のように設定します。

// リリース時に相対パスを使用
fis.hook('relative');
fis.set('testDomain', '');
// テスト環境
fis.set('preDomain', 'http://test.zuobaiquan.com');
// 本番環境
fis.set('buildDomain', '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', {
    // オプション設定...
  })
})
.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'),
  // 内蔵の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: "${testDomain}",
    });

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

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

特定のディレクトリを除外する場合の設定例：

fis.match('/tpl/*', {
  // 出力しないように設定
  release: false
})

開発環境でのコマンド: fis3 server stop && fis3 server clean && fis3 server start -p 4000 && fis3 release test --verbose -wLc
本番環境: fis3 release build --verbose -cd ./dist

fis3 server stop // サーバー停止 fis3 server clean // サーバー配下のファイル削除 fis3 server start -p 1111 // サーバー起動（-p指定なしでデフォルトポート8080） fis3 release test –verbose -wLc // デバッグモード（CMD終了しない）

プロジェクト構成例

ES6/ES7/JSXをES5に変換するにはfis-parser-babel-5.xをインストールしてください。

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前端工具构建的静态页面框架