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

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

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

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

gulp

手順

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

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を呼ぶようにする

さいごに

以上がgulpの入門中の入門になります。

gulpは奥が深く、 今回のように普通にプラグインを動かすだけでなく 複数のプラグインを任意の順番で実行したり、 ファイルの更新があったときに 自動で特定のプラグインを作動させることも可能です。

年々複雑化の一歩をたどる フロントエンドの開発環境ですが こうした便利なツールを使うことで 開発スピードとコードの品質を 保てるようにしていきたいですね。

それでは。