※ウインドウズでやってます
よくわからない説明多すぎる。
タスクランナーです。
日本語をしゃべってほしい。
##ざっくりいうと、制作の補助をしてくれるみたい。
例えば
・cssファイルを複数作ったのをひとつにファイルにまとめてくれる。
・jsファイルを圧縮してくれる
cssファイルまとめるのは
header.css
main.css
footer.css
で作って、min.cssっていうのにまとめてくれる機能がある。みたいな感じ。もちろんhtmlからの参照はmmin.cssだけで、header.cssとかはサーバーとかにもあげない。
##とりあえず、インストール
node jsは最新を入れるとこから始める。
※古いリファレンスで、古いバージョンをインストールして動かなかった
node.jsをインストールしたらgruntのインストール
npm i -g grunt-cli
npm i -S grunt
これでインストールできる。
npm --version
でgrunt-cli、gruntの2つのバージョンを確認できればインストールできてる。
##ここから下は各プロジェクト毎で行う
ワークスペースを作ったら（フォルダでも/htdocsみたいな）
npm install -g grunt-cli
で、そのフォルダの中でgrunt動きますよーって設定ができる。項目は適当でどうでもよければエンターでスキップ。名前とかいろいろ。
package.jsonってファイルが出来ているのだけど、ここに記述が追加されてるだけ。あんまり説明もしなくてもいいかな。今回は。
Gruntfile.jsを自分で用意します。新規ファイルを作って配置します。下記を一応コピペしておいても大丈夫です。
module.exports = function(grunt) {
grunt.initConfig({
});
};
ここまででgruntを使う準備が出来ました。
##各プロジェクト毎で異なるプラグインを入れたりする。
grunt-contrib-watch
ファイルを監視してgruntを実行してくれる（ファイルの変更の毎とかでできる）
npm install grunt-contrib-watch --save-dev
を実行するとインストールされる。
次に今回はcssをまとめる、プラグインをいれる
grunt-contrib-cssmin
cssをまとめるプラグイン
npm install grunt-contrib-cssmin --save-dev
で使うものをGruntfile.js内に記述する
module.exports = function(grunt) {
grunt.initConfig({
cssmin: {//cssフォルダ内の.cssを結合してstyleフォルダの中のmin.cssに変換
compress: {
files: {
'./style/min.css': ['css/*.css']
}
}
},
watch: {//cssのフォルダ内の.cssを変更するとcssminを実行
files: ['css/*.css'],
tasks: ['cssmin']
}
});
//プラグインを使う宣言（他言語でいうところのimportみたいな）
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
//grunt実行の時に、利用するプラグイン名を毎回いれなくちゃいけないのだけど
//その作業を割愛してくれる。
grunt.registerTask('default', ['cssmin', 'watch']);
};
##これで準備は完成しました
ワークスペース内でコマンドプロンプトで
grunt
を実行すると、動き出すので、そのままウインドウを閉じないで
css/test1.css
css/test2.css
みたいなのを作ると、
style/min.css
が出来ます。（Gruntfile.js内を参照）
で作業終えたら、コマンドの画面で
ctrl+C
でやめる？って聞かれるのでYで終了
##この後何をすればいいの
何ができるの？っていうのは下記がよくまとまっていました。
Webサイト制作に便利なGruntプラグイン1
Webサイト制作に便利なGruntプラグイン2
今後のフローとしては、
自分の毎回使うプラグインが決まったら、Gruntfile.jsもほぼ固定で、プラグインのインストールもコピーの貼り付けで環境を作るのかな。という印象でした。