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

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

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

gulpとは

gulpはNode.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する・・・など
または、同様に画像ファイルのアップなどを監視し、画像を自動圧縮するなど・・・
サーバー側で自動的に動作するのが望ましいのではないかなーと思っています。

以上佐々木でした！