2014年9月6日土曜日

jsファイルの結合&圧縮を行う

前回からの続きです!
Gruntを使ってみる
今回は、Gruntを使ってjsファイルの結合&圧縮を行いたいと思います+(0゚・∀・) + ワクテカ +

前回gruntの作業ディレクトリとして作成した、
C:\node.js\gruntに新しくjsというフォルダを作っておきます。
その中に今回結合を行いたいjsファイルを配置して行きます。

まずは、結合対象のjsファイルを作成したいと思います。
C:\node.js\grunt\js\js01.jsを新規ファイルで作成して、jsのコードを適当に記述します。
$(function(){
 
    var boxW = $('.box').width();
    var boxH = $('.box').height();
  
});
C:\node.js\grunt\js\js02.jsを新規ファイルで作成して、jsのコードを適当に記述します。
$(function(){
 
    var boxIW = $('.box').innerWidth();
    var boxIH = $('.box').innerHeight();
 
});
次にC:\node.js\grunt\Gruntfile.jsを新規ファイルで作成して、Gruntの設定を記述します。

ファイルの結合にはgrunt-contrib-concatというプラグインを使う必要があります。

concatプラグインのsrcに結合するファイルを記述する。
concatのdestに結合後のファイル名を記述する。
※distは任意の名前で問題ない。

watchには監視して欲しいファイルと実行したいタスクを記述する。
module.exports = function(grunt) {
 
  grunt.initConfig({
 
    concat : {
      dist : {
        src : [
          'js/js01.js',
          'js/js02.js'
        ],
          dest : 'js/main.js'
        }
    },
    watch: {
      dev: {
        files: ["js/js*.js"],
        tasks: ['concat']
      }
    }
 
  });
 
  //使うプラグインの読み込み
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
 
};
この状態でコマンドプロンプトにgrunt watchを入力して起動させ、
js01.js、またはjs02.jsを変更すると結合したmain.jsが作成されます。
C:\node.js\grunt>grunt watch
Running "watch" task
Waiting...
>> File "js\js01.js" changed.
Running "concat:dist" (concat) task
File js/main.js created.
念のため、main.jsの中身を確認する
$(function(){
 
    var boxW = $('.box').width();
    var boxH = $('.box').height();
  
});
$(function(){
 
    var boxIW = $('.box').innerWidth();
    var boxIH = $('.box').innerHeight();
 
});
今回の設定だと、監視対象のファイルを更新しないと結合ファイルが作成されないので、
起動時に生成するようにGruntfile.jsに起動時に実行させるタスクの行を追加します。
module.exports = function(grunt) {
 
  grunt.initConfig({
    //ファイルの結合
    concat : {
      dist : {
        src : [
          'js/js01.js',
          'js/js02.js'
        ],
          dest : 'js/main.js'
        }
    },
    //ファイルの監視
    watch: {
      dev: {
        files: ["js/js*.js"],
        tasks: ['concat']
      }
    }
 
  });
 
  //使うプラグインの読み込み
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');

  //Grunt起動時に実行させるタスク
  grunt.registerTask('default', ['concat', 'watch']); 

};

これで、Gruntが起動したタイミングでも結合が実行されるようになりました。
実行すると次のようになります。
C:\node.js\grunt>grunt
Running "concat:dist" (concat) task
File js/main.js created.

Done, without errors.
結合が出来たので、次はjsを圧縮をしたいと思います。
先ほどのjs01.jsとjs02.jsを結合して出来たmain.jsを圧縮して、main-min.jsを作成したいと思います。

jsの圧縮にはgrunt-contrib-uglifyプラグインを利用するため、
grunt-contrib-uglifyプラグインを読み込む必要があります。
module.exports = function(grunt) {
 
  grunt.initConfig({

    //ファイルの圧縮
    uglify: {
      dist: {
        src: "js/main.js",
         dest: "js/main-min.js"
      }
    },
    //ファイルの結合
    concat : {
      dist : {
        src : [
          'js/js01.js',
          'js/js02.js'
        ],
        dest : 'js/main.js'
      }
    },
    //ファイルの監視
    watch: {
      dev: {
        files: ["js/js*.js"],
        tasks: ['concat', 'uglify']
      }
    }
 
  });
 
  //使うプラグインの読み込み
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  //起動時に指定したタスクを実行する
  grunt.registerTask('default', ['concat', 'uglify', 'watch']);

};
実行してみると、次のような表示がされると思います。
C:\node.js\grunt>grunt
Running "concat:dist" (concat) task
File js/main.js created.

Running "uglify:dist" (uglify) task
File js/main-min.js created: 205 B → 114 B

Done, without errors.
main-min.jsの中身を確認してみると・・・圧縮(゚∀゚)キタコレ!!
$(function(){$(".box").width(),$(".box").height()}),$(function(){$(".box").innerWidth(),$(".box").innerHeight()});
これで、jsの結合・圧縮が無事に行えるようになりました( ´∀`)bグッ!
便利過ぎるワーイヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノワーイ

次回起動する時の注意として、
DOSKEY grunt=grunt.cmd $*
を実行しないと「grunt」では動いてくれないそうなので注意らしいです。
一回一回、上記のコマンドが面倒な場合はgrunt.cmdで実行するらしいヘー(´ν_.` )ソウナンダ

ファイルを結合、圧縮を複数やりたい場合には次のように記述します。
module.exports = function(grunt) {
 
  var pkg = grunt.file.readJSON('package.json');

  grunt.initConfig({

    //ファイルの圧縮
    uglify: {
      dist1: {
        src: "js/main1.js",
         dest: "js/main1-min.js"
      },
      dist2: {
        src: "js/main2.js",
         dest: "js/main2-min.js"
      }
    },
    //ファイルの結合
    concat : {
      dist1 : {
        src : [
          'js/js01.js',
          'js/js02.js'
        ],
        dest : 'js/main1.js'
      },
      dist2 : {
        src : [
          'js/js03.js',
          'js/js04.js'
        ],
        dest : 'js/main2.js'
      },
    },
    //ファイルの監視
    watch: {
      dev: {
        files: ["js/js*.js"],
        tasks: ['concat', 'uglify']
      }
    }
 
  });
 
  //使うプラグインの読み込み
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  //起動時に指定したタスクを実行する
  grunt.registerTask('default', ['concat', 'uglify', 'watch']);

};
実行結果。

C:\node.js\grunt>grunt
Running "concat:dist1" (concat) task
File js/main1.js created.

Running "concat:dist2" (concat) task
File js/main2.js created.

Running "uglify:dist1" (uglify) task
File js/main1-min.js created: 205 B → 114 B

Running "uglify:dist2" (uglify) task
File js/main2-min.js created: 205 B → 114 B

Done, without errors.

以上です(`・ω・´)ゞビシッ!!

参考URL

0 件のコメント:

コメントを投稿