一番手っ取り早くgulp.jsを動かす方法【超入門編】

javascript 2019年4月14日

一瞬でgulpを動かす環境を作る

gulpといえばsassやbabel、ファイルの結合、構文チェック、画像圧縮などなど、フロントエンドの様々なタスクを自動で実行できる node.js製のビルドシステムです。

先日そのgulpを導入する機会があったので備忘録がてらにその手順を記載しておきます。

gulp

手順

node.jsとnpmをインストールする
プロジェクトフォルダにcdしてnpm initする
プロジェクトフォルダにgulpをローカルインストールする
プロジェクトフォルダ内にgulpfile.jsを作成する
使いたいgulpプラグインをインストールする
gulpfile.jsにプラグインを動かすコードを書く
実際にプラグインを動かしてみる

1.node.jsとnpmをインストールする

node.js

https://nodejs.org/ja/

node.jsの公式サイトからインストーラでインストールします。

推奨版と最新版の二種類がありますが普通に使う場合は安定性の高い推奨版を選べばよいでしょう。

インストールが完了したらコマンドプロンプトを開き、以下のコマンドを叩いてください。

node -v

正しくインストールされていれば次のようにバージョン情報が表示されるはずです。

v10.15.3

npm

npmはnode.jsのパッケージを管理するツールで node.jsを使うなら必須となる存在です。

npmはnode.jsをインストールすると自動で一緒にインストールされます。

npmのバージョンは次のコマンドで確認してください。

npm --version

2.プロジェクトフォルダにcdしてnpm initする

node.jsをインストールしたら続いて任意の場所に新規プロジェクトフォルダを作成し、コマンドでその場所に移動します。

cd C:\Users\XXXX\OneDrive\デスクトップ\general\experiment\gulp_test

コマンドが正しければコマンドプロンプトの左側(カレントディレクトリ)が次のように変化します。

C:\Users\XXXX\OneDrive\デスクトップ\general\experiment\gulp_test>

プロジェクトフォルダに移動したら続いて以下のコマンドを叩きましょう。

npm init

コマンドを実行すると色々聞かれますが基本Enter連打でOKです。 (全部後から変更可能です)

処理が完了するとプロジェクトフォルダ内に package.jsonが作成されます。

このファイルはプロジェクトの管理や環境のセットアップに利用します。

3.プロジェクトフォルダ内にgulpfile.jsを作成する

次にプロジェクトフォルダ内に guplをローカルインストールします。以下のコマンドを叩いてください

npm install gulp --save

うまくいけばフォルダに node_modulesフォルダと package-lock.jsonが新しく追加されているはずです。

4.使いたいgulpプラグインをインストールする

gulpがインストール出来たら早速プラグインをインストールしてみましょう。

https://www.npmjs.com/package/gulp-clean-css

今回はサンプルとして cssコードを最適化する『gulp-clean-css』をインストールしてみます。次のコマンドを叩いてください

npm i gulp-clean-css --save-dev

5.gulpfile.jsにプラグインを動かすコードを書く

gulpのプラグインはインストールしただけでは動きません。

gulpの動作を指定する gulpfile.jsファイルをプロジェクトフォルダ内に作成し、中身を次のように変更して保存してください。

//必要プラグインの読み込み
let gulp = require('gulp');
let cleanCSS = require('gulp-clean-css');

//実行!
gulp.task('minify-css', () => {
  return gulp.src('styles/*.css')
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('dist'));
});

そして次にnpm scriptで gulpを実行するために package.jsonに次の記述を追加してください。

  "scripts": {
    "gulp": "gulp"
  }

ここまで準備ができたら最後に最適化を実行するテスト用のcssファイルを用意します。

プロジェクトフォルダ直下に stylesフォルダを作ってその中にtest.cssを作成します。 (コンパイル元ファイルの位置は gulp.srcの引数で変更可能です)

中身は何でもよいのですが今回は次のようなコードにしました。

body{
	font-size: 10px;
	letter-spacing: 0.1em
}

.main{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

.title{
	font-size: 24px;
	font-weight: bold;
	border-bottom: 1px solid #000;
}

6.実際にプラグインを動かしてみる

ではいよいよgulpを実行してみます。次のコマンドを叩いてください

  npm run gulp minify-css

うまくいけばプロジェクトフォルダ直下に distフォルダが追加され、更にその中に最適化された test.cssファイルを確認できるはずです。

body{font-size:10px;letter-spacing:.1em}.main{width:90%;margin-left:auto;margin-right:auto}.title{font-size:24px;font-weight:700;border-bottom:1px solid #000}

元ファイルにあった無駄な改行やスペースがなくなり、ファイル容量が削減されていますね。 (この程度のコード量ではあまり有難みないですが)

エラーについて

インストール途中に私が遭遇したエラーをメモしておきます。

npm ERR! missing script: gulp

↑対処法 : package.jsonに “scripts” : {“gulp” : “gulp”}を追記する

npm ERR! missing script: gulp
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gulp_test2@1.0.0 gulp: `gulp`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gulp_test2@1.0.0 gulp script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.


npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\comlab\AppData\Roaming\npm-cache\_logs\2019-04-12T02_40_49_993Z-debug.log

↑対処法 : タスク内の処理が完了したタイミングでcall backを呼ぶようにする