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

一瞬でgulpを動かす環境を作る
gulp
エラーについて
さいごに

一瞬で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

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

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がインストール出来たら
早速プラグインをインストールしてみましょう。

gulp-clean-css

Minify css with clean-css.. Latest version: 4.3.0, last published: 4 years ago. Start using gulp-clean-css in your project by running `npm i gulp-clean-css`. Th...

今回はサンプルとして
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を呼ぶようにする