作業効率UP タスクランナーGulp

suckamon Web

gulp.jpg

フロントエンド開発において、もはや必須となってしまった開発環境Gulp。
今更ながらGulpの魅力について書き留めておきます。

Gulpでできること

プラグインを追加し、タスクを登録していくことで、様々な処理を同時並行で自動化することができます。
僕がコーディングの際によく使うのは主に4つ
1. Sassのコンパイル
2. CSS3ベンダープレフィックスの自動挿入
3. 画像の圧縮
4. BrowserSyncによるライブリロード

中でも4のライブリロードは重宝してます。
その他、HTML、CSS、JSの圧縮など何でもできちゃいます。
ではまずGulpを動かすための環境構築から解説していきます。

Gulp環境構築

GulpはNode.jsのインストールが前提となるので、公式サイトからインストールしましょう。
インストールが完了したらターミナル（コマンドプロンプト）でバージョン確認。

node -v

Node.jsをインストールするとnpm(Node Package Manager)も同時にインストールされます。
npmも同時にバージョン確認しておきましょう。

npm -v

設定ファイル作成

続いて、プロジェクトのディレクトリへ「cd」コマンドで移動し、以下のコマンドを実行します。

npm init

すると色々質問されるので、とりあえず全てEnterでOK。（ここで問われた値は後から変更できます）
これでディレクトリに設定ファイルpackage.jsonが作成されます。

Gulpのインストール

まずはグローバルインストール。

npm install gulp -g

続いてローカルインストール。

npm install gulp --save-dev

「–save-dev」を付けることでローカルにインストールする際にpackage.jsonにインストールしたパッケージが記載されるので、他のプロジェクトでpackage.jsonを使い回すことで共通の開発環境を一括して構築することができます。
package.jsonに記載されたパッケージを一括インストールするコマンドは以下のとおり

npm install

おすすめプラグインのインストール

Gulpをインストールしただけでは何もできないので、僕のよく使うおすすめプラグインをインストールしていきます。
【ローカルサーバーを立ててライブリロード】 

npm browser-sync --save-dev

【CSS3のベンタープレフィックス自動付与】 

npm gulp-autoprefixer --save-dev

【Sassのコンパイル】 

npm gulp-sass --save-dev

【jsファイルの自動圧縮】 

npm gulp-uglify --save-dev

【CSS3のベンタープレフィックス自動付与】 

npm gulp-autoprefixer --save-dev

【画像の自動圧縮】 

npm gulp-imagemin --save-dev

【とりあえず入れとけ】 

npm gulp-plumber --save-dev

gulpfile.jsの作成

プロジェクトのルートディレクトリ（package.jsonと同じディレクトリ）にgulpfile.jsを作成し、タスクを記述していきます。
サンプルで僕の使っているgulpfile.jsを掲載しておきます。
上記で紹介したプラグインをインストールしていれば動くはずです。

var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var uglify = require("gulp-uglify");
var browser = require("browser-sync");
var plumber = require("gulp-plumber");
var imagemin = require("gulp-imagemin");
gulp.task("server", function(){
browser({
notify: false
server: {
baseDir: "./"
}
});
});
gulp.task("html", function(){
gulp.src("**/*.html")
.pipe(plumber())
.pipe(browser.reload({stream:true}));
});
gulp.task("sass", function(){
gulp.src("sass/**/*.scss")
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest("./css"))
.pipe(browser.reload({stream:true}));
});
gulp.task("sass_watch", function(){
gulp.watch("sass/**/*.scss",["sass"]);
});
gulp.task("js", function(){
gulp.src(["js/**/*.js", "!js/min/**/*.js"])
.pipe(plumber())
.pipe(uglify())
.pipe(gulp.dest("./js/min"))
.pipe(browser.reload({stream:true}));
});
gulp.task("img", function(){
gulp.src("img/*(*.jpg|*.png|*.gif)")
.pipe(imagemin())
.pipe(gulp.dest("./img/min"));
});
gulp.task("default", ['server'], function(){
gulp.watch(["js/**/*.js","!js/min/**/*.js"],["js"]);
gulp.watch("sass/**/*.scss",["sass"]);
gulp.watch("img/*(*.jpg|*.png|*.gif)",["img"]);
gulp.watch("**/*.html", ["html"]);
});

Gulpを使ってみよう

ここまで設定が面倒くさいですが、一度package.json、gulpfile.jsを作ってしまえば、どんなプロジェクトでも使いまわしがきくので頑張って下さい。
他のプロジェクトで使う場合は、使いまわし用のpackage.jsonをディレクトリに置いて「npm install」とコマンド叩くだけ。
先ほど色々インストールしたプラグインを一括でインストールしてくれます。
あとは、これも使いまわし用のgulpfile.jsをディレクトリに置くだけ。
簡単ですね。

gulpfile.jsの中身についてはここでは触れませんが、ソースを見ればなんとなくわかるはず。
とりあえずコマンドで「gulp」と叩いてください。
すると自動でローカルサーバーが立ち上がりブラウザが開くはずです。
この状態でHTMLを編集して保存すると自動でブラウザに反映されます。

SCSSファイルを編集する場合は「/sass/」ディレクトリ内にファイルを置いて編集します。
保存すると同時に自動で「/css/」ディレクトリ内にコンパイルされたCSSファイルが吐き出され、これも自動でブラウザに反映されます。

また、jsも同様「/js/」ディレクトリ内にファイルを置き、編集・保存。すると「/js/min/」に圧縮されたjsファイルが自動で吐き出され、やはり自動でブラウザに反映されます。

画像は「/img/」内にファイルを保存するだけで、圧縮されたファイルが「/img/min/」内に保存されます。
感動ですね。
これで作業効率が5倍くらい上がったような気がします。
次は作業効率10倍にアップするテキストエディタとプラグインを紹介していきます。
お楽しみに！


gulp.jpg