gruntでminimizeするのに、更新したファイルだけしたい
今更gruntですいません。
これだけで十分早いので、満足しちゃってる私です。
今回、調べてもなかなか情報が出てこなかったり
長ったらしく書いてあって、解読するのがめんどくさくなったので
命令文はjsなんだから、jsで書いてしまえばいいじゃない。
ということで
grunt-watchで 更新されたファイルを監視して、
そのファイルを対象に、CSSとJSをminifyするっていう gruntファイルでございます。
条件。
minifyするファイルは、originalというディレクトリに入っていて
その上位階層に圧縮したファイルを置くだけ
というもの。
まずはGruntfile.jsから。
module.exports = function(grunt) { //グラントタスクの設定 grunt.initConfig({ cssmin:{ min:{ src:'', dest:'' } }, //watchの設定 watch: { options: { nospawn: true }, css: { files: ["webroot/css/original/*.css"], tasks :['cssmin'] }, js:{ files: ["webroot/js/original/*.js"], tasks :['uglify'] } }, uglify:{ jsmin:{ files:{} } } }); grunt.event.on('watch',function(action, filepath,target){ //変更のあったファイルのみ変換するようにここで設定内容を変換する if(target == "css"){ var cssConf = grunt.config(['cssmin']); var min_path = filepath.replace(/original\//g , "" ); cssConf['min']['src'] = filepath; cssConf['min']['dest'] = min_path; grunt.config(['cssmin'], cssConf); }else if(target == "js"){ var jsConf = grunt.config(['uglify']); var min_path = filepath.replace(/original\//g , "" ); jsConf['min']['files'] = {}; jsConf['min']['files'][min_path] = filepath; grunt.config(['uglify'], jsConf); // grunt.log.error(JSON.stringify(grunt.config.get(['uglify']))); } }); //プラグインの読み込み grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify'); //引数未指定時に実行するタスク名の指定。配列なので、複数指定可能 grunt.registerTask('default',['watch']); };
それぞれのプラグインについての設定については
ぐぐればすぐ出てくると思うので省略。
今回の注目点は、
grunt.event.on で watchを監視してるところ。
キックされたら、ここをまず通ります。
更新されたファイルがわかるので、
設定値に当てはめてあげて
キックされるようにするっていう感じ。
ここにたどり着くまでに、きょう半日ちょっとかかってしまったのです。
今まで YUIでやってたので、
こっちでやると、圧縮が若干違う。。。
ゆえに、ファイルが更新されたことになってしまって
gitで毎回checkoutするのがめんどくさいとか
ファイル数が多いから 前部圧縮を毎回走らせてるとめっちゃ時間かかるとか
そういう理由で頑張った。
他にも方法があるようであれば、知りたい。。。
なかなか奥が深いけど、解決するから楽しい(n*´ω`*n)