GruntでjavaScriptファイルを結合してミニファイする。
Gruntは、フロントエンドの作業を自動化するためのタスクランナーのこと。
Gruntのコマンド群をインストールするために、grunt-cliをインストール
npm install -g grunt-cli
package.jsonの作成
npm init
Grunt本体のインストール
npm install --save-dev grunt
何もしないGruntfile.js
module.exports = function (grunt) { grunt.initConfig({}); grunt.registerTask('default', []); }
UglifyJSでJavaScriptのミニファイ
npm install --save-dev grunt-contrib-uglify
以下の2つのJSファイルを結合して圧縮。
test1.js
var hello = function(user) { console.log("hoge:" + user.name); }
test2.js
(function() { var user = { "name" : "takashi"}; hello(user); })();
Gruntfile.js
module.exports = function (grunt) { grunt.initConfig({ uglify: { dist: { files: { 'dest/output.min.js' : [ 'src/test1.js', 'src/test2.js' ] } } } }); //プラグインからタスクを読み込む grunt.loadNpmTasks('grunt-contrib-uglify'); //defaultのタスクとして、上で定義したuglifyをセットする grunt.registerTask('default', ['uglify']); }
実行すると、output.min.jsが出力される。
node output.min.js hoge:takashi
- 作者: 藤本壱
- 出版社/メーカー: 藤本 壱
- 発売日: 2013/05/30
- メディア: Kindle版
- この商品を含むブログを見る