極悪サカモンのブログ〜Web制作・ブラジリアン柔術のブログです〜

フロントエンド開発において、もはや必須となってしまった開発環境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

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倍にアップするテキストエディタとプラグインを紹介していきます。
お楽しみに！

(さらに…)

先日の土曜日、柔術の練習終わりに野田駅前の「焼肉　だいちゃん」へ行ってきました。

元パンクラシストの藤原大地選手の経営するお店で、とにかく質がいい！
久しぶりに良質のタンパク質を摂取しました。

コブラ会の痛風bros.
フィリピン人のベルニーも痛風持ちのようです。
彼は膝にくるタイプのようで、顔をしかめながらカミングアウトしてくれました。

ビールの1兆倍プリン体が含まれている内臓をせっせせっせと口に運ぶベルニー。
後先考えないこの勇気は見習うべきでしょう。

コブラ会の仲良し4人組。
素晴らしい仲間に出会えて感謝です。

(さらに…)

Web Developer. BJJ Fighter

DUMAU関西2015 試合順

パラエストラ大阪　選手練2

パラエストラ大阪　選手練

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