私にもわかるgulpの話
ゆるWeb勉強会@札幌 Advent Calendar 2019 の22日目の記事を担当させていただきます。
webデザイナー兼コーダーになって1年弱、勤めてからgulp(ガルプ)の存在を知り、最近ぽつぽつとgulp導入案件に関わるようになってきました。
で、
gulpってむずくね？
てか意味わかんなくね？
と言うかgulpって結局のところなんなん？
という気持ちを抱えたまま、とりあえず先輩に言われるがまま黒い画面に向かってnpx gulp defaultを打ち続ける日々。先輩には「会社のテンプレートあるからgulpの起動だけ覚えとけばとりあえず大丈夫だよ〜」的なことを言われましたが、理解出来ないものは使えない頭のカタイ私。仕方ないので英単語の羅列にアレルギーを感じながらも黒い画面と向き合いgulpについて理解しようともがいた私の学習記録です。まだふわっとさらっとしか理解できていません。
まじでレベルが低いので新米コーダーやコーディングやらなきゃいけないデザイナー、ディレクターはこれを読んで安心してください。私ここまで理解するのに３ヶ月くらいかかってます。
イケイケエンジニアは訂正や補足あったらコメントいただけると恐縮です。
それではいってみよー↓↓↓
そもそもgulpとは
gulpとは「タスクランナー」と呼ばれるもののひとつのようです。
「タスクランナー」とは、「タスク(仕事・課題)」をプログラム処理で自動化してくれるツール全般のことを指します。
フロントエンドの制作業務の中で出てくる単純作業を自動化してしまい、業務の効率化、サイトの品質を守るが目的です。
引用：
タスクランナーで処理を自動化しよう 〜Node.jsのインストールまで〜 - ブログ｜Web・ホームページ制作の株式会社アウラ（大阪）
上記はふ〜んそうなんだ〜という感じで大丈夫です。
具体的に何をしてくれるの？
gulpが自動化してくれる作業(タスク)には下記のようなものがあります。
●Sass(scss)のコンパイル
scssはcssを効率的に書くことができるものです。親の{}の中に子の{}を記述する入れ子(ネストと言うらしいです)が出来たり、変数といって、キーワードによく使う色などを指定しておくと値にキーワードを記述するだけで指定した色などが使えます。しかしサーバーにアップする際にはcssに書き換える(コンパイルする)必要があります。
参考：Sass（SCSS）でCSSコーディングを効率化・メリットと使い方を知る | Qookie Tech
●ベンダープレフィックスの自動付与
cssのプロパティにつける-moz-とか-webkit-とか
●htmlやcssを保存するたびにプレビュー画面リロード
保存しなくても編集するだけでリロードしてくれたかもしれない
私がgulpがやってくれているタスクとして実感しているものはこのくらいです。設定すればもっと色々やってくれるよ！
上記項目はいずれも「誰がやっても同じクオリティ(結果)であるべき作業」。“あるべき”と言うのは、ベンダープレフィックスのつけ忘れや最新のscssをコンパイルしていなかったなど、人間がやるとうっかりミスにより実際には同じ結果にならないということがあるからです。
ミスしないうえに手間もはぶけるんだから、gulp導入しない手はないよね！
という流れ。まぁそうですよね。
gulpってどうやって操作するの？
gulpの起動やプラグイン(パッケージ？)のインストールは“黒い画面”を使って行います。ハッカーとかがよく使っているイメージのあの“黒い画面”ですね。
あの“黒い画面”、macでは「ターミナル」、windowsでは「コマンドプロンプト」と言います。こう言うところくらい統一してくれればいいのに
黒い画面では常に一番下の行(↓の写真なら２行目の部分)に“今自分がパソコンの中のどこにいるか”がパスで表記されています。
パスの参考：ファイルパス（File Path）とは、ファイルがある場所を示す文字列のことです。 | 学修のーと
パスの末尾はmacなら“＄”、windowsなら“>”で締められています。なので解説系の記事で黒い画面に入力するコマンドが表記されている際「$ ホニャララ〜」だったり「> ホニャララ〜」と書かれていることがありますが、$と>は自分で入力する部分ではありません。windowsしか使ったことがなかった頃、$も入力するのかと思い入れたらエラーが出た懐かしい思い出・・・
上記でインストールすると書いたプラグインについて。
プラグインというのは拡張機能のことで、画面をリロードするためのプラグインだったり、scssをコンパイルするためのプラグインだったり、いろんなプラグインがある感じです。逆にプラグインを入れないと何もできません。
こないだやっとプラグインをインストールするくらいまで進めた程度なのでこのへんの理解もふんわり。。
そしてインストールしたプラグインを使い「htmlが編集されたらプレビュー画面をリロードする」とか「scssが保存されたらコンパイルする」とかの細かい命令をするプログラムを“gulpfile.js”と言うJavaScriptファイルに書き込んでいきます。
gulpってどうやったら使えるようになるの？
gulpを使うためには、gulpを動かす親分ことnode.jsのインストールが必要です。
具体的なインストール方法については下部にリンクを貼っておきます。ここでは実際にインストールする前に知っておきたい全体の流れ。
node.jsをパソコンにインストールすると、黒い画面でnpmと言うコマンドが使えるようになります。gulpはnpmコマンドでインストールするわけです。
npmとはパッケージを管理するツールだそうで、「npmと言うツールを使ってモニョモニョして」という命令が書けるようになるわけですね。ちなみにnpmについてはこの記事を書くにあたり一応名前だけは調べましたが、npmが何かわかっていなかったためにnode.jsのインストールで困ったとかgulp導入できなかったとかは今のところありません。
これでgulpがインストール出来るようになったのですが、gulpはパソコンではなく“制作するサイトデータを格納するフォルダ”にインストールします。
パソコンにインストールも出来ますがweb界隈において一般的ではありません。他の人と制作する場合に、パソコンごとgulpのバージョンやプラグインが違うなんてことになると面倒なので、制作プロジェクトごとにバージョンやプラグインを揃えるためです。たぶん。
つまり制作するサイトの数だけgulpもインストールされるということですね。
なので、gulpをインストールする前にサイトデータを格納するフォルダを用意する必要があります。ふつうに新規作成で作ってください。
このへんの作成する順番やインストール場所みたいなのが最初よくわかっておらず何回か失敗しました。失敗してもやり直せばいいだけでとくに何もなかったけど。
まだgulpはインストールしません。
次にサイトデータを格納するフォルダの中に“package.json”というjsonファイルを作成します。こちらは黒い画面にコマンドを打ち込んで作成させます。
package.jsonとはどのプラグインを使っているかなどを書き留めておくファイルです。
プロジェクトメンバーにサイトデータ一式を渡す際gulpやプラグインまで渡すのは容量的にも重いので、使っているプラグイン一覧表だけを渡して各自同じものをインストールしてもらおうという魂胆です。
package.jsonまで作成したら、いよいよgulpをインストールします。
黒い画面が考え事をした後、サイトフォルダの中によくわからないフォルダとファイルが増えていたら成功です。ヤッタネ！
具体的なインストール方法は書き参考記事を読んでみてください。
参考：gulpインストール手順が書かれたオススメ記事２つ
新規制作での環境構築などはまだやったことがないのでこれから勉強しますと言うか勉強してます。
理解が深まったらまた書けるといいな。
gulp公式はこちら
