ティーエスフォートブログ

gulp.jsを使ってWEB制作を高速化させよう

こんにちは、デザイナーの橋本です。
今回から2回に渡って「gulp」について書いていこうと思います。まずは「gulp」とはなんぞや?ということから書いていきます。

 
gulp

 

gulpって何?

gulpとはNode.jsをベースとしたビルドシステムヘルパーです。
WEB制作において、通常は手作業で行うと大変な工程を自動化し楽をするためのものだと思って下さい。

例えば

  1. sassをcssに自動コンパイルする
  2. コンパイルしたcssを最小化し、ベンダープレフィックスを自動で追加する
  3. javascriptを最小化し、生成する
  4. coffeeをjavascriptに自動コンパイルする
  5. スタイルガイドを自動生成し、保守性を高める
  6. HTMLやjsの文法をチェック
  7. LiveReloadでブラウザの更新を行わず確認できる

等々のメリットがあります。
上記で紹介した機能はほんの一部で、「Grunt」と比較すればプラグイン数はすくないですが、それでも手に余るほどのプラグインが用意されています。

 

gulpを使うメリット

gulpを使うメリットは非常に多いです。
単に作業の高速化だけではなく、記述者の癖を消し、統一されたルールのもと作業できます。
また、gulpfile.jsの記述は明快でpipeを繋いでいくだけでそれなりに高速化できます。

今やWEBデザイナーに必須なsassやcoffeeなど、コンパイルを行わなければならないものもgulpのようなビルドシステムヘルパーを使うことで手間にならず扱うことができます。

 

今回はここまで

では、次回からインストールから説明していこうと思います。
興味がある人は「gulp」について調べてみてはいかがでしょうか?

gulp.js 公式サイト
http://gulpjs.com/

投稿日:2016.03.15
ページ先頭へ