Gruntを使ってみる

Gruntを使う機会があったので、導入方法をメモしておきます。

Gruntのインストール

Node.jsのインストールについては、以前にGulpの記事で紹介しているので省略します。
Gulp.jsの導入～Sassのコンパイルまで試してみた

Node.jsの準備完了後、Gruntをインストールします。
コマンド プロンプトを起動して、以下を入力。

npm install -g grunt-cli

Gruntのインストールが完了したら、以下を入力してみます。

grunt -version

Gruntのバージョンが表示されればOKです。
　

package.jsonの作成

作業ディレクトリに移動します。

cd 作業ディレクトリ

以下を入力してプロジェクトファイルを作成します。

npm init

色々聞かれるのでとりあえずEnterで飛ばします。
最後まで進むと作業ディレクトリにpackage.jsonがされます。
ファイルの中身は以下のようになっています。

{
  "name": "grunt_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Gruntを使用する

Gruntを作業ディレクトリにもインストールしておきます。

npm install grunt -save-dev

今回はGruntのgrunt-autoprefixerを使ってみます。
以下を入力してプラグインをインストールします。

npm install grunt-autoprefixer -save-dev

次にGruntfile.jsを作成して、grunt-autoprefixerを使えるようにします。

module.exports = function(grunt) {
	// プラグインの設定を記述
	grunt.initConfig({
		autoprefixer: {
			target: {
				expand: true,
				src: 'css/**/*.css',
				dest: 'dist'
			}
		}
	});
	// 使用するプラグインを指定
	grunt.loadNpmTasks('grunt-autoprefixer');
};

作業ディレクトリにcss/style.cssを作成して試してみます。

css\style.css

.test {
	display: flex;
	transform: translate(50px, 50px);
}

コマンド プロンプトで以下を入力して、autoprefixerを実行してみます。

grunt autoprefixer

作業ディレクトリに下記ファイルが作成されました。

dist\css\style.css

.test {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-transform: translate(50px, 50px);
	        transform: translate(50px, 50px);
}

【参考サイト】

• Web制作の作業を効率化するための自動化ツールGruntの導入方法とおすすめプラグインまとめ | 株式会社LIG
• GitHub – nDmitry/grunt-autoprefixer: Parse CSS and add vendor-prefixed CSS properties using the Can I Use database. Based on Autoprefixer.