読者です 読者をやめる 読者になる 読者になる

bata's log

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

GruntでSassのビルドとjsファイルの結合・圧縮を自動化

ツール Grunt

JSファイルの結合と圧縮を自動化したくて色々調べていたのですが、やはりGruntが一番便利だということで導入してみたました。
結論からいうと、もっと早く導入すればよかった。

Gruntの導入

導入部分は下記を参考に。

Windowsの場合
http://webdrawer.net/javascript/firstgrunt.html

Macの場合
http://catcher-in-the-tech.net/461/

Gruntfile.js を記述

module.exports = function(grunt) {

    grunt.initConfig({
                //Sassをビルド
        sass: {
            options: {
                style: 'compressed',//CSSのスタイル
                sourcemap: true,//ソースマップを書き出す
                noCache: true//キャッシュファイルを生成しない
            },
            styles: {
                src: 'scss/inc_sc.scss',//SCSSファイル
                dest: 'css/inc_sc.css'//CSSファイル
            }
        },

                //JSファイルを圧縮
        uglify: {
            js: {
                src: "js/import.js",//圧縮するファイル
                dest: "js/import.min.js"//圧縮したファイル
            }
        },

                //JSファイルを結合
        concat : {
            js : {
                src : [//結合するファイル
                'js/app.js',
                'js/app.namespace.js',
                'js/app.databind.js',
                'js/app.gallery.js'
                ],
                dest : 'js/import.js'//結合したファイル
            }
        },

                //監視対象のファイル
        watch: {
            sass: {
                files: ["scss/*.scss"],
                tasks: ['sass']//対象が変更されると実行されるタスク
            },
            js: {
                files: ["js/*.js"],
                tasks: ['concat','uglify']//対象が変更されると実行されるタスク
            }
        }

    });

        //使用するなプラグイン
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');

};

Gruntfile.jsの記述は前述のサイトCordGridを参考にしました。

実行(コマンド)

grunt watch

(Windowsの場合)
grunt.cmd watch

実行するとファイルの監視が始まります。
今回の場合はjsフォルダ、scssフォルダ内のファイルに変更があると、それぞれのタスクが実行されます。

おまけ

Gruntの実行にいちいちコマンドを打つのが面倒な場合は、下記の記事の要領でバッチファイルを作成して該当のフォルダに設置しておけば便利です。

Sassのビルドにバッチファイルを利用する - bata's log