2019年5月15日

gulp入門

gulp(ここではgulp 4が対象)をインストールして簡単なタスクを実行するところまでをやる。

Node.jsのインストールを前提とする。

gulpとは

gulp(ガルプ)は、web開発において様々なことを自動化できるツール。

インストールの前に

まず、作業するディレクトリ(たとえば/Users/Macユーザー名/test/gulp-test-001)を作成して、ターミナルでそこまで移動する。

cd /Users/Macユーザー名/test/gulp-test-001

「cd 」の後ろは直接入力ではなく、当該ディレクトリをターミナルにドラッグアンドドロップしても入力可能。

次に、ディレクトリのルート(直下)にpackage.jsonを作成する。

npm init -y

package.jsonが何者なのかは最初は気にしなくて良いのでスルー。

gulpのインストール

引き続き同じ作業ディレクトリにいる状態で、

npm i -D gulp

を実行すればgulpのインストールが開始される。noticeやWARNが出るけどこれらもスルー。

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN gulp-test-001@1.0.0 No description
npm WARN gulp-test-001@1.0.0 No repository field.

インストールが完了すると、作業ディレクトリに「package-lock.json」というファイルと、「node_modules」というディレクトリが生成される。これらが何者なのはもちろんスルー。

念のためバージョンを確認して、

npx gulp -v

バージョンが確認できればインストール完了。

CLI version: 2.2.0
Local version: 4.0.2

gulpを使ってみる

まず、作業ディレクトリ直下に「dev」というディレクトリを作成して、さらにその中に「html」というディレクトリを作成したら、そこに適当なHTMLファイル(たとえばtest.html)を設置する。

次に、作業ディレクトリ直下に「gulpfile.js」というファイルを作成し、以下のようなコードを書く。

// モジュールを読み込む
const gulp = require('gulp');

// dev階層のHTMLファイルを取得してdist階層に保存するタスク
function html() {
  return gulp.src('./dev/html/test.html')
    .pipe(gulp.dest('./dist/html'));
}

// 「test」という名前で「html」を実行
exports.test = html;

これで準備完了。

npx gulp test

で実行すると、作業ディレクトリ直下に「dist」というディレクトリが生成されており、中身は「dev」のそれと同じものになっている。

これが自動化の第一歩。基本的に開発時は「dev」の中身を編集し、gulpを使って「dist」に配置したものをサーバにアップするイメージ。

もちろん、単に配置するだけでは意味が無い。配置する時に色々なタスクを実行することで開発の効率化を図ることができるので、今後そのあたり学んでいく。