Web制作を行う全ての方へ

開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました

タスクランナーの一つであるgulp(ガルプ)。使い出すとすごく便利で今ちょっと手放せない開発ツールの一つなんですが、使ってない人からすると、導入コストとか学習コストが気になって、まだ手を出してないという方もいますよね。なので、今回導入用の記事を書いたので、ちょっと気になってるという方、試してみたかったという方に役立てばいいなと思います。

  1. 1.タスクランナーとは? gulpで何ができるのか?
  2. 2.gulpに必要な環境を整える – Node.jsのインストール
  3. 3.gulpに必要な環境を整える – package.jsonの作成
  4. 4.gulpに必要な環境を整える – gulpfile.jsの作成
  5. 5.gulp-ejsを使った開発環境
  6. 6.gulp-ejsに入れているパッケージリスト
  7. 7.使い方 例:BrowserSync(ブラウザーシンク)
  8. 8.最後に

タスクランナーとは? gulpで何ができるのか?

コーディングをしているとHTMLやCSSファイルの編集をして、ブラウザでプレビューをみて、スマートフォンで確認して、画像のサイズを圧縮して、というふうに色々なことをするのですが、タスクランナーはそういった様々な処理(タスク)を自動化して走らせることを指します。

タスクランナーであるgulpには、様々ことを行うためのパッケージが色々と用意されています。

  • Sassファイルのコンパイル
  • CSS及びJavaScriptファイルの圧縮
  • ブラウザーシンク
  • ベンダープレフィックスの自動付与
  • などなど

目的にあったパッケージをインストールし、設定ファイルにやりたいことをかいておけば、あとはgulpを実行するだけでそれらを使うことができます。


これらが


これで解決!

インストールするパッケージはpackage.jsonというファイルに記述しておくことで、インストールをコマンド一発で出来ます。
そのため、プロジェクトごとに、あれをインストールして次はこれをインストールして・・・といった、手間が省けるので非常に楽です!

package.jsonさえあれば、どこでもだれでも同じ開発環境を整えられる(要インターネット回線)ので、同じプロジェクトの開発メンバーで環境を合わせるのもスムーズです。

個人で使う場合でも、会社のPCと自宅のPCで同じ環境を整えたりするのに便利ですね。

2.gulpに必要な環境を整える – Node.jsのインストール

gulpを動かすには必要なパッケージが幾つか存在するので、まずはそれらをインストールしていきます。

まずは、Node.js!
Node.jsはサーバーサイド環境のJavaScriptです。Webサーバーやネットワークプログラムの記述を意図しています。 – wikipediaより

インストールには公式サイトからダウンロードできるので、そちらからインストーラーをダウンロードし、インストールします。

インストールできたかを確認するには、ターミナル等のコマンドラインで

node -v

と実行し、バージョンが表示されればインストールが無事完了しています。

Windowsの場合はPathを通す必要があるので、コントロールパネルのシステムから環境変数の設定を編集しましょう。おそらく何らかの変数値がすでに入っているかと思うので、最後の;の後ろにC:¥Program Files¥nodejs と言った形で追加すれば、先ほどのバージョン確認も通るかと思います。

3.gulpに必要な環境を整える – gulp.jsのインストール

gulp.jsをグローバルにインストールします。(グローバルにというのは、どこからでも扱えるという意味で、端末のどこの場所からでもgulpを使えるようにインストールするということです。)

インストールするには、コマンドラインから行います。

npm install -g gulp

パッケージからのインストールを行うので、Macをお使いの場合はsudoをつけてインストールしてください。

sudo npm install -g gulp

4.gulpに必要な環境を整える – package.jsonの作成

プロジェクト開発用のフォルを作成し、コマンドラインにてそのフォルダに移動します。フォルダはどこでも構いません。

僕はMAMPのhtdocsフォルダの中に開発中のフォルダをいつも作るので、そこにtestフォルダを作成します。

cd /Applications/MAMP/htdocs
mkdir test
cd test

これでコマンドライン上でtestフォルダの中を見ていることになります。その状態で、下記コマンドを実行します。

npm init

実行すると name: というのが現れて、キー入力出来る状態でとまります。これは、今回のプロジェクトの設定を行えるのですが、あとから変更もできますし、何を入力していいかわからない場合は、Enterキーで設定せずに送って行くことができます。

送って行くと最後に内容の確認が出力され、Is this ok? (yes)と聞いてくるので、Enterで確定すれば完了です。

フォルダの中にpackage.jsonが作成され、先ほどの内容確認で表示されたものが記載されています。編集はこのファイルをエディタで編集することが可能です。

5.gulp-ejsを使った開発環境

次は必要なパッケージをインストールしていくんですが、僕は自分が使う開発環境をパッケージにしてGithubにあげているので、それを元に解説していきます。いいなと思われた方は、これをダウンロードして、ご自身の必要な環境にあわせて、設定ファイルを編集したり、必要なパッケージを増やしたりすれば楽じゃないかな?と思います。(ただし、こちらはbowerというものも利用しているので、そちらのインストールも必要になります。

このパッケージは、ちあきちゃん(@mellowchanter) blog: mellowchanterと共同開発です。

gulp-ejs
|Github

6.gulp-ejsに入れているパッケージリスト

パッケージ名 概要
ファイル閲覧
browser-sync ブラウザーシンク。ソースファイルの保存後、ブラウザをリロードしたり、複数のブラウザでの動作をまとめて確認したり、スマートフォンの端末でのブラウザチェックをしたりできます。スマートフォンで確認するには、同一ネットワーク内に接続している必要があります。
del ファイル及びディレクトリの削除
gulp ローカル用gulp
gulp-ejs テンプレートエンジン。htmlファイルで共通化するファイルを読み込ませたり(例:header,footer)for文を使ったりといったことができます。
gulp-if gulpfile上でif文の指定ができるようになる
gulp-imagemin 画像ファイルのサイズ圧縮化
gulp-minify-css CSSファイルのminifier(圧縮)
gulp-notify gulp実行時にエラーを通知する
gulp-pleeease ベンダープレフィックスの自動付与、cssのminifier(圧縮)、mqpacker(メディアクエリをまとめる)、remのpx自動変換。
gulp-plumber デフォルトだと、gulp実行時にエラーが出るとwatchが終了してしまうが、それを防ぐ
gulp-replace gulpfile上でreplaceを扱えるようにする
gulp-ruby-sass gulpでruby版のsassを扱えるようにする
gulp-uglify JSファイルのminify(圧縮)
gulp-useref html内のcssやjsの読込み部分を変更
imagemin-pngquant pngファイルのサイズ圧縮
run-sequenc タスクを並行処理させる

使い方 例:BrowserSync(ブラウザーシンク)

実際の使い方を説明したいと思います。全部というわけにも行かないので、今回はBrowserSync(ブラウザーシンク)で説明します。

BrowserSync(ブラウザーシンク)とは?

上記の表でも解説していますが、PCやスマートフォン、タブレットなどの様々なブラウザを同期させ、htmlやcssのファイルを編集→保存時にブラウザをリロードし、編集がリアルタイムに反映されるというものです。

同一ネットワーク内であれば、発行されるipアドレスでアクセスでき、PCはもちろん、スマートフォン、タブレットなど、様々な端末でもアクセスできるのが非常に便利です。ただしこれを行う場合、ファイアーウォールの解除などが必要になる場合があります。

パッケージのインストール

まず、パッケージをインストールします

npm install browser-sync --save-dev

先程と同様、Macの場合はsudoをつけてインストールしてください。

gulpfile.jsに設定を書く

var gulp = require( 'gulp' ),// gulpプラグインの読みこみ
    browserSync = require( 'browser-sync' ),// browser-syncのプラグインの読み込み
	paths = {
		rootDir : 'dev'
	}

gulp.task( 'browser-sync', function() {//'browser-sync'が実行時のタスク名なります。
	browserSync.init({
		server: {
			baseDir: paths.rootDir,//ルートとなるディレクトリを指定
		}
	});
});
//devフォルダ以下のファイルを監視
gulp.watch("dev/**", function() {
	browserSync.reload();// ファイルに変更があれば同期しているブラウザをリロード
});

gulpfile.jsの編集が終われば保存し、コマンドラインから実行します。実行には以下のコマンドを。

gulp browser-sync

実行すると下記のようにコマンドラインに表示されます

[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.48:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.48:3001
 -------------------------------------
[BS] Serving files from: dev

上記のhttp://192.168.1.48:3000が同一ネットワーク内からアクセスできるローカルサーバーのURLになり、PC、スマートフォン、タブレットなどからアクセスが可能です。

他のパッケージを導入したくなったら、このようにパッケージをインストールし、gulpfile.jsに追加することで機能を増やせます。

最後に

解説と導入、使い方などをざっと書きましたがいかがでしょうか?おそらく、gulpfile.jsの記述がややこしいかな?と思うのですが、ベースがJavaScriptということと、検索すれば色々と情報が出てくるので、導入が難しすぎるということはないかな?と思います。

自分にあう、もしくは、プロジェクトにあう開発環境を導入しましょう。そういうのを構築するのも楽しいんですよね。

今回の記事を書くのにあたり、下記サイト等参考にさせていただきました。

Ad



Comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です