GruntでSassのビルドとjsファイルの結合・圧縮を自動化
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の実行にいちいちコマンドを打つのが面倒な場合は、下記の記事の要領でバッチファイルを作成して該当のフォルダに設置しておけば便利です。