git commit前にGruntでCSSとJSをminifyしてaddしてcommit
GoogleのPageSpeed Insightsとか使うと必ずJavaScript を縮小するとCSS を縮小するって怒られませんか?
僕はよく怒られます。
なのでGruntとかいう凄いツールを使って怒られないよう頑張って見ようと思います。
したいこと
・CSSとJSのminify(圧縮)して*.min.css / *.min.jsという名前でそれぞれ保存する
・git hooksを使ってcommit前にGruntを実行し、出来上がったファイルをaddする
Node.jsのインストール
Grunt cliのインストール
$ npm install -g grunt-cli
プロジェクトの設定
Gruntはプロジェクトごとにインストールする必要があります
$ cd project_directry
$ npm init
ターミナル上で色々質問されるので入力していくとpackage.jsonとGruntfile.jsが出来上がります。
Gruntのインストール
$ npm install grunt --save-dev
Gruntfileの設定
$ vim Gruntfile.js
Gruntfile.js
module.exports = function(grunt) { grunt.initConfig({ pkg : grunt.file.readJSON('package.json'), cssmin : { css1 : { src : 'public/assets/css/1.css', dest : 'public/assets/css/1.min.css' }, css2 : { src : 'public/assets/css/2.css', dest : 'public/assets/css/2.min.css' } }, uglify : { min : { files: { "public/assets/js/1.min.js" : ["public/assets/js/1.js"], "public/assets/js/2.min.js" : ["public/assets/js/2.js"] } } } }); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask("default", ["uglify", "cssmin"]); };
この設定で、1.cssは1.min.cssという名前で圧縮したものが保存されます。
同じ用にjsも1.jsが1.min.jsという名前で圧縮されてます。
cssはまとめることも出来てそのほうがリクエスト数も減るしいいのですが、ページごとに読み込ませるcssを変えてるので今回このようにしました。
Gruntの実行
$ grunt
これでGruntfile.jsに設定されている通りに圧縮などの作業が行われます。
git hooksを使い自動化
gitには特定のタイミングでシェルなどを実行出来る機能があります。
今回はcommit直前なのでpre-commitを使用します
$ cd .git/hooks/
$ vim pre-commit
pre-commit
#!/bin/sh
grunt
git add public/assets/js/*.min.js
git add public/assets/css/*.min.css
pre-commitファイルに実行権限を与えます
$ chmod 775 pre-commit
これでgit commitを実行するとgruntが実行されminファイルがaddされてからcommitされます。
このpre-commitとかにJSHintとか噛ませるのがナウいみたいですね。