gulpって何？gulpについてまとめてみました

こんにちは。デザイナーのnoguchiです。
私の仕事はメインはデザインですが、LPなど小規模サイト等のコーディングを行うことがあります。
そこで、今回弊社のフロントエンドがバリバリ使ってる「gulp」ついて調べてみました。
というのも、私自身もgulpを詳しく知らずに使ってるとこがあるので、改めて学んでいこうと思います。

gulpとは？

gulpとは、Node.jsをベースとしたタスクランナーです。
タスクランナーとは、Web制作において必要な処理を自動化するツールです。

Node.js
サーバーサイドの JavaScript 実行環境。
Google V8 JavaScript エンジンを使用しており、高速。

似たようなツールはいくつかありますが、gulpはその中でも「Node.js 上で動作 (Windows & Macの両方で使用できる)」、「設定ファイルがJavaScript」、「同時に複数の処理を実行できるので、処理速度が速い」、「プラグインが豊富」といった特徴があります。

そして、gulpを使うことで、毎回手作業で行っていた作業を自動的に実行できるようになります。
多数のプラグインを組み合わせることで、さまざまなタスクを実行することが可能になります。

自動化する処理は設定ファイルのJavaScriptに記述し、プロジェクトに合わせてどのような処理を行うか設定して使います。

タスクを機械的に実行してくれるので、作業時間を短縮できることはもちろん、人的ミスを防ぐことができます。

gulpで何ができる？

「メタ言語のコンパイル」

CSSだとsass（※1）やless（※2）、stylus（※3）などで書いたファイルをCSSにコンパイルができます。
ちなみに、HTMLだとpug（※4）、jadeなどで書いたファイルをhtmlにコンパイルできます。

sassやpugなどは、そのままではブラウザが認識できません。
そのため、CSS、HTMlに戻すことが必要になってきます。
この作業がコンパイルです。
そして、コンパイルする時に出番となるのがgulpです。

ちなみに余談ですが、私この会社入って、html、cssを書いてなくて久しいので、今html、cssを書いたら閉じタグ忘れとかやりそう…なくらい便利なpug等をコンパイルしてくれるのはなんともありがたい<(_ _*)>

（※1）Sass
CSSメタ言語の一つ。
sassはCSSを効率的に記述できるように設計・開発された言語です。
cssで書くと長く複雑になってしまう記述をシンプルに書くことができます。

（※2）less
CSSメタ言語の一つ。
sass同様、cssを効率的に書くことができます。

（※3）stylus
stylusはsassとlessのいいとこどりと言われているCSSメタ言語の一つです。

（※4）pug
HTML系のテンプレートエンジンです。
pugはHTMLにおけるsassのようなもので、HTMLの記述を効率化できます。
元々はJadeという名称でしたが、商標権の都合上pugへと名称変更がありました。

「HTML、CSS、JavaScript、画像などの最小化（minify）」

minifyとは、コードの中の不要な改行、インデントなどを削除し、動作はそのままで圧縮や軽量化することです。

圧縮することで、ページの読み込み速度が速くなり、ユーザビリティの向上につながります。
さらにはGoogleが推奨しているWebサイトのファイルサイズは1.6MBですので、ファイルサイズが小さい方が良いです。

「Browsersync（ブラウザシンク）」

ブラウザシンクとは、ファイル変更を監視し、自動でブラウザリロードを行ってくれるツールです。
ファイルを編集する度に、ブラウザをすべて手動でリロードしたりする手間を省くことができます。

「ベンダープレフィックスの自動付与」

ベンダープレフィックスとは、いろんなブラウザでCSSを正しく適用するための識別子です。
ブラウザによっては、ベンダープレフィックスをつけてないときちんと表示されない場合があります。

ベンダープレフィックスは、webkit（chrome、safari）、moz（firefox）、ms（IE）、o（opera）です。

そんなベンダープレフィックスをいちいちブラウザに対応しているのか調べて、ベンダープレフィックスを正しく記述していくのは手間ですよね( ;´Д｀)

しかし、gulpを使えば、手間がかかる作業を省くことができます！

あらかじめ設定した内容で、必要なベンダープレフィックスが自動付与された状態でコンパイルされるので、ベンダープレフィックスが要否の確認が入りません。

まとめ

上にあげた使用例は、gulpができることの一部です。
他にもgulpを使って、様々な作業を自動化することができます。
また、gulpを使うことで人的ミスが少なくなり、作業時間の短縮にもつながります。

gulpを使用する際、黒い画面のターミナルを使ったりするので、抵抗がある方もいるかもしれませんが、デザイナーの私でも一応使えますし、わからない箇所は弊社の優秀なフロントメンバーに聞くと良いでしょう。

もし、デザイナーで新たな領域に挑戦したいと思う方、大歓迎です。

＼　Wizは一緒に活躍できる人を募集しています！　／

UIUXデザイナーの募集

WEBデザイナーの募集