前回、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]と
最後に実行するタスクなのですが、これはwatchだけを指定します。
watchが実行され、watchの中で、[sass]と[cssmin]が動くためです。
では、実行します。
[c] grunt[/c]
これを実行するとファイルを監視し始めます。
何か、scssファイルに変更してみましょう。
自動でコンパイルが走ります。
まとめ
このようにgruntは最初はとっつきにくいですが、初めてみるとそれほど複雑ではありません。
ぜひ使ってみて下さい。
ではでは
