プロフィール
れもも(@lamoneido)と申します。
2021/12〜本業休職をきっかけにweb制作の学習を始めました。先日デイトラweb制作コースの卒業制作を終え、現在は個人で案件獲得に向け活動中です。
これからshopifyコースも控えています＾＾
れももです。
今回はデイトラ実務編Day17で、「Gulp（ガルプ）」というもの学習しましたのでメモします。
そもそも「Gulp」って何さ？って感じだったのでそこから記録に残していきます！
Day17はとても長くなりそうなので、下記のように3回に分けてシリーズ化してく予定です。
・第1弾：【デイトラ実務編 学習記録】Gulpを使ってみよう 「インストール〜簡単な動作実行編」 ←今回の記事
・第2弾：【デイトラ実務編 学習記録】Gulpを使ってみよう 「Gulpでできること前編」
・第3弾：【デイトラ実務編 学習記録】Gulpを使ってみよう 「Gulpでできること後編」
第1回目の今回は、Gulpインストールの仕方と実行方法について簡単な動作で学んでいく回です。
そして第2、3回で実際のweb制作の現場で使われる処理をいくつかピックアップして学んでいきます！！
それではいってみよう✊
Gulpとは
Gulpというのはタスクランナーと言って、さまざまな処理（タスク）を自動化してくれるツールです。代表的なGulpの処理はSassの自動コンパイル処理とかですね。ファイルの動きを監視しながらも対象ファイルを変換して出力といった処理を得意としています。
Gulpはこのように効率化する役目に加え、タスクの共有も可能なツールらしいのです。
言葉では全然イメージがつかないと思うので、実際にGulpを使えるようにしてみていきます。
ここまでの解説を聞いてもポカンって感じでした😅
焦らず徐々に理解していきます✊
Node.jsのインストール
Node.jsはnode-sassを動作させるために必要なものです。
という解説を聞いても自分はよくわからないのでとりあえずやってみる！！
まずはそのNode.jsとやらをダウンロードしていきます。
Nodeインストール
まずこちらからnode.jsをダウンロードします。
左側の「推奨版」の方をダウンロードするのがいいみたいです。
ダウンロードが完了したら、ファイルをダブルクリックで開きインストールまで進めていきます。
インストールが完了したら実際にインストールできたかチェックしていきます。
インストール確認
Macの場合「ターミナル」、Windowsの場合は「コマンドプロンプト」を開きインストールされているかチェックしていきます。
自分はMacユーザーのため、この記事ではMac側の解説となりますm(_ _)m
ターミナルを開いたらまずはnodeを確認するために「%」の後ろに「node -v」を入力しEnterを押しましょう。するとバージョン名が自動で記述されると思います。
こうなればOKです。
次に続けてnpmの確認をするために、また「%」の後ろに「npm -v」と入力しEnterを押しましょう。こちらもバージョン名が出てきたらOKです。
これでインストールされていることの確認ができました！
npmとか色々知らない言葉が出てきてなんだか難しく感じる🥺
Gulpのインストール
次にGulpをインストールしていきます。
今回はdemoフォルダを作ってやっていきます。
まずVS Codeでdemoファイルを開き、上部メニューバーの「ターミナル」→「新しいターミナル」でVS Code上でターミナルを開きましょう。
コマンドが入力できるようになったところで、まずは「package.json」というものを入れるために「npm init -y」と入力→Enterを押します。
すると「package.json」が追加されるはずです。
次にGulpをインストールするために「npm install –save-dev gulp」と入力→Enterを押します。
すると左上に「node_modules」というフォルダが追加されその中に「gulp」が格納されていることが確認できます。
他にも沢山ファイルがあるが、それらはgulpに必要な関連ファイルたちが自動的にインストールされているらしい。
またpackage.jsonには、packageがインストールされるとpackage名とバージョンの記載が追加されていくのでここも確認しておく必要がある。
処理の実行の仕方
処理を実行するためには「gulpfile.js」が必要なのでファイルを作成します。
作成したらそのファイルにコードを記述していきます。今回は簡単な動作を確認するため下記のように記述をしました。
どんな記述をしたか簡単にいうと「Hello Gulp」が出力される関数（testという名前をつけた）を作って、コマンドで実行できるようにexportsで登録をしました。コマンド名もtestと付けています。
//Gulpの読み込み
const gulp = require("gulp");
//実行したいタスク（関数で処理の内容を記述）
function test(done) {
console.log("Hello Gulp");
done();
}
//コマンドで実行できるようにexportsで登録
exports.test = test;
done(); ←これは処理の終了を示す
・コマンドで処理を実行できるように「exports」を使って登録をする。
例. exports.[コマンド] ＝ [関数名]
登録した処理をコマンドで呼び出すには、ターミナルに「npx gulp test」と入力してEnterを押します。難しいですがこれで「Hello Gulp」が出力されたました。
なんかめちゃくちゃプログラミングっぽくて難しい、、、
とりあえずここは進んだ方が理解が深まると思うので、ひとまずどんどん進んでいきます🥺
まとめ
以上、第1回はここまで。
まだどんなメリットがあるのかイマイチ見えてこないけど、とりあえずGulpを実行できる状態までは持っていけたみたいです！
インストールの手順などは画像付きで細かくメモしたのでいい備忘録になったかなと思います！
とりあえず改めて最後にまとめ。
・コードの書き初めにはgulp読み込みの記述を書く
const gulp = require(“gulp”);
・処理内容は関数で書き、処理の終了を明示的に示さなければならないため関数内に「done」を記述する。
done(); ←これは処理の終了を示す
・コマンドで処理を実行できるように「exports」を使って登録をする。
例. exports.[コマンド名] ＝ [関数名]
・タスクを呼び出すには「npx gulp [コマンド名]」をターミナルに入力する。
ちなみに「Web製作者のための Sassの教科書」にもGulpやNode.jsのことについての解説が載っているのでこっちも併せて見ながら進めています✊
この記録が皆さんの参考になればと思います。気になることがあれば是非コメントなどお待ちしております。
また次回の記事も見ていただけると幸いです＾＾
コメント