タスクランナー「Gulp」で出来ること(+インストール手順)

ランナー

「Gulp」をご存じでしょうか?システム開発が便利になるので、まだ使っていない方は利用してみるのがオススメ。Gulpの特徴やインストール方法をまとめました。

Gulpとは?

Gulpは、タスクを自動化してくれるツールです。

Gulp

http://gulpjs.com/

CSSやJavaScriptを圧縮したり、SASSやLESSをコンパイルしたり、ブラウザの再読込を自動で行ったり。Web系を中心に便利に開発を進められることができますね。タスクランナーとしてはGruntなんかも有名なんですが、いまではGulpが主流です。

Gulpをインストールする

それではGulpをインストールしていきましょう。Macでのインストールを前提に進めていきますね。

Node.jsをインストールする

Gulpを動かすには、Node.jsが必要です。まずはNode.jsをインストールしましょう。MacでHomebrewを使っている場合は、下記のコマンドでNode.jsがインストールできます。


$ brew install node

下記のコマンドで、Node.jsのバージョンが確認できます。インストールが正常に完了しているか、チェックしておきましょう。


$ node -v

gulp.jsをインストールする

それではGulpのインストールに入ります。下記のコマンドで、gulp.jsのインストールを行ってください。


$ npm install -g gulp

package.jsonを作成する

次は、プロジェクトフォルダの準備です。ファイル一式が保存されているフォルダにcdコマンドで移動したのち、下記のコマンドを実行してください。


$ npm init

プロジェクトフォルダにpackage.jsonが作成されます。

gulpfile.jsを作成する

package.jsonと同じディレクトリに、gulpfile.jsを作成します。下記の1行をgulpfile.jsに記述してください。


var gulp = require("gulp");

これでGulpを使う準備が整いました。Gulpは個々の処理を実行するためのプラグインをインストールすることで、各機能が使えるようになります。

あとがき

導入は少し大変でしたが、一度使いはじめると便利で離れられなくなりますよ。プラグインごとの設定が必要な場合も多いのですが、ネットなどでたくさん情報が見つかります。ぜひ活用してみてください。

中西洋平

中西洋平Web屋さん兼IT記事ライター

投稿者プロフィール

ピンとくるウェブサービスやガジェットを探すのが趣味です。どうぞよろしく。

この著者の最新の記事

関連記事

Follow me on

Facebookの投稿

弊社を手伝ってくれている Yuya Sato に、
オフィス制作時の360度タイムラプス撮影したものを編集してアップしてもらいました!

何にもないところからオフィスができていくのが面白いです!!!
www.youtube.com/watch?v=YFRvF_qot3o
... See MoreSee Less

View on Facebook

2016年7月、オフィス移転しまして、オフィスを手作りしました! ... See MoreSee Less

View on Facebook

Luxyでは毎月1回、Luxyメンバーで大江戸温泉ミーティンをすることになりました!
今回は第一回目のミーティング。

みんなでお風呂入って、飲んで笑って…たまにミーティングして(笑)
とても良い時間を過ごせました!
... See MoreSee Less

View on Facebook
ページ上部へ戻る