ページごとに小さな広告を1つ表示するだけだと約束します。ご安心ください。このメッセージを非表示にすると、再度表示されなくなります。
概要
30秒でわかる説明
Semantic UI のダウンロード インストールフォルダに移動して、Gulp コマンドを実行します。
すべてのファイルをビルドするには
gulp build
変更を監視するには
gulp watch
なぜビルドツールを使うのか？
Semantic UI はいくつかの理由から Gulp を使用しています。
テーマ変数を使用して LESS ファイルを処理します。
サポートされているブラウザ向けに、Autoprefixerを使用してベンダープレフィックスを追加します。
ファイルの変更を監視し、テーマを調整した際に必要なファイルを再ビルドします。
アセットパスを自動的に処理するため、ミニファイされた結合されたリリースを異なるディレクトリに配置できます。
サイトに必要なコンポーネントのみを含むカスタムビルドを許可します。
RTLCSSを使用して、右から左（RTL）の言語などの高度な使用方法を許可します。
フォルダ構造
Semantic UI プロジェクトには、次のフォルダ構造が含まれています。
src
dist
コンパイル済みの CSS と JS ファイル
components
個々のコンポーネントの CSS と JS
semantic.css
連結されたリリース
semantic.js
連結されたリリース
semantic.json
Gulp のビルド設定が含まれています。
Gulp コマンド
使用可能なすべての Gulp コマンドのリストを以下に示します。
| コマンド | 説明 |
|---|---|
| install | semantic.json を設定するためのインストールに関する質問をします。 |
| watch (デフォルト) | ソースファイルの変更を監視し、変更時にファイルをビルドします。 |
| build | すべてのファイルをビルドします。 |
| clean | dist/フォルダをクリーンアップします。 |
| version | 現在のバージョンを出力します。 |
| build-javascript | JS ファイルをビルドします。 |
| build-css | CSS ファイルをビルドします。 |
| build-assets | アセットファイルをビルドします。 |
| serve-docs | ファイルをローカルドキュメントインスタンスに提供します。 |
| build-docs | ファイルをドキュメントフォルダにビルドします。 |
設定ファイル
semantic.json
ビルドツールの設定は、semantic.jsonという特別なファイルに保存されています。これは、Semantic のインストールフォルダの親フォルダにある任意のフォルダに含めることができます。
npm または Meteor を使用した場合は、プロジェクトのルートにsemantic.jsonファイルが自動的に生成されます。別のパッケージマネージャーを使用した場合は、gulp installを実行して対話型インストーラーを実行できます。
{ // "paths"で指定された他のすべてのパスに追加されるベースパス "base": "", // Semantic UI の現在のバージョン "version": "2.5.0", "paths": { "source": { // ソース theme.config "config" : "src/theme.config", // ソース定義フォルダ "definitions" : "src/definitions/", // ソースサイトテーマ "site" : "src/site/", // ソーステーマフォルダ "themes" : "src/themes/" }, "output": { // パッケージ化されたソース（圧縮版/非圧縮版の両方） "packaged" : "dist/", // 非圧縮ソース "uncompressed" : "dist/components/", // 圧縮ソース "compressed" : "dist/components/", // テーマアセットの出力ディレクトリ "themes" : "dist/themes/" }, // gulp clean タスクのディレクトリ "clean" : "dist/" }, // 整数値のパーミッションに設定されている場合、このファイルパーミッションで dist ファイルを設定します "permission" : false, // gulp watch/build で RTLCSS を実行するかどうか "rtl": false, // これらの名前を持つコンポーネントのみを含めます "components": [ "reset", "site", "button", "container", "divider", "flag", "header", "icon", "image", "input", "label", "list", "loader", "rail", "reveal", "segment", "step", "breadcrumb", "form", "grid", "menu", "message", "table", "ad", "card", "comment", "feed", "item", "statistic", "accordion", "checkbox", "dimmer", "dropdown", "embed", "modal", "nag", "popup", "progress", "rating", "search", "shape", "sidebar", "sticky", "tab", "transition", "api", "state", "visibility" ], // 特殊なプロジェクト管理者タスクを含めるかどうか "admin": false }
theme.config
LESS は、各コンポーネントが使用するテーマを指定できる特別な設定ファイルtheme.configを使用します。このファイルがまだ生成されていない場合は、ビルドツールを実行するとエラーメッセージが表示されます。
テーマガイドで、theme.configの詳細を確認できます。
Gulp タスクのインポート
レシピセクションで、カスタム Gulpfile に個々の Gulp タスクをインポートする方法の例を参照してください。
自動インストールと継続的インテグレーション2.2の新機能
CLI やその他の自動デプロイメントの作業をより効率的に行えるように、2.2 でsemantic.jsonに新しい設定を追加しました。
環境のsemantic.json設定でautoInstall: trueを指定すると、npm installの実行時にユーザーにプロンプトが表示されなくなり、自動デプロイメントが可能になります。