Gulpって便利そうだけど、みた感じjsとかモリモリ書かれててわけわからん。いつか空飛べるようになったら学ぼう。
駆け出しの方や、フロントエンド領域にあまり触れていないWebデザイナーの方にとって、Gulpはそんなイメージではないでしょうか。
Gulpはsassを使えるようになるのはもちろん、画像やCSS、JSの圧縮、ベンダープレフィックスの付与などを自動でやってくれるタスクランナー（自動化ツール）です。
そんな便利なGulpですが、導入するまでが億劫な雰囲気を漂わせています。
そこで今回は初心者や非エンジニアの方にも簡単に導入できるであろうGulp導入法を紹介したいと思い、この記事を書きました。
結論から言うと、こちら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^)＼」ってなりがちなので、少しでも簡単にこれらのタスクランナーを使えるようになるのはありがたいですね。
慣れてきたら色々カスタマイズして、自分なりの制作環境を作ってみてください(^^)
コメント