GruntでCSS圧縮を行う

goto_jp 137views 更新:2014年12月11日

Gruntはすでに利用できることを前提とします。

ターミナルでプロジェクトのディレクトリを開き、GruntのCSS圧縮を行うプラグインをインストールする。

npm install grunt-contrib-cssmin --save-dev
npm install grunt-contrib-cssmin --save-dev

//もしくは下記でgrunt-contribパッケージを全部インストールしてもOK。量が多いので推奨はしません。
//npm install grunt-contrib --save-dev

次にGruntfile.jsに圧縮する指示を加えます。

module.exports = function (grunt) {
    ~
    grunt.initConfig({
        ~
        //cssminタスクを追加
        cssmin: {
            compress: {
                files: {
                    'css/aui-min.css': ['css/aui.css']
                }
            }
        },
        ~
    });

    ~
    //プラグインを読み込む
    grunt.loadNpmTasks('grunt-contrib-compress');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    ~

};

タスク内の「files」では、圧縮後のCSSファイルと圧縮元のCSSファイルを指定します。
どうにもワイルドカード指定ができず、特定のファイル名しか指定できないようです。

watchタスクにcssminを加えるか、ターミナルから npm cssmin で実行できます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません