Gulpって便利そうだけど、みた感じjsとかモリモリ書かれててわけわからん。いつか空飛べるようになったら学ぼう。
駆け出しの方や、フロントエンド領域にあまり触れていないWebデザイナーの方にとって、Gulpはそんなイメージではないでしょうか。
私自身もsassを使うときは、特に難しい操作のいらない「Dreamweaver」でやっていました。
Gulpはsassを使えるようになるのはもちろん、画像やCSS、JSの圧縮、ベンダープレフィックスの付与などを自動でやってくれるタスクランナー（自動化ツール）です。
今回、社内でサイトのフルリニューアル案件があり、その制作を始めるに当たってGulpを導入することになりました。
その中で、調べた中では最も簡単に導入できるであろう方法を海外のYouTubeで発見したので共有したいと思います。（見つけたのは私ではないのですが。笑）
YouTube内のリンクに貼ってあるこちらHabedyOmidさん（読み方がわからない）のGitHub上のリポジトリファイルを使わせていただくことにより、簡単にGulpを導入できました。
プロフィール写真から漂うつよつよエンジニア感…。
これらを参考に、Gulpの導入から使い方まで日本語でできるだけわかりやすく説明していきます！
エラーなどがでなければ、10分ほどでsassや自動圧縮が使えるようになりますよ。
準備
Node.jsをダウンロード
上記リンクから、Node.jsの最新版をダウンロードします。
ダウンロードが終わったら、出てくるポップアップに従ってインストールを完了させてください。
Node.jsをインストールすることで、パッケージマネージャであるnpm（Node Packaged Modules）が使用できるようになります。
npmは、コマンド入力で簡単に必要なパッケージのインストールが可能となるものです。
ノードやらnpmやらなんだか難しいですが、簡単に言えば
Gulp使うにはnpmというものが必要→npm使うにはNode.jsというものが必要
って感じです。
ファイルをGitHab上からダウンロード
冒頭でも話したGitHab上にアップされているファイルをダウンロードします。
「GitHabなんて使ったことない」という方も安心してください。
ただダウンロードボタンを押すだけです。
Clone or downloadよりZIPファイルをダウンロードします。
ファイルを解凍したら、エディタ上に表示してみてください。
このファイルはWeb制作に必要な模範的なディレクトリが作られている、且つsassのコンパイルや画像の圧縮などを行えるようなGulpのjsがすでに出来上がった状態になっています。
つまり、使い始めるのにJavaScriptなどの記述は不要です。
Gulpとnpmをインストール
このままではまだ使うことができないので、Gulpのインストール・npmの一括インストールを行います。
Gulpのインストールは黒い画面（ターミナル）を使って行いますが、全然難しいことはしないので安心してください。
Gulpのインストール
Gulpのインストール方法は「グローバル」と「ローカル」の二種類がありますが、今回は「ローカル」にインストールします。
ちなみにグローバルだローカルだという話は、はにわまんさんのブログ記事がわかりやすかったので共有させていただきます。
MacやWindowsに搭載されているターミナル起動して、先ほどダウンロードしたフォルダ（Gulp-Masterfy-Assets-master）の場所を指定します。
フォルダの指定は「cd」と入力して、ターミナルにフォルダをドラッグ&ドロップすればOKです。
$ cd※「cd」の後に半角スペースが入ります
ちなみに「Visual Studio Code」など、エディタ内でターミナルが使えるものもあります。
その場合、エディタ上で開いているファイルが勝手に指定されているのでこの操作は不要です。
ファイルを指定したら、Gulpをローカルにインストールするため以下のコマンドを入力。
$ sudo npm install gulp --save-dev
ユーザーパスワードを要求されたら、入力してenter（入力したパスワードは表示されません）。
インストールが出来たか確認するには以下のコマンドを入力します。
$ npx gulp -v
バージョンが表示されたら、インストール成功です！
npmの設定を一括インストール
npmの設定を一括インストールするために、以下のコマンドを入力。
$ npm install
これらのインストールが完了するとディレクトリ直下に「node_modules」というフォルダが生成され、中身には大量のファイルが入っているのが確認できると思います。
ファイルの中身は何が何だかよくわかりませんが、Gulpを使うにはこれらが必要ということです。
Gulpを使ってみる
エラーなどが起きていなければ、これでもうGulpが使用できるようになっています！
試しにターミナルに以下のコマンドを入力してみてください。
$ npx gulp watch
ブラウザが立ち上がって、プレビューが表示されたと思います。
「gulp watch」はSASS, CSS, JS ,HTMLの変更をリアルタイムに反映して表示させるコマンドです。
gulp watchコマンドは、一度入力するとファイルを監視し続けるので、終了するには「control ＋ C」を押します。
その他、主なコマンドです
- npx gulp sass：sassをコンパイルしてcssを生成
- npx gulp css：CSSファイルを圧縮、プレフィックスを付与
- npx gulp js：JavaScriptファイルを圧縮
- npx gulp img：画像を圧縮
- npx gulp build：上記処理をすべてやってくれる
先ほどのGitHabページの下や、プレビュー表示されたサイトにもコマンドのリストが書かれていますので、実際にやってみて挙動を確認してみてください（英語ですが）。
※ちなみにGulpをグローバルでインストールすると「npx」の記述は不要です。
実際の使い方（例）
ダウンロードしたファイルはディレクトリごとにファイルも作られていて、とてもありがたいです。
しかしちょっとごちゃごちゃしていて、わかりにくい…。特にsass,cssファイルが多すぎます。
実際に制作する際には、不要なものを削除して使用する感じです。
試しにcssフォルダの中身を全て削除してみます。
そしてscssフォルダは「app.scss」以外を全て削除します。
次にscssフォルダの中に「base」フォルダを作り、その中に「_main.scss」「_header.scss」
「_footer.scss」というファイルを作成してみます。
「app.scss」は分けられたsassファイルをひとまとめにしているものです。
この中に「@import」という、それぞれのsassファイルを読み込むための記述を以下のようにします。
scssファイル名の前にはアンダースコアをつけましたが、@importで記述するときには不要です。
この状態でgulp sass（またはgulp build）を行うと、「app.scss」がコンパイルされてcssファイルが出来上がります。
ここで気づいたかもしれませんが、baseフォルダに入っている三つのsassファイルはコンパイルされていません。
アンダースコアをつけたファイル名のものは、コンパイルされないのです。
ひとまとめにしている「app.scss」さえコンパイルされれば良いので、無駄なファイルを生成させないためにアンダースコアをつけています。
ちなみにgulpで圧縮された画像やCSSなどのファイルは「dist」というフォルダの中に全て入ります。
制作中は「dist」内のファイルを使用しなくてもサイト自体は見れますが、公開前には圧縮されたファイルを参照するようにしてください。
まとめ
本来gulpコマンドでの処理を追加するためには、ディレクトリ直下にある「gulpfile.js」にコードを記述していきます。
今回はGit上のアセットを使ったことにより、基本的な処理はすでに記述済みです。
HTMLやCSSを学んだ後に「sass使ってみたいな〜」という方も多いと思います。
しかし導入段階で「ナンジャコリャ／(^o^)＼」ってなりがちなので、少しでも簡単にこれらのタスクランナーを使えるようになるのはありがたいですね。
とはいえ、一からGulpの環境構築をするのは勉強になります。
フロントエンドエンジニアと名乗れば、このあたりは必須の知識ではないでしょうか。
私はいつもほぼ日本のサイトしか閲覧しないのですが、海外のサイトにも便利な情報が転がってるんだなーとつくづく思いました。
これまでの人生でもっと英語力をつけておけば良かった…。
中学に戻って「ニューホライズン」からやり直したい。そう感じたGulpの導入でした。
参考になれば幸いです！
コメント