Shinya Furumata's Blog

フロントエンドエンジニアの開発ブログです。直近は主にgulpについて書いていくと思いますー。

【 Gulp入門 】Web制作には絶対Gulp！自動化して作業効率をあげよう！

gulp

自己紹介

はじめまして。札幌でエンジニアをやってます。
Gulpの名前はちらほら聞きますが、あまりWeb制作では使ってる人少ないのかなーと思い、記事書きました。
ほんとに便利なので、みなさん一旦使ってみましょう。

Gulpの話を始める前に、さくっとWeb制作の作業工程から見ていこうと思うのですが、

  1. デザイン
  2. スライス
  3. コーディング
  4. ( WordPress化 ) ※必要がある場合
  5. テストアップ
  6. 本番アップ

だいたいこんな感じですね。
昔は気合でなんとか頑張って単純作業やってました。つらかったです。
今はSketch×Gulpでやってるので、全ての工程において、かなり作業効率が上がってきました。

Web制作してるけど、あんま自動化してないなーって人は一度は検討してみたほうがいいと思います。
惚れます。

Gulpってなに？

gulp (公式サイト)

↑ 公式サイトのリンクです。
まずGulpをご存知ない方のためにGulpの説明から。一言で言うと「タスクランナー」です。
Sassのコンパイルや、コードの構文チェックなどはもちろん、ブラウザのリロードなんかも自動的に行ってくれます。

タスクランナーではGruntが有名ですが、僕がGulpを選んだ理由として、

  • 基本的に非同期処理で行ってくれるため、処理時間が短い
  • タスクの処理をいつも使ってるJavaScriptで書ける
  • Gruntよりも容易にタスクをカスタマイズできる

という利点があります。
Web制作やってる人は大体Javascript触ってると思うので、馴染みやすいですよね。

具体的になにをしてくれるの？

  • sketchファイルのスライスデータをインポート（ディレクトリを自動で分けてインポートも可能です）
  • BrowserSyncによる、ブラウザ間のURL・スクロール値共有（スマホからもアクセスできます）
  • ブラウザのライブリロード
  • SCSSのコンパイル
  • FTPサーバーへのデプロイ
  • HTML, SCSS, CSS, JavaScriptの整形、構文チェック、統合・圧縮
  • 静的なWebページから、WordPress用のソースコードへ自動置換( 自動でテンプレートタグをいれてくれる )

箇条書きで申し訳ないですが、上記のようなことを自動でやらせています。
これらのタスクをするために、いちいちコマンドを打ち込むのではなく、gulpのwatchという機能を使って、ファイルの監視などをさせることも可能です。
なので、HTMLが変更されたらブラウザをリロード、scssが変更されたらコンパイルというように自動で行ってくれるので、コーディングすることに専念できます。

Gulpのインストール

つべこべ言わず、Gulpをインストールしてみましょう。
僕の環境がMacなので、Mac前提で話を進めさせて頂きます。Windowsの方はググってください。

まずはGulpを動かすためには、nodeが必要なので、下記サイトからLTS ( 安定版 )を選択し、インストールします。
Node.js

インストールが終わったら、ターミナルで下記コマンドを打ち込みます。

node -v

versionが表示されれば成功です。

では、さっそくフォルダを作ります。

cd /path/to/your/project

作成したら、cdコマンドで自分のフォルダがある場所まで移動します。

npm init

そこで上記コマンドを打ち込んでください。
なにやら英語で色々聞かれますが、今回はテストなので、Enter連打でおっけーです。
そしてディレクトリの中身をみてみると、package.jsonというファイルが生成されています。

このファイルはいっぺんに必要なモジュールをインストールしてくれたり、色々便利ですが、今はわからなくても結構です。そのままにしておきましょう。

ではお待ちかね、gulpのインストールです。
まずは、

sudo npm install -g gulp

このコマンドを打ち込み、gulpをグローバルインストールします。
sudoはルート権限での実行、-gはグローバルのオプションですね。

次にgulpをローカルにもインストールします。

npm install --save-dev gulp

「--save-dev」というオプションがついていますが、このオプションをつけることによって、packege.jsonにもモジュールの情報が追記されていきます。あとあと便利なので使っていきましょう。

npm install --save-dev モジュール名

gulpでは様々なモジュールをインストールすることによって、できることが増えていきます。上記のようなコマンドは何度も使うので、覚えておきましょう。

これでgulpのインストールは完了です。
次はgulpを使えるようにするため、gulpfile.jsというファイルを生成します。

f:id:shinyafurumata:20160406231927p:plain

package.jsonファイルと同じ配下に配置してください。

次にgulpfile.jsに以下のコードを追加すれば準備完了です。

var gulp = require('gulp');

ここまでうまくできましたか？
これで準備完了です。そんなに知識がなくとも簡単に導入できてしまうところが魅力だったりします。
HTMLやCSSしか触ったことしかありませんという人でも、使いこなすことができると思うので、どんどん触ってみましょう！

次回からは、実際にタスクを作っていきます〜。