フロントエンドコーディングする上でとても便利なgulpの、導入から使い方までを簡単にご紹介します。
公式サイト – gulp.js
この記事の通りにgulpを導入すると以下を実現できます。
- Sassのコンパイル
- CSSへのベンダープレフィックス付与
- JavaScriptファイルの圧縮
- HTML/scss/jsのライブリロード
必要なもの
- node.js
- テキストエディタ
node.jsのインストール
node.jsをインストールしていなければ、こちらの記事を参考にインストールしてください。
特に理由がない限り、最新バージョンのインストールをおすすめします。
テキストエディタの準備
特に指定はないので、お好みのテキストエディタをご使用ください。
よろしければ、こちらの記事にてGitHub社製エディタ「ATOM」の導入をまとめていますので、使ってみてください。
gulpのインストール（グローバル）
公式サイトに従って、グローバルにgulpをインストールします。
Macであればターミナルを起動、Windowsであればコマンドプロンプトを起動します。
※以下「ターミナル」で統一します
npm install --global gulp-cliERR!と出るようであれば、管理者としてインストールします。
「sudo npm install –global gulp-cli」とタイプして実行します。
「gulp -v」とタイプして実行し、「CLI version X.X.X」と表示されたら問題ありません。
※「X」は数字
package.jsonの作成
どのバージョンのgulpなのか、どんなgulpプラグインを導入したのかなどを、package.jsonに記録することができます。
特にチームで同じ環境を構築するには必須なものとなります。
プロジェクトフォルダを作成し、ターミナルで作成した場所に移動します。
今回は /Users/ユーザーネーム/myproject というディレクトリを作りました。
cd /Users/ユーザーネーム/myproject次に以下コマンドを入力してpackage.jsonを生成します。
npm init途中で質問等出てきますが、特に必要なければ Yes (or Enter) で問題ありません。
後からテキストエディタにて編集可能です。
gulpのインストール（ローカル）
公式サイトに従って、ローカル（プロジェクトフォルダ）にgulpをインストールします。
npm install --save-dev gulpERR!と出るようであれば、管理者としてインストールします。
「sudo npm install –save-dev gulp」とタイプして実行します。
「gulp -v」とタイプして実行し、「Local version X.X.X」と表示されたら問題ありません。
※「X」は数字
gulp実行ファイルの作成
gulpを実行するためのjsファイルを作成します。
gulp自体の読み込みやプラグインの読み込み、その他実行処理などを記述する必要があります。
プラグインのインストール
gulp単体では何もできないと言っても過言ではありません。
便利なプラグインをインストールして活用することによって、真価を発揮します。
まずは各プラグインをインストールしていきます。
Sassコンパイル – gulp-sass
npm install --save-dev gulp-sassCSSベンダープレフィックス – gulp-autoprefixer
npm install --save-dev gulp-autoprefixerJavaScript圧縮 – gulp-uglify
npm install --save-dev gulp-uglifyLiveReload – browser-sync
npm install --save-dev browser-syncエラー時スキップ – gulp-plumber
npm install --save-dev gulp-plumbergulpfile.js
細かい説明を省いて恐縮ですが、以下ソースにてgulpfile.jsファイルを作成し、プロジェクトフォルダに配置します。
// gulpの読みこみ
var gulp = require("gulp");
// gulp-sassの読みこみ（Sassコンパイル）
var sass = require("gulp-sass");
// gulp-autoprefixerの読みこみ（CSSベンダープレフィックス）
var autoprefixer = require("gulp-autoprefixer");
// gulp-uglifyの読み込み（JavaScript圧縮）
var uglify = require("gulp-uglify");
// browser-syncの読み込み（LiveReload）
var browserSync = require("browser-sync");
// gulp-plumberの読み込み（エラー時スキップ）
var plumber = require("gulp-plumber");
// ローカルサーバー
gulp.task("server", function() {
browserSync({
server: {
baseDir: "./"
}
});
});
// ブラウザリロードタスク
gulp.task('bs-reload', function() {
browserSync.reload();
});
// Sassタスク
gulp.task("sass", function() {
gulp.src("sass/**/*.scss") // sassディレクトリ以下にあるすべてのscssが対象
.pipe(plumber()) // タイポなどエラー時スキップ
.pipe(sass()) // sassコンパイル
.pipe(autoprefixer()) // ベンダープレフィックス付与
.pipe(gulp.dest("./css")) // cssディレクトリにcssとして出力
.pipe(browserSync.reload({ // LiveReload
stream: true
}));
});
// JSタスク
gulp.task("js", function() {
gulp.src(["js/**/*.js", "!js/min/**/*.js"]) // jsディレクトリ以下（minディレクトリを除く）にあるすべてのjsが対象
.pipe(uglify()) // js圧縮
.pipe(gulp.dest("./js/min")) // js/minディレクトリに出力
.pipe(browserSync.reload({ // LiveReload
stream: true
}));
});
// defaultタスク with ローカルサーバー
gulp.task("default", ['server'], function() { // 「gulp」のみでgulpの実行とローカルサーバー立ち上げ
gulp.watch(["js/**/*.js", "!js/min/**/*.js"], ["js"]); // jsが編集保存されるとJSタスク実行
gulp.watch("sass/**/*.scss", ["sass"]); // scssが編集保存されるとSassタスク実行
gulp.watch(["*.html", "./**/*.html"], ['bs-reload']); // htmlが編集保存されるとブラウザリロード
});細かくコメントを記述しているので、何をやっているのかはご理解いただけるかと思います。
gulpは「.pipe()」で処理を簡単に付け足しできるのが良いですね。
gulpの実行
簡単な表示でgulpがきちんと動作するか確認しましょう。
テストデータの作成
index.htmlを作成して、プロジェクトフォルダに配置します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gulp入門</title>
<meta name="description" content="">
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Gulp入門</h1>
</body>
</html>style.scssを作成して、プロジェクトフォルダのsassディレクトリに配置します。
h1 {
color: red;
transition: 200ms ease-out transform;
&:hover {
color: blue;
transform: translate(10px,0);
}
}alert.jsを作成して、プロジェクトフォルダのjsディレクトリに配置します。
(function() {
window.addEventListener('load', function() {
alert('loaded');
});
})();最終的には各ファイルはこのような配置になっているかと思います。
myproject
└sass
│└style.scss
└package.json
└node_modules
│└foloders
└js
│└alert.js
└index.html
└gulpfile.js
Let’s gulp!
それでは、gulpを実行してみましょう。
gulp上記のコマンドを叩くだけで実行され、HTML/scss/jsの監視状態となっています。
scssを編集して保存すると、cssフォルダにcssが生成されることが確認できるかと思います。
HTML/jsも編集保存をして動きを確認してみましょう。
なお、監視状態は ctrl + c で解除することができます。
まとめ
敷居が高いと思っていたgulpですが、やってみると意外と簡単で拍子抜けでした。
そして、色々と自動化できてめちゃくちゃ便利です！
各プラグインの引数を設定すれば、例えばsassコンパイルだとcssの記述スタイルを変更できたりします。
他にもプラグインがたくさんありますので、組み合わせてさらなる効率化にチャレンジしたいと思います！
ちなみに package.json と gulpfile.js を共有すれば同一なgulp環境が構築できるので、チームでの開発環境構築にも一役買ってくれる優れものです。
コメント