bata's log

フロントエンド系のTipsとかメモ

GruntでCSSファイルを結合・圧縮する

いろんな理由でSassが使えない案件があった場合でも、機能毎にファイルを分割管理したいので書いてみた。

ググったけどCSSファイルの結合に関してはあまり該当する記事がなかったけど需要ないの?
まあ、JSファイルを結合する時と同じ要領なので誰もわざわざ書かないだけかもしれないので、一応メモとして残しておく。スニペットにもなるし。

module.exports = function(grunt) {

    grunt.initConfig({
        //結合
        concat : {
            css : {
                src : [
                'css/input01.css',
                'css/input02.css',
                'css/input03.css'
                ],
                dest : 'css/output.css'
            }
        },
        //圧縮
        uglify: {
            css: {
                src: "css/output.css",
                dest: "css/output.min.css"
            }
        },
        //監視
        watch: {
            css: {
                files: ["css/*.css"],
                tasks: ['concat']
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');

};