Grunt.jsの始め方 -cssmin,watch編-

前回、sassのコンパイルを行なってみたので、今回はcssminやwatchなどを使ってみたいと思います。

Grunt.jsの概要だったり、インストールが知りたい方は過去記事参考にしてください。

Grunt.jsの始め方 -Grunt.jsの概要編-
Grunt.jsの始め方 -インストール編-
Grunt.jsの始め方 -タスク編集とsass編-

Grunt.jsを使ってcssをminifyしてみる

前回のファイルを利用して、cssをminify化してみようと思います。

[c]
module.exports = function (grunt) {//最初に書く
grunt.loadNpmTasks(‘grunt-contrib’);//プラグインの読み込み
grunt.initConfig({//タスク登録

sass: {//プラグイン名
compile:{//タスク名
files:{
‘style/css/main.css’:’style/sass/main.scss’
},
//sassOption
// options:{
// style:’compressed’
// }
},
},

cssmin:{
min:{
files:{
‘style/css/main.min.css’:’style/css/main.css’
}
}
}

});
grunt.registerTask(‘default’, [ ‘sass’,’cssmin’]);
};
[/c]

基本的な書き方は同じです。
プラグインの名称を書き、ファイルを指定ます。
minファイルが出来上がるように書きました。
最後の実行するタスクにcssminを加えるのを忘れないでください。

コンパイルをしてみましょう。

[c]
grunt
[/c]

これでminifyしたcssのファイルが出来上がったと思います。

Grunt.jsを使って自動でコンパイルしてみる

手動でコンパイルをしていると非常にめんどくさいので、sassなどではwatchを使っている方もいらっしゃると思います。
同様にgruntでもファイルの更新状況を確認し、変更があった場合に自動で更新を行う、watchというプラグインがあります。

gruntfileを書いていこうと思います。

[c]
module.exports = function (grunt) {//最初に書く
grunt.loadNpmTasks(‘grunt-contrib’);//プラグインの読み込み
grunt.initConfig({//タスク登録
watch:{
sassmin:{
files: ‘style/sass/main.scss’,
tasks: [ ‘sass’,’cssmin’]
}
},
sass: {//プラグイン名
compile:{//タスク名
files:{
‘style/css/main.css’:’style/sass/main.scss’
},
//sassOption
// options:{
// style:’compressed’
// }
},
},
cssmin:{
min:{
files:{
‘style/css/main.min.css’:’style/css/main.css’
}
}
}

});
grunt.registerTask(‘default’, [ ‘watch’]);//タスクの実行
};
[/c]

watchもほとんど同じ書き方なのですが、変更を監視するファイルを「files」で指定します。
そのファイルに変更が合った際に行うタスクを登録します。
ここでは、[sass]と

[cssmin]を指定しました。
最後に実行するタスクなのですが、これはwatchだけを指定します。
watchが実行され、watchの中で、[sass]と[cssmin]が動くためです。

では、実行します。

[c]
grunt
[/c]

これを実行するとファイルを監視し始めます。
何か、scssファイルに変更してみましょう。

自動でコンパイルが走ります。

まとめ

このようにgruntは最初はとっつきにくいですが、初めてみるとそれほど複雑ではありません。
ぜひ使ってみて下さい。

ではでは

Web Developer & Web Designer at Yahoo! Japan. Like HTML, css, JavaScript, Apple, ra-men, Angular, b-monster.
Scroll to top