東京都府中市、渋谷区のWEB制作会社Maromaroのブログです

2019.08.19

Sasaki

タスク自動化ツールgulpを使って作業を捗らせる

今回はタスク自動化ツールgulpについてです。
頻繁に耳にしていたのですが、使ってみようと思って手をつけられていませんでした。(汗

この度、クライアントワークで活用する場面が出てきたため、調べてみました!

gulpとは

gulpNode.js上で動作するタスク自動化ツールです。

・・・・・

正直これだけ聞いても何が便利わからないし、何ができるのかわからない!

具体的には下記のようなことができます。

実際になにができるのか

下記一例です。
豊富なプラグインを利用して様々なことができます。

  • cssファイルが更新されたらminify化されたcssを生成
  • css利用時、自動でベンダープレフィックスなどを付与する
  • cssで利用している画像をbase64形式に変換
  • scssが更新されたらcssを生成
  • javascriptファイルの圧縮 
  • 使われていないCSSを削除
  • htmlの圧縮
  • 画像ファイルの圧縮
  • サイトマップXMLの生成
  • ファイルの変更監視
  • ftp/sftpサーバにファイルをアップロード
  • ファイルやフォルダをzip圧縮
  • ファイルが更新されたらブラウザを更新する。

上記のような事が可能です。

gulpを使うには?

gulpを利用するには、Node.jsのインストールとgulpのインストールが必要です。

インストール方法については色々記事がありますので、検索してみてください!
npm から gulp インストールまでの手順

基本的にはどのOSでも実行可能なようです。

作業マシンにインストールしてタスクを自動化したり、サーバマシンにインストールしてタスクを自動化することも可能です。

自分の想定する利用用途

クライアントサイドを楽にするというよりは、サーバーサイドにインストールして利用するのが良いのかな?と思います。

サーバ側で特定フォルダのファイル変更などを監視し、例えばscssをアップすると・・・
自動コンパイルしてcssを生成 -> クロスブラウザに対応するためにプレフィックスを付与 -> minifyする・・・など
または、同様に画像ファイルのアップなどを監視し、画像を自動圧縮するなど・・・
サーバー側で自動的に動作するのが望ましいのではないかなーと思っています。

以上佐々木でした!