初心者でもできるGulpの構築

Webの業界で働いているとタスクランナーと言う言葉を耳にすることも多いはず。

タスクランナーとはWeb制作で行う処理をタスクとして自動化させるツールのことを言います。

コーディングが苦手と言う方も Gulp(ガルプ) や Grunt(グラント) といったワードを一度は聞いたことがあるのでは！？

今回は上述したタスクランナーの一つであるGulp(ガルプ)について書いて行きたいと思います。

 gulpとは

gulpとはNode.jsをベースとしたビルドシステムのこと。

いきなりノードJS、ビルド！？といった難しい言葉が出てきましたね。www

要するにNodeというJavascriptを使って処理を自動化させるツールと言うこと。

ざっくりしたイメージですが深追いせず行きましょう。

大切なのはgulpで何ができるのかと言うことです。 

gulpでできること

• 画像の圧縮
• Sassのコンパイル
• css, jsの文法チェック
• スタイルガイドの自動生成

と様々な用途で使えるパッケージが豊富に用意されています。

gulpを使う手順

1. Node.jsのインストール
2. package.jsonの利用
3. gulpのインストール

1. Node.jsのインストール

1. のNode.jsをインストールする方法は公式サイトに詳しく書いてあるのでご確認を！

Node.js

ただ、複数人でプロジェクトを進める場合なのどでNode.jsのバージョンを合わせないといけない時があるのでndenv, nodebrew, nvmといったバージョンマネージャーを利用した方が良さげです。ここでは小難しくなるので割愛します。コマンドライン（黒い画面）でインストールする方法ですお時間あるときにチャレンジしてみてください。

2. package.jsonの利用

パッケージの情報を合わせるためにpackage.jsonという必要な情報をまとめたファイルを作成します。

コマンドライン（黒い画面）を開いて以下のコマンド実行

npm init -y

インストールしたファイルの中身を見るとpackage.jsonというファイルが入っているはずです。

3. gulpのインストール

以下のコマンドでgulpをインストールできます。

npm install --save-dev gulp

これで一通りの作業は終了です。あとはgulpを使ってどのような処理を行いたいかをgulp.jsに記述していきます。( gulp.jsは作業ディレクトリに自分で作成します。)

var gulp = require('gulp');
gulp.task('default', function(){
//必要なタスクを記述
});

あとは初めの方に書いたgulpでできることにあった内容で実行したい処理を「//必要なタスクを記述」に追加していくのです。ここからが実際は本番って感じなのですが、gulpを使うまでの準備が今回のテーマなのでここまでにしておきます。

自分もまだまだ勉強中ですが、うまく使えば作業効率が格段に上がるはずなのでぜひ挑戦してみてください。