Posted at

gruntを試す

More than 5 years have passed since last update.


grunt用意

gruntはいろいろなタスクを自動化出来る便利なものらしい。

いきなり難しいことはしないで、taskを実行出来るところまで、

やってみました。

今回はgrunt-contrib-cssminを使って、

分割されたcssファイルを一つのファイルにまとめて見ようと思います。

Plugins - Grunt: The JavaScript Task Runner

ここにプラグインの一覧があるので、眺めてみると面白いかもしれません。

test_gruntをgruntを使うprojectとして用いる。

$ npm install -g grunt-cli

$ mkdir test_grunt
$ cd test_grunt
$ npm init
$ npm install grunt --save-dev
$ touch Gruntfile.js
$ npm install grunt-contrib-cssmin --save-dev

Gruntの設定ファイル、Gruntfile.jsを編集する。


Gruntfile.js

module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
cssmin: {
combine: {
files: {
'build/css/merge.css': ['src/css/app.css', 'src/css/sub.css']
}
}
}
});

grunt.loadNpmTasks('grunt-contrib-cssmin');
// Default task(s).
grunt.registerTask('default', ['cssmin']);

};


上記で使うディレクトリーやファイルは、

あらかじめ作成しておかないとエラーが起きてしまった。

build/css/ src/css/ src/css/app.css src/css/sub.css

を作成して次のようなファイル構成にする。

.

├── Gruntfile.js
├── build
│   └── css
├── index.js
├── package.json
└── src
└── css
├── app.css
└── sub.css

ちなみに、app.cssとsub.cssは次のようなものです。


app.css

body{

background-color: red;
}


sub.css

h1{

background-color: white;
}

ここでgruntのタスクを実行する。

$ grunt cssmin

あるいは、default taskにcssminを指定してあるので、gruntだけでも実行できる。

$ grunt

実行するとbuild/css/merge.cssが作成される。


merge.css

body{background-color:red}h1{background-color:#fff}