導入が怖くない。gulpのインストールと使い方。
【重要】
-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のインストールから実行までは以上です。
ここまで到達できましたか？
ちょっとはコマンドプロンプトも怖くなくなったでしょうか。