見出し画像

導入が怖くない。gulpのインストールと使い方。

kid



【重要】
-g（グローバル）のインストールはちょっと待った！


調べるといっぱい出てくるgulpのインストール方法で　-g（グローバル）と書かれている方法をそのまま鵜吞みにするのは待ってください。

gulpをグローバルで使用することは”あまり”ありません。
おそらくは固有の案件で使っていくと思います。
分からないうちにグローバルでのインストールは控えた方が良いです。やってもいいんですが。

グローバルでもローカルでも大差ないですが、グローバルでファイルが置かれる場所は「C:\Users\ユーザー名」です。慣れない方にはちょっと怖い場所。
このnoteを見て参考にしてくださってる方はグローバルでインストールするのはやめましょう。必要だと分かってからで十分です。



gulpインストールのステップ


1.node.jsとnpmのインストール
2.gulpのインストール
3.必要なパッケージのインストール
4.タスクの実行・使い方

全部で4ステップです。
コマンドプロンプト出てきますが、頑張りましょう。



1.node.jsとnpmのインストール


まずはnode.jsをインストールしましょう。
『推奨版』をダウンロードしてください。

英語のインストーラーが立ち上がりますが、
無心で「Next」していってください。
インストールが終わったら、ついにコマンドプロンプトです。
大丈夫です。1つずつやりましょう。

書いてある通りに行かないなぁと思ったら、一度再起動してください。インストールを行っているので、再起動するまでうまく動作しないことあるようです。



node.jsとnpmの確認


コマンドプロンプトを起動して、node.jsとnpmがインストールされていることを確認しましょう。
↓これをそのままコピペしてください。このバージョン確認が大事です。


コマンドプロンプト

node --version

コマンドプロンプトのすぐ下の行にバージョン情報の「v12.18.3」とか出ました？バージョンはその時によって違うので同じじゃなくて大丈夫。
「--version」は「-v」と同じ意味です。

続けて↓これもコピペしてください。


コマンドプロンプト

npm --version

これもすぐ下の行に「6.14.6」みたいなバージョン出ました？
インストールがうまく行ってます。どんどんいきましょう。



gulpのインストールの前に


さて、問題のグローバルのところに到達しました。

今コマンドプロンプトは「C:\Users\ユーザー名>」となってますか？
このままインストールを行うとユーザー名配下にgulpがインストールされちゃうので、移動しなきゃいけません。



コマンドプロンプトでのフォルダの移動


本題からズレますが、怖くないために必要な事なので、少し説明を。

gulpをインストールしたい場所がユーザーのフォルダからどうやって移動したらいいかを考えてください。
cd（カレントディレクトリ）と打つと移動できます。
Cドライブまで移動してみましょう。


コマンドプロンプト

cd ../../

今コマンドプロンプトは「C:\」となってますか？
このようにcdに続けて移動先への相対パスを記述することで移動ができます。
ネットワークドライブに移動したい場合はこうなります。


コマンドプロンプト

cd /d z:

これでzドライブ（適当な名前です）に移動できます。
本題に戻りgulpのインストールします。



2.gulpのインストール


gulpに必要なpackage.jsonを作成します。


コマンドプロンプト

npm init -y

ついにgulpをインストールです。


コマンドプロンプト

npm install gulp -D

「-D」は「--save-dev」と同じです。
ついにこれでgulpインストール完了です。
バージョン確認してみましょう。


コマンドプロンプト

npx gulp --version

「CLI version: 2.3.0
Local version: 4.0.2」のようなバージョン情報出ました？
npmじゃなく「npx」です。
これでgulpのインストールは完了です。

3.必要なパッケージのインストール

例としてファイルを挿入してくれるパッケージをインストールします。
使うものを同じ要領でインストールしてください。


参考：gulp-file-include

パッケージのインストールもコマンドプロンプトから行います。
ここまでこれたら、もう怖くないはず！


コマンドプロンプト

npm install gulp-file-include -D

以上！パッケージのインストールも完了です。
セッティング終わったので、簡易な使い方を説明します。



4.タスクの実行・使い方

インストールを行ったフォルダに空のファイル「gulpfile.js」を作りましょう。
このjsファイルへ記載した内容がインストールしたgulpやnpm、node.jsを使って自動で処理を行ってくれます。

例でインストールした「gulp-file-include」を実行してみます。


JavaScript（gulpfile.jsに記載）

const gulp = require('gulp');
const fileinclude = require('gulp-file-include');
gulp.task('include', function(done) {
   gulp.src(['root/**/*.html'])
   .pipe(fileinclude())
   .pipe(gulp.dest('./dist'));
   done();
});

「gulp」と「gulp-file-include」を要求し、
gulpのタスク「include」でroot配下にあるhtmlファイルのインクルードの実行をして、「dist」フォルダへ結果を保存する処理が書かれています。

「gulpfile.js」と同じ階層にrootフォルダを作り、その中にHTMLファイルを作ってください。


HTML

<!DOCTYPE html>
<html>
 <body>
 @@include('ssi.html')
 </body>
</html>


HTML（上記ファイルで読み込まれるssi.html。これも同じ階層）

<header>ヘッダー</header>

さて、準備は完了です。
gulpのタスクを動かしてみましょう。


コマンドプロンプト

npx gulp include

「gulpfile.js」に書かれているタスク名で実行します。npmじゃなく「npx」です。エラーが無いと

Using gulpfile
Starting 'include'...
Finished 'include' after 20 ms

とコマンドプロンプトに表示され、「dist」フォルダのHTMLには「@@include('ssi.html')」が置き換わったファイルが保存されています。

gulpのインストールから実行までは以上です。
ここまで到達できましたか？
ちょっとはコマンドプロンプトも怖くなくなったでしょうか。