use_grunt、use_gulpフォルダの利用方法
本フォルダに収録している「use_grunt」フォルダ、「use_gulp」フォルダに収録されているファイルの利用方法を紹介します。Grunt、およびgulpを利用したプロジェクトのサンプルとしてご活用いただけます。
use_gruntの利用方法
必要な動作環境
利用前にNode.js、grunt-cli、Ruby、Sass、Gitのインストールが必要です。インストールについては本書の下記ページをご参照ください。
- Node.js、Ruby──P12〜15
- Git──P17
- Sass──P84およびP149
- grunt-cli──P144
利用手順
利用手順は下記のとおりです。
- use_gruntフォルダを適当な場所に配置します
- コンソール(Macの場合はターミナル、Windowsの場合はコマンドプロンプト)を起動します
- コンソールでuse_gruntフォルダに移動します
- コンソールで「npm install」を実行してpackage.jsonおよびbower.jsonに記載されている必要なパッケージ類をダウンロードします
※ダウンロードには数分かかります
※Windowsをご利用の場合、bowerのインストールが自動で行われない場合があります。「npm install」のコマンドの実行後に、フォルダ内に「bower_components」フォルダが出来ていない場合は、「bower install」のコマンドを実行してください
- コンソールで「grunt」を実行してgruntを起動します
- ブラウザで「http://localhost:8000」にアクセスします
※LiveReload機能を使用する場合は、ブラウザ側に機能拡張をインストールする必要があります(P149)
- 「src」フォルダ内のHTMLファイルやSassファイル、CoffeeScriptファイルを変更して保存します
自動的に「public」フォルダにHTMLファイル、CSSファイル、JavaScriptファイルとして書き出されます
LiveReload機能を利用している場合は自動的にブラウザの表示も更新されます。
- Gruntを終了する場合は、コンソール上で[Ctrl]([control])+[C]キーを押します。
フォルダ構成
use_gruntのフォルダ構成は下記のようになっています(Grunt実行後の状態)。
- use_grunt
- bower.json──Bowerの設定ファイル
- Gruntfile.js──Gruntの設定ファイル
- package.json──npmプロジェクトの設定ファイル
- src──ソース類。ここのファイルを改変します
- coffee──CoffeeScriptファイルを格納
- html──HTMLファイルを格納
- img──画像ファイルを格納
- scss──SCSSファイルを格納
- tmp──公開ファイル作成用一時群(Gruntタスクが生成)
- bower_components──Bowerのコンポーネントを収録したフォルダ
- node_modules──npm installで作成されるモジュール格納フォルダ
- public──公開用ファイル(Gruntタスクが生成)
- .sass-cache──sassが作成するキャッシュ
- gitignore──Git管理除外指定ファイルのサンプル(使用する際は「.gitignore」とリネームしてください)
自動化しているタスク
自動化しているタスクは下記のとおりです(記述順)。
- tmp内のCSSにベンダープレフィックスを自動付与
- 初期化のためのtmpフォルダ・publicフォルダの削除
- CoffeeScriptのコンパイル→合体→tmpへ書き出し
- ライブラリのCSSファイル、JSファイルの結合→publicへ書き出し
- 簡易サーバーの起動
- srcフォルダのHTML、tmp内のCSS・JS等の一時ファイルをpublicへ複製
- CSSの圧縮
- Sassのコンパイル→tmpへ書き出し
- CSSスプライト化→画像をpublic、CSSをtmpへ書き出し
- JSの圧縮
- srcフォルダ内のHTML、CoffeeScript、Sassファイルの変更監視
use_gulpの利用方法
必要な動作環境
利用前にNode.js、gulp-cli、Ruby、Sass、Gitのインストールが必要です。インストールについては本書の下記ページをご参照ください。
- Node.js、Ruby──P12〜15
- Git──P17
- Sass──P84およびP149
- gulp-cli──P147
利用手順
利用手順は下記のとおりです。
- use_gulpフォルダを適当な場所に配置します
- コンソール(Macの場合はターミナル、Windowsの場合はコマンドプロンプト)を起動します
- コンソールでuse_gulpフォルダに移動します
- コンソールで「npm install」を実行してpackage.jsonおよびbower.jsonに記載されている必要なパッケージ類をダウンロードします
※ダウンロードには数分かかります
※Windowsをご利用の場合、bowerのインストールが自動で行われない場合があります。「npm install」のコマンドの実行後に、フォルダ内に「bower_components」フォルダが出来ていない場合は、「bower install」のコマンドを実行してください
- コンソールで「gulp」を実行してgulpを起動します
- ブラウザで「http://localhost:8000」にアクセスします
※LiveReload機能を使用する場合は、ブラウザ側に機能拡張をインストールする必要があります(P149)
- 「src」フォルダ内のHTMLファイルやSassファイル、CoffeeScriptファイルを変更して保存します
自動的に「public」フォルダにHTMLファイル、CSSファイル、JavaScriptファイルとして書き出されます
LiveReload機能を利用している場合は自動的にブラウザの表示も更新されます。
- gulpを終了する場合は、コンソール上で[Ctrl]([control])+[C]キーを押します。
フォルダ構成
use_gulpのフォルダ構成は下記のようになっています(gulp実行後の状態)。
- use_gulp
- bower.json──Bowerの設定ファイル
- gulpfile.js──gulpの設定ファイル
- package.json──npmプロジェクトの設定ファイル
- src──ソース類。ここのファイルを改変します
- coffee──CoffeeScriptファイルを格納
- html──HTMLファイルを格納
- img──画像ファイルを格納
- scss──SCSSファイルを格納
- bower_components──Bowerのコンポーネントを収録したフォルダ
- node_modules──npm installで作成されるモジュール格納フォルダ
- public──gulpによって生成された公開用ファイル
- .sass-cache──sassが作成するキャッシュ
- gitignore──Git管理除外指定(使用する際は「.gitignore」とリネームしてください)
自動化しているタスク
自動化しているタスクは下記のとおりです(記述順)。
- 初期化のためのファイルの削除
- Sassのコンパイル→ベンダープレフィックスの自動付与→圧縮→publicへ書き出し
- ライブラリCSSファイルの結合→publicへ書き出し
- srcフォルダのHTMLをpublicへ複製
- CoffeeScriptのコンパイル→結合→圧縮→publicへ書き出し
- ライブラリJSファイルの結合→publicへ書き出し
- CSSスプライト化→publicへ書き出し
- srcフォルダ内のHTML、CoffeeScript、Sassファイルの変更監視
- 簡易サーバーの起動