fis入門

fis入門の概要
 
更新(2014.07.05):本書はすでにfis公式サイト:http://fis.baidu.com/docs/dev/more.htmlに収録されている.
前言:
本文はfisについて概要的に紹介し,紙面の都合上,あまり使用,設計上の詳細には触れない.詳細については、公式ドキュメントを参照してください.本文の内容の概要:

fisとは

環境構築

fis例

プロジェクト構成

プラグイン開発

梱包

二次開発

比較grunt

後ろに書いてある

なんだFIS

FISは、先端開発における自動化ツール、性能最適化、モジュール化フレームワーク、開発仕様、コード導入、開発プロセスなどの問題を解決するためのツールフレームワークである.

フロントエンドの構築に専念し、一般的なニーズに簡単に対応できるように構成する必要はありません.

特長
個人のまとめ:

フロントエンド工事実績に近い(フロントエンドプロジェクトの構築ニーズ、問題はほぼ考慮済み)

配置が合理的、柔軟

高効率

拡張しやすい

公式:3つのコマンドで、ほとんどの構築要件を満たします(各コマンドには数の異なるパラメータがあります).

跨平台:node構築に基づき、windows、mac、linux等の平台で運行可能

快速構築:合理的な構築プロセス設計、効率的な構築性能向上

性能最適化:内蔵サポートファイル圧縮、パッケージング等

ローカルデバッグ:サポートされているサーバを内蔵し、ローカルデバッグが容易(java、node版あり)

フレキシブル拡張:プラグイン拡張、二次開発など便利

手軽:使い勝手は問題ないが、カスタマイズしたい場合はfisの全体的なアーキテクチャ設計を理解する必要がある(単一ファイルコンパイルプロセス、プラグイン拡張点神馬の)

環境構築

npm install -g fis #   fis npm install -g lights # fis  lights    ；  node   v0.10.27   

demo例
プロジェクトを次のように仮定します.ここでは主にいくつかの能力を示します.

リソース埋め込み

資源配置

資源最適化

本サーバー

梱包

fis-first-demo/

└── src

    ├── css

    │   └── main.css

    ├── img

    │   ├── avatar.png

    │   └── saber.jpeg

    ├── index.html ├── js │ ├── lib.js │ ├── main.js │ └── util.js └── saber.png 

次のコマンドを実行します.

fis release -o fis server start 

まず運転結果を見てみましょう
リソース埋め込み

<script type="text/javascript" src="js/lib.js?__inline"></script> 

リソースの位置付け
以下の画像、release後生成/static/avatar.png

<img class="avatar" src="img/avatar.png" width="115" height="115" /> 

プロファイルfis-conf.js

fis.config.merge({

    roadmap : {

        path : [

            {

                //   js   reg : '**.js', //   /static/xxx    release : '/static/$&' }, { //   css   reg : '**.css', //   /static/xxx    release : '/static/$&' }, { //  img    .png，.gif   reg : /^\/img\/(.*\.(?:png|gif))/i, //   /static/xxx    release : '/static/$1' } ] } }); 

リソースの最適化

.clear{clear: both;} .intro{margin: 10px;} .intro .avatar{float: left;} .intro .wording{float: left; margin-left: 10px;} 

最適化後

.clear{clear:both}.intro{}.intro .avatar{float:left}.intro .wording{float:left} 

ローカルサーバ

fis server start --type node 

プロジェクト構成
構成の粒度によって、fisの構成は主にいくつかの項目を含む.

project:コーディング、サポートファイルタイプなどのプロジェクト構成

modules:特定の種類のファイルを特定のプラグインで処理することを示すプラグイン構成.settings両者を区別する必要がある

settings:具体的なプラグインに対する構成

roadmap:カスタムプロジェクトファイル属性.一般的な構成項目は、同期パスの構成(srcからdistまでのマッピング)、線上パスのマッピングです.

pack:パッケージするファイルを設定します.ファイルを実際にパッケージングするのではなく、パッケージング関係マッピングテーブルを生成するmap.json実際にパッケージングする必要がある場合は、このテーブルに基づいてパッケージングスキームをカスタマイズできます.

deploy:配置に関する構成.

簡単な例
以下は公式の例ですが、詳しくは展開しません.http://fis.baidu.com/docs/api/fis-conf.html

//fis-conf.js fis.config.merge({ modules : { parser : { //coffee       fis-parser-coffee-script     coffee : 'coffee-script', //less       fis-parser-less     //       ，             less : ['less'], //md       fis-parser-marked     md : 'marked' } }, roadmap : { ext : { //less         css   //   parser             css     less : 'css', //coffee         js   //   parser             js     coffee : 'js', //md         html   //   parser             html     md : 'html' } } }); 

//          ascii   fis.config.merge({ settings : { optimizer : { 'uglify-js' : { output : { ascii_only : true } } } } }); 

プラグイン開発
まず理解が必要fisのシングルファイル作成手順:個人まとめ:http://www.cnblogs.com/chyingp/p/fis-plugins-optimize.html公式文書:http://fis.baidu.com/docs/more/fis-base.html