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

Gruntプラグインのインストール

cssminとuglifyというプラグインをインストールします

$ npm install grunt-contrib-cssmin --save-dev
$ npm install grunt-contrib-uglify --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とか噛ませるのがナウいみたいですね。

という話

技術ブログにしたい