Subscribe:

2014/09/17

Grunt-contrib-requirejs 設定

以下のファイル構造でGruntRequireを設定してみる。

hogeproject
├ lib
│ ├ require.js
│ ├ myhoge.js
│ ├ main.js
│ ├ jquery.js
│ ├ jquery-ui.min.js
│ └ moment.js
├ requirejs
├ node_modules
├ Gruntfile.coffee
├ index.html
└ package.json


Gruntfile.coffeeファイル記述(Grunt0.4からcoffeeファイル対応)

module.exports = (grunt) ->
    requirejs:
      index:
        options:
          # アプリケーションの親フォルダを指定
          appDir: './lib'

          # appDirで指定したフォルダをコピーするフォルダ(require設定jsファイルを直接書き換え)
          dir: './require'

          # モジュールの存在するフォルダをappDirから相対で指定
          baseUrl: "."

          # require設定jsファイルを指定(複数あればいくらでも追加できる。)
          modules:[
            { name: 'main' }
            ]

  grunt.loadNpmTasks 'grunt-contrib-requirejs'
  grunt.registerTask 'default', ['requirejs']

main.js
// main.js
requirejs.config(
{
  waitSeconds: 200,
  # urlArgsはコンパイルすると反映しませんのでindex.phpに直接記述
  urlArgs: (new Date()).getTime(),
  shim:  {
           'moment'        : ['jquery'],
           'jquery-ui.min' : ['jquery'],
           'myhoge'        : ['jquery']
         }
});

準備ができましたので'grunt'コマンドを実行すると下記の様にファイルが作成される。
libの中身がrequirejsにコピーされmain.jsファイルに読込むファイルが結合されている。

hogeproject
├ lib
│ ├ require.js
│ ├ myhoge.js
│ ├ main.js
│ ├ jquery.js
│ ├ jquery-ui.min.js
│ └ moment.js
├ requirejs
│ ├ require.js
│ ├ myhoge.js
│ ├ main.js     ← jquery,jquery-ui,moment,myhogeが結合されている。
│ ├ jquery.js
│ ├ jquery-ui.min.js
│ └ moment.js
├ node_modules
├ Gruntfile.coffee
├ index.html
└ package.json

index.html
<html>
<head>
  <title>hoge</title>
  <script data-main="requirejs/main.js" src="requirejs/require.js"></script>
  <script>
    require.config({
     urlArgs: (new Date()).getTime()
    });
  </script>
</head>
<body>hoge hoge</body>
</html>

0 件のコメント: