grunt + bower + backbone + require

Posted: 2014-05-06 23:11 |  javascript 
未だにbackboneかangularか。どっちをメインで使っていくか決められていないんですけど、
gruntとbower使って突っ込むところを忘れそうなのでメモがてら。

gruntのインストールはよくブログ等で書かれていますが、
以前のバージョンなので注意です(現在は2014/05/06)

$ npm install -g grunt-cli
です。
インストールできたら次はpackage.json
{
    "name": "",
    "version": "0.0.0",
    "description": "",
    "main": "",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "license": "MIT",
    "devDependencies": {
        "grunt": "*",
        "grunt-bower-task": "*",
        "grunt-contrib-uglify": "*"
    }
}
bowerを使い、かつminifiedしたいのでそれぞれを指定
bower.jsonは下記のようにしました
{
    "name": "acme",
    "version": "0.0.1",
    "ignore": [],
    "dependencies": {
        "bootstrap": "3.*",
        "backbone": "1.1.2",
        "underscore": "1.6.0",
        "jquery": "*",
        "requirejs": "*",
        "bootstrap-markdown": "*"
    },
    "exportsOverride": {
        "bootstrap": {
            "js": "dist/js/bootstrap.min.js",
            "css": "dist/css/bootstrap.min.css"
        },
        "jquery": {
            "js": "dist/jquery.min.js"
        },
        "backbone": {
            "js": "backbone.js"
        },
        "underscore": {
            "js": "underscore.js"
        },
        "requirejs": {
            "js": "require.js"
        },
        "bootstrap-markdown": {
            "js": "js/bootstrap-markdown.js",
            "css": "css/bootstrap-markdown.min.css"
        }
    }
}
Gruntfile.jsは下記のように
module.exports = function (grunt) {
    'use strict';
    grunt.initConfig({
        pkg: grunt.file.readJSON("package.json"),
        bower: {
            install: {
                options: {
                    targetDir: 'public/packages',
                    layout: 'byType',
                    install: true,
                    verbose: false,
                    cleanTargetDir: true,
                    cleanBowerDir: true
                }
            }
        },
        uglify: {
            build: {
                files: {
                    'public/packages/js/backbone/backbone.js': ['public/packages/js/backbone/backbone.js'],
                    'public/packages/js/underscore/underscore.js': ['public/packages/js/underscore/underscore.js'],
                    'public/packages/js/requirejs/require.js': ['public/packages/js/requirejs/require.js'],
                    'public/packages/js/bootstrap-markdown/bootstrap-markdown.js': ['public/packages/js/bootstrap-markdown/bootstrap-markdown.js']
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-bower-task');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerTask('default', ['bower:install', 'uglify']);
};
バックエンドはLaravelを使っているので、
デフォルトのpublic下にそれぞれを入れて、それぞれのjsファイルをminに。
clearBowerDir: trueでbowerのディレクトリが削除されます。
uglify指定はもっといい方法がありまして、
これ自体はnode.js + underscore.jsなのでいつもの指定方法で指定できますが、
今回はベタ書きです。

require.jsは
AMDっていう非同期とか遅延でロードする機能をもっていまして、
ここに書いておけばいちいちjsファイルを手動でずらーーっと書かなくて済みます。
backboneだと規模が大きくなると結構増えてくるので便利です。
もちろんangularも組み合わせて使ったります。

scriptタグでrequire.js、data-mainで定義するjsを指定します。
Laravel bladeならこんな感じでしょうか
{{HTML::script('/packages/js/requirejs/require.js', ["data-main" => "/js/application.js"])}}
中身は以下のような
'use strict';
requirejs.config({
	//
	baseUrl: "js/application",
	paths: {
		"jquery": "/packages/js/jquery/jquery.min",
		"underscore": "/packages/js/underscore/underscore",
		"backbone": "/packages/js/backbone/backbone"
	},
    shim: {
        test: ["jquery"]
    }

});
requirejs(["test"]);
baseUrlはjsファイルのデフォルトのディレクトリを指定、
pathsはbaseUrl外のものや、ライブラリなどを指定、拡張子は省略します。
頭の/を書かない場合は、basuUrl配下で探します。特別なところは何も無いです。

shimはそれぞれのモジュールの依存関係を記述します。
上記のものはtest.jsはjquery依存ですよ、という指定です。
require(['jquery'], function( $ ) {
    console.log( $ ) // OK
});
こんな具合であとはよろしくやってくれます。

about ytake

執筆に参加しています


Laravel お役立ち情報

share



このエントリーをはてなブックマークに追加

Categories

laravel 45

DTM 0

music 0

PHP全般 31

0

JAPAN 1

WORLD 1

javascript 4

RDBMS 1

NoSQL 1

NewSQL 1

Recent Posts

Ad

comments powered by Disqus

GitHub

Social Links

Author


クリエイティブ・コモンズ・ライセンス
Yuuki Takezawa 作『Ytake Blog』はクリエイティブ・コモンズ 表示 - 非営利 4.0 国際 ライセンス で提供されています。

© ytake/comnect All Rights Reserved. 2014