みなさんはタスクランナーを使用していますか? タスクランナーとは開発作業を自動化するためのツールで、2013年頃からWebのフロントエンド開発のトレンドとなっています。開発の現場では主にオープンソースのGrunt(グラント)とGulp(ガルプ)がよく使われています。本記事ではGruntとGulpの両方の導入方法とWeb制作でよく使用するプラグインの使い方を紹介します。GruntとGulpは既にインストールしているとして紹介していきます(最後のページで付録としてインストール方法を解説しています)。

※GruntとGulpの違いを知りたい方は記事「5分で導入! タスクランナーGulpでWeb制作を効率化しよう」を参考ください。

ファイルの複製

作業用のフォルダーからリリース用のフォルダーへファイルをコピーしたい時などに複製するタスクを登録しておくと便利です。

例としてsrcフォルダーに配置されたファイルをdistフォルダーに複製するというタスクを作成します。

タスクランナーでのコピーの方法

Grunt

ファイルの複製には「grunt-contrib-copy」というプラグインを使用します。

プラグインのインストール
npm install grunt-contrib-copy --save-dev
記述例(gruntfile.js)
module.exports = function (grunt) {
  grunt.initConfig({
    copy: {
      main: {
        // コピー元フォルダーの指定
        src: "src/*",
        // コピー先フォルダーの指定
        dest: "dist/"
      }
    }
  });
  grunt.loadNpmTasks("grunt-contrib-copy");

  grunt.registerTask("default", ["copy"]);
}

Gulp

Gulpの場合ファイルの複製にプラグインの追加は不要です。

記述例(gulpfile.js)
var gulp = require("gulp");

gulp.task("copy", function () {
  // コピー元フォルダーの指定
  gulp.src("src/*")
      // コピー先フォルダーの指定
      .pipe(gulp.dest("dist/src"));
});

gulp.task("default", ["copy"]);

ファイルの削除

一時的で最終的には不要なファイルやフォルダーの削除などが必要になることがあります。そういった場合はファイルの削除タスクを登録すると便利です。

例としてdir1フォルダーに配置しているabc.txtの削除とdir2以下のabc/codeと名前がつくファイルを削除します。dir2フォルダーのabc.jsは削除対象から外すというタスクを作成します。

タスクランナーでのファイルの削除の方法

Grunt

Gruntの場合、ファイルの削除には「grunt-contrib-clean」を使用します。

プラグインのインストール
npm install grunt-contrib-clean --save-dev
記述例(gruntfile.js)
module.exports = function (grunt) {
  grunt.initConfig({
    clean: {
      build: [
        // 削除するファイルの指定
        "dir1/abc.txt",
        "dir2/abc.*",
        // パス名の前に「!」使用することで否定の意味をもたせます。
        // ここでは削除をしないという意味になります。
        "!dir2/abc.js"
      ]
    }
  });

  grunt.loadNpmTasks("grunt-contrib-clean");
  grunt.registerTask("default", ["clean"]);
}

Gulp

Gulpの場合ファイルの削除には、「del」というプラグインを使用します。

プラグインのインストール
npm install del --save-dev
記述例(gulpfile.js)
var gulp = require("gulp");
var del = require("del");

gulp.task("clean", function () {
  del([
    // 削除するファイルの指定
    "dir1/abc.txt",
    "dir2/abc.*",
    // パス名の前に「!」使用することで否定の意味をもたせます。
    // ここでは削除をしないという意味になります。
    "!dir2/abc.js"
  ]);
});

gulp.task("default", ["clean"]);

ファイルの移動

さまざまなタスクを組み合わせた結果、中間ファイルを作成後にリリースファイルへ移動したいときがあります。ここではその場合のタスクについて紹介します。

例として、cache.txtdist/hello.mdへ移動させてみます。

タスクランナーでのファイルの移動

Grunt

Gruntでのファイルの移動には「grunt-contrib-rename」を使用します。移動先のフォルダーが作成されていない場合はエラーが発生してしまうため注意してください。

プラグインのインストール
npm install grunt-contrib-rename --save-dev
記述例(gruntfile.js)
module.exports = function (grunt) {
  grunt.initConfig({
    rename: {
      main: {
        files: [
          {
            src: ["cache.txt"],
            dest: "dist/hello.md"
          }
        ]
      }
    }
  });

  grunt.loadNpmTasks("grunt-contrib-rename");
  grunt.registerTask("default", ["rename"]);
}

Gulp

Gulpでファイル名を変更して出力する場合は「gulp-rename」を使用します。このプラグインを使用しても元ファイルは削除されず残るため、必要があれば前述で紹介した「del」プラグインを使用して元ファイルの削除を行います。

プラグインのインストール
npm install gulp-rename del --save-dev
記述例(gulpfile.js)
var gulp = require("gulp");
var rename = require("gulp-rename");
var del = require("del");

// ファイルの移動
gulp.task("move", function () {
  // 対象のファイルを指定
  return gulp.src("cache.txt")
      // ファイル名を変更
      .pipe(rename("hello.md"))
      // 出力先を指定
      .pipe(gulp.dest("dist"));
});

// 元のファイルを削除
gulp.task("clean", function () {
  del(["cache.txt"]);
});

gulp.task("default", ["move", "clean"]);

ファイルの結合

複数のファイル結合することで、ページ読み込み時のファイルのリクエスト数を減らすことができるため、時間短縮に効果的です。

例としてcssフォルダーに配置しているabc.css def.css ghi.cssファイル結合し、dist/css/style.cssとして書き出します。

タスクランナーでのファイルの結合

Grunt

Gruntでのファイルの結合には「grunt-contrib-concat」を使用します。

プラグインのインストール
npm install grunt-contrib-concat --save-dev
記述例(gruntfile.js)
module.exports = function (grunt) {
  grunt.initConfig({
    concat: {
      // 結合場所に使う文字列を指定
      options: {
        separator: "\n"
      },
      dist: {
        // 結合するファイルを指定
        src: [
          "css/abc.css",
          "css/def.css",
          "css/ghi.css"],
        // 結合先を指定
        dest: "dist/css/style.css"
      }
    }
  });

  grunt.loadNpmTasks("grunt-contrib-concat");
  grunt.registerTask("default", ["concat"]);
};

Gulp

Gulpでのファイルの結合には「gulp-concat」を使用します。

プラグインのインストール
npm install gulp-concat --save-dev
記述例(gulpfile.js)
var gulp = require("gulp");
var concat = require("gulp-concat");

// ファイル結合タスクを作成
gulp.task("concat", function () {
  // 結合元のファイルを指定
  return gulp.src([
        "css/abc.css",
        "css/def.css",
        "css/ghi.css"])
      // 結合後のファイル名を指定
      .pipe(concat("style.css"))
      // 出力フォルダを指定
      .pipe(gulp.dest("./dist/css/"));
});

gulp.task("default", ["concat"]);

ファイルの監視

ファイルを監視して、あるファイルに変更があったときに自動でタスクを実行するといった動作が可能です。コンパイルが必要なタスクを登録することでバックグラウンドで自動でコンパイルが終わっているといった自動処理ができます。

例として、jsフォルダー内のJSファイルが変更されたら、「console.log("file changed");」を呼び出すタスクを作成します。

Grunt

Gruntの場合、ファイルの監視をするときに「grunt-contrib-watch」プラグインを使用します。

プラグインのインストール
npm install grunt-contrib-watch --save-dev
記述例(gruntfile.js)
module.exports = function (grunt) {
  grunt.initConfig({
    watch: {
      scripts: {
        // 監視するファイルのパス
        files: ["js/**/*.js"],
        // ファイルに変更があった場合に実行されるタスク
        tasks: ["filechanged"]
      }
    }
  });

  grunt.loadNpmTasks("grunt-contrib-watch");
  
  grunt.registerTask("filechanged", function () {
    console.log("file changed");
  });
  grunt.registerTask("default", ["watch"]);
};

Gulp

Gulpの場合、ファイルの監視をするときにwatch()関数を使用します。

記述例(gulpfile.js)
var gulp = require("gulp");

gulp.task("watch", function () {
  // 監視するファイルのパス
  gulp.watch("js/**/*.js", function (event) {
    // ファイルの変更後実行したい処理
    console.log("file changed");
  });
});

gulp.task("default", ["watch"]);

GruntでもGulpでも共通ですが、監視を開始するとその時点からコマンドラインの通常のキー入力受付が行われなくなります。監視を停止するには[Ctrl]+[C]とキー入力を行う必要があります。監視を継続したまま別のコマンドを入力する場合は新しくコマンドラインのウィンドウを開く必要があります。

JavaScriptファイルのminify

JavaScriptファイルの容量を小さくするために改行やインデントを除去する作業を「minify」(ミニファイ)といいます。JSライブラリで●●●.min.jsというファイル名でminifyが適用されたJSファイルが提供されていることがありますが、ページ読み込み時の時間短縮にminifyは効果的です。minifyはタスクランナーに登録することができます。

タスクランナーでのminify

Grunt

JavaScriptファイルの圧縮や整形などには「grunt-contrib-uglify」を使用します。

プラグインのインストール
npm install grunt-contrib-uglify --save-dev
記述例(gruntfile.js)
module.exports = function (grunt) {
  grunt.initConfig({
    uglify: {
      target: {
        files: {
          // 書き出されるファイル名, 圧縮するファイル名
          "dist/hello.js": ["src/hello.js"],
          "dist/goodby.js": ["src/goodby.js"]
        }
      }
    }
  });
  grunt.loadNpmTasks("grunt-contrib-uglify");
  grunt.registerTask("default", ["uglify"]);
};

Gulp

GulpのJavaScriptファイルの圧縮や整形などには「gulp-uglify」を使用します。

プラグインのインストール
npm install gulp-uglify --save-dev
記述例(gulpfile.js)
var gulp = require("gulp");
var uglify = require("gulp-uglify");

gulp.task("compress", function () {
  // 圧縮元ファイル名
  gulp.src(["src/hello.js", "src/goodby.js"])
      // JavaScriptファイルの圧縮
      .pipe(uglify())
      // 圧縮後の書き出し先
      .pipe(gulp.dest("dist"));
});

gulp.task("default", ["compress"]);

次のページでは、画像ファイルの最適化や、TypeScriptのコンパイル、Sassのコンパイルについて紹介します。