動作確認付！初心者向けgulp入門

[PR]

フロントエンドコーディングする上でとても便利な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-cli

ERR!と出るようであれば、管理者としてインストールします。
「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 gulp

ERR!と出るようであれば、管理者としてインストールします。
「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-sass

CSSベンダープレフィックス – gulp-autoprefixer

npm install --save-dev gulp-autoprefixer

JavaScript圧縮 – gulp-uglify

npm install --save-dev gulp-uglify

LiveReload – browser-sync

npm install --save-dev browser-sync

エラー時スキップ – gulp-plumber

npm install --save-dev gulp-plumber

gulpfile.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 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環境が構築できるので、チームでの開発環境構築にも一役買ってくれる優れものです。

[PR]

コメント