タスクランナー(Gulp)を導入して快適なフロント開発環境を手に入れよう

ブログ

2017.02.13 コーディング

タスクランナー(Gulp)を導入して快適なフロント開発環境を手に入れよう

フロントエンド開発には欠かせない存在になってきたタスクランナーの導入の紹介。
そもそもタスクランナーとは何か?的な説明はググればわんさか出てくるので割愛する。
要は面倒な作業を自動化して楽しましょー的なアレである。わーい
自分は使用技術を選定する際単純に流行ってるものを選べばいんじゃね?とか思っちゃうタイプなのでなんだか良く聞くGulpを採用した。

Gulpのインストール

とりあえずGulpをインストールしよう。※以下全てWindows10環境。
の前にGulpを使用するにはNode.jsが必要なのでNode.jsをインストール。
https://nodejs.org/ja/
インストールできたら黒い画面で

と打ちバージョンが表示されれば成功だ。
次に適当な作業用ディレクトリを作成し初期構築を行っていこう。
黒い画面にて

とかって打つとなんか色々聞かれる。
今回はとりあえず使ってみようなコンセプトなのでエンター連打で無視する。
連打し終わると作業ディレクトリにpackage.jsonが作られているはずだ。中を覗いてみると

とか書いてあるはず。必要であれば任意の情報を入力しよう。
ここまできたらいよいよGulpのインストールだ。

でGulpをグローバルにインストールしておく。

でローカル(カレントディレクトリ)にもインストールする。
ちなみに–save-devとか長いと思う人は

とかでも通る。今回は何を打ってるか分かりやすくするため省略しない。
これで何が起こったか把握するためにpackage.jsonを覗いてみると。

などと追記されているはず。
このプロジェクトの開発は”gulp”というパッケージに依存していますと宣言してる感じ。
これでGulpの導入自体は終わりだが、これだけでは何もできず、で?なに?って話で終わってしまうので実際にGulpで簡単なタスクを自動化してみよう。

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

個人的に欠かせないパッケージを3つほど入れてみる。
・Browsersync
ローカルサーバーたてて他端末からも表示確認できたりする。
他端末でスクロールすると同期されたりもする。すごーい
・gulp-sass
Sass使ってるので必須
・gulp-pug
pug使ってるので必須
さくっと入れていこう

ここで再びpackage.jsonを覗いてみると

と追記されており依存するパッケージに追加されていることが確認できる。
これで環境は整ったはずだ。

タスクの作成

いよいよGulpを走らせるタスクを書いていこう。gulpfile.jsを作成し

とかって書いて先程インストールしたパッケージをrequireする。
その上で、sassやpugをコンパイルする等のタスクを書いていくわけ。
とりあえずsass

これでsrc/sass/以下にある全てのscssをコンパイルしdest/css以下に出力する”sass”というタスクができた。
適当にsrc/sass/style.scssを作成し黒い画面から

と打ってみよう。dest/css/style.cssが吐き出されていれば成功だ。
この調子で他のタスクも書いていこう。
pugはsassと同じ感じ。

これでsass,pugをコンパイルするタスクができたわけだが、
コマンドを逐一打っていたのではタスクランナーの意味がない。
のでファイルを監視して勝手にコンパイルしてもらおう。
ファイルの変更を監視するにはGulpに標準搭載されているwatchメソッドを使う。

これで”default”ってタスクを実行すればsassとpugの変更を監視して勝手にコンパイルしてくれる。
“default”ってタスクは逐一打つ必要はなく

これだけでOK。これでcompass使いならおなじみの

っぽいもののできあがり。
次にbrowser-syncでローカルサーバーを立てるタスクを書こう。

こんな感じで

って叩けばlocalhost:3000で確認できるはず。
他端末からなら192.168.0.xxxみたいなので確認できる。
トドメにsass,pugが変更されたらコンパイルされると同時にライブリロードしてくれるようにしよう。
“sass”,”pug”タスクに

とかって.pipeでブラウザリロード処理を繋いであげた上で”default”タスクに

“server”タスクを追加。これでローカルサーバーが立ち上がりsassとpugを監視し自動コンパイル及びライブリロードしてくれるデフォルトタスクの出来上がり、多分。

最終的に出来上がったgulpfile.jsは

無事動いただろうか?こういった開発環境の構築時には「なぜか俺のPCでだけバグ出るんだけど…」みたいなことが多々起きる。
上記手順通りにやったけどなんかエラー出たふざけんなって方はエラー文をコピペしてググってくださいとしか言いようがない。ちなみに自分は最初プロジェクト名を「gulp」にしたら怒られたのでお気をつけを。

今回は3つのパッケージを導入したまでだが、他にもcssにベンダープレフィックスを自動付与したりjsをminifyしたり画像を圧縮したり・・・様々なことができるので興味を持った方はぜひ色々試してみて欲しい。

今回はGulpの紹介だからはしょったけどpug使うとすごーい!たのしー!って感じだよ

CONTACT
お問い合せ・お見積りはこちらから
  • 03-6279-3013 お問い合わせは 月~金 10:00~19:00

  • メールでのお問い合せはこちら