Gruntの簡単な使い方

Pocket

Gruntの使い方

自動化ツール Gruntの使い方

前回の記事でGruntのインストールまでが完了したので、ここからは使い方をチェックしていきます。

プロジェクトファイルを用意

では早速使ってみます。まずはプロジェクトフォルダ(ここではgrunt-test)を用意し、ディレクトリへ移動します。

cd path/grunt-test

その後、npm initを実行してpackage.jsonを作成。

npm init

次にプロジェクトファイルにGruntをインストールします。公式ではnpm install grunt --save-devとなってますが、エラーが出たのでsudoをつけてます。

sudo npm install grunt --save-dev

package.jsonにgruntが追加されていればインストール完了。

"devDependencies": {
    "grunt": "^0.4.5"
  },

Gruntを使ってみる

ここでは試しにjsファイルを圧縮してみたいと思います。プロジェクトファイルに以下のようなファイルを用意します。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Grunt Test</title>
</head>
<body>
  <h1>Grunt Test</h1>
  <p id="text"></p>

  <script src="test.min.js"></script>
</body>
</html>

test.js

// add text content
var str = 'Grunt test ok';
var place = document.getElementById('text');

place.textContent = str;

この状態でindex.htmlをブラウザで表示しても、pタグの中身は表示されません。ここでGruntを使ってtest.min.jsを作ってみます。

Gruntにプラグインを追加する

まずはjavascriptファイルを圧縮するためのプラグインを追加します。

npm install grunt-contrib-uglify --save-dev

その後Gruntfile.jsを作成し、中身に以下のようなコードを記述。

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      build: {
        src: 'test.js',
        dest: 'test.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

ここまでで準備完了。次はターミナルからタスクを実行します。

grunt uglify

上手くいくと、test.jsが圧縮され、test.min.jsが作成されます。ブラウザでもきちんと読み込まれてるようになってます。
Grunt_Test

Grunt入門 まとめ

Gruntを初めて使ってみましたが、個人的には圧縮や、SASSのコンパイルなど用途が限られてるので、Codekitの方が手軽ですね。

Gruntはこういった作業の他にもたくさんタスクを設定できるので、日常的にjavascriptでコーディングする人には便利かな〜と感じます。