現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4

use_grunt、use_gulpフォルダの利用方法

本フォルダに収録している「use_grunt」フォルダ、「use_gulp」フォルダに収録されているファイルの利用方法を紹介します。Grunt、およびgulpを利用したプロジェクトのサンプルとしてご活用いただけます。

use_gruntの利用方法

必要な動作環境

利用前にNode.js、grunt-cli、Ruby、Sass、Gitのインストールが必要です。インストールについては本書の下記ページをご参照ください。

利用手順

利用手順は下記のとおりです。

  1. use_gruntフォルダを適当な場所に配置します
  2. コンソール(Macの場合はターミナル、Windowsの場合はコマンドプロンプト)を起動します
  3. コンソールでuse_gruntフォルダに移動します
  4. コンソールで「npm install」を実行してpackage.jsonおよびbower.jsonに記載されている必要なパッケージ類をダウンロードします
    ※ダウンロードには数分かかります
    ※Windowsをご利用の場合、bowerのインストールが自動で行われない場合があります。「npm install」のコマンドの実行後に、フォルダ内に「bower_components」フォルダが出来ていない場合は、「bower install」のコマンドを実行してください
  5. コンソールで「grunt」を実行してgruntを起動します
  6. ブラウザで「http://localhost:8000」にアクセスします
    ※LiveReload機能を使用する場合は、ブラウザ側に機能拡張をインストールする必要があります(P149)
  7. 「src」フォルダ内のHTMLファイルやSassファイル、CoffeeScriptファイルを変更して保存します
    自動的に「public」フォルダにHTMLファイル、CSSファイル、JavaScriptファイルとして書き出されます
    LiveReload機能を利用している場合は自動的にブラウザの表示も更新されます。
  8. Gruntを終了する場合は、コンソール上で[Ctrl]([control])+[C]キーを押します。

フォルダ構成

use_gruntのフォルダ構成は下記のようになっています(Grunt実行後の状態)。

自動化しているタスク

自動化しているタスクは下記のとおりです(記述順)。

  1. tmp内のCSSにベンダープレフィックスを自動付与
  2. 初期化のためのtmpフォルダ・publicフォルダの削除
  3. CoffeeScriptのコンパイル→合体→tmpへ書き出し
  4. ライブラリのCSSファイル、JSファイルの結合→publicへ書き出し
  5. 簡易サーバーの起動
  6. srcフォルダのHTML、tmp内のCSS・JS等の一時ファイルをpublicへ複製
  7. CSSの圧縮
  8. Sassのコンパイル→tmpへ書き出し
  9. CSSスプライト化→画像をpublic、CSSをtmpへ書き出し
  10. JSの圧縮
  11. srcフォルダ内のHTML、CoffeeScript、Sassファイルの変更監視

use_gulpの利用方法

必要な動作環境

利用前にNode.js、gulp-cli、Ruby、Sass、Gitのインストールが必要です。インストールについては本書の下記ページをご参照ください。

利用手順

利用手順は下記のとおりです。

  1. use_gulpフォルダを適当な場所に配置します
  2. コンソール(Macの場合はターミナル、Windowsの場合はコマンドプロンプト)を起動します
  3. コンソールでuse_gulpフォルダに移動します
  4. コンソールで「npm install」を実行してpackage.jsonおよびbower.jsonに記載されている必要なパッケージ類をダウンロードします
    ※ダウンロードには数分かかります
    ※Windowsをご利用の場合、bowerのインストールが自動で行われない場合があります。「npm install」のコマンドの実行後に、フォルダ内に「bower_components」フォルダが出来ていない場合は、「bower install」のコマンドを実行してください
  5. コンソールで「gulp」を実行してgulpを起動します
  6. ブラウザで「http://localhost:8000」にアクセスします
    ※LiveReload機能を使用する場合は、ブラウザ側に機能拡張をインストールする必要があります(P149)
  7. 「src」フォルダ内のHTMLファイルやSassファイル、CoffeeScriptファイルを変更して保存します
    自動的に「public」フォルダにHTMLファイル、CSSファイル、JavaScriptファイルとして書き出されます
    LiveReload機能を利用している場合は自動的にブラウザの表示も更新されます。
  8. gulpを終了する場合は、コンソール上で[Ctrl]([control])+[C]キーを押します。

フォルダ構成

use_gulpのフォルダ構成は下記のようになっています(gulp実行後の状態)。

自動化しているタスク

自動化しているタスクは下記のとおりです(記述順)。

  1. 初期化のためのファイルの削除
  2. Sassのコンパイル→ベンダープレフィックスの自動付与→圧縮→publicへ書き出し
  3. ライブラリCSSファイルの結合→publicへ書き出し
  4. srcフォルダのHTMLをpublicへ複製
  5. CoffeeScriptのコンパイル→結合→圧縮→publicへ書き出し
  6. ライブラリJSファイルの結合→publicへ書き出し
  7. CSSスプライト化→publicへ書き出し
  8. srcフォルダ内のHTML、CoffeeScript、Sassファイルの変更監視
  9. 簡易サーバーの起動

サンプルデータに関するご注意