10分でできる非エンジニアの為のGulp導入と使い方

スキルアップ
いつか空を飛びたいペンギン
いつか空を飛びたいペンギン

Gulpって便利そうだけど、みた感じjsとかモリモリ書かれててわけわからん。いつか空飛べるようになったら学ぼう。

 

駆け出しの方や、フロントエンド領域にあまり触れていないWebデザイナーの方にとって、Gulpはそんなイメージではないでしょうか。

Gulpはsassを使えるようになるのはもちろん、画像やCSS、JSの圧縮、ベンダープレフィックスの付与などを自動でやってくれるタスクランナー(自動化ツール)です。

 

そんな便利なGulpですが、導入するまでが億劫な雰囲気を漂わせています。

そこで今回は初心者や非エンジニアの方にも簡単に導入できるであろうGulp導入法を紹介したいと思い、この記事を書きました。

 

結論から言うと、こちらHabedyOmidさん(読み方がわからない)のGitHub上のリポジトリファイルを使わせていただくことにより、簡単にGulpを導入できました。

GitHub - HabedyOmid/Gulp-Masterfy-Assets: A simple and powerful app to masterfy your web assets. Compile SASS to CSS, Minify CSS and JS, Compress Image, and Live Reaload browser by making any changes on fly.
A simple and powerful app to masterfy your web assets. Compile SASS to CSS, Minify CSS and JS, Compress Image, and Live Reaload browser by making any changes on...

 

プロフィール写真から漂うつよつよエンジニア感…。

 

これらを参考に、Gulpの導入から使い方まで日本語でできるだけわかりやすく説明していきます!

エラーなどがでなければ、10分ほどでsassや自動圧縮が使えるようになりますよ〜

準備

Node.jsをダウンロード

ダウンロード | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

上記リンクから、Node.jsの推奨版をダウンロードします。

ダウンロードが終わったら、出てくるポップアップに従ってインストールを完了させてください。

 

Node.jsをインストールすることで、パッケージマネージャであるnpm(Node Packaged Modules)が使用できるようになります。

npmは、コマンド入力で簡単に必要なパッケージのインストールが可能となるものです。

 

ノードやらnpmやらなんだか難しいですが、簡単に言えば

Gulp使うにはnpmというものが必要→npm使うにはNode.jsというものが必要

って感じです。

ファイルをGitHab上からダウンロード

冒頭でも話したGitHab上にアップされているファイルをダウンロードします。

GitHub - HabedyOmid/Gulp-Masterfy-Assets: A simple and powerful app to masterfy your web assets. Compile SASS to CSS, Minify CSS and JS, Compress Image, and Live Reaload browser by making any changes on fly.
A simple and powerful app to masterfy your web assets. Compile SASS to CSS, Minify CSS and JS, Compress Image, and Live Reaload browser by making any changes on...

 

「GitHabなんて使ったことない」という方も安心してください。

ただダウンロードボタンを押すだけです。

 

Clone or downloadよりZIPファイルをダウンロードします。

 

ファイルを解凍したら、エディタ上に表示してみてください。

 

このファイルはWeb制作に必要な模範的なディレクトリが作られている、且つsassのコンパイルや画像の圧縮などを行えるようなGulpのjsがすでに出来上がった状態になっています。

つまり、使い始めるのにJavaScriptなどの記述は不要です。

Gulpとnpmをインストール

このままではまだ使うことができないので、Gulpのインストールnpmの一括インストールを行います。

Gulpのインストールは黒い画面(ターミナル)を使って行いますが、全然難しいことはしないので安心してください。

Gulpのインストール

Gulpのインストール方法は「グローバル」と「ローカル」の二種類がありますが、今回は「ローカル」にインストールします。

ちなみにグローバルだローカルだという話は、はにわまんさんのブログ記事がわかりやすかったので共有させていただきます。

npmでグローバルにインストールして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^)\」ってなりがちなので、少しでも簡単にこれらのタスクランナーを使えるようになるのはありがたいですね。

慣れてきたら色々カスタマイズして、自分なりの制作環境を作ってみてください(^^)

スポンサーリンク

つな

アラサーからWebデザイナーになりました。前職は医療従事者。都内に勤める道産子です。このブログでは私自身が未経験から転職した体験を元に、Webデザイナーを目指す方に役立つ記事、スキルアップに繋がる情報を主に発信しています(適当な日記もたまに)。
Twitter:@nkichiishi

つなをフォローする
スキルアップ
スポンサーリンク
つなをフォローする
Webデザイナーどうでしょう

コメント

タイトルとURLをコピーしました