kobapan @ wiki
kobapan @ wiki

JavaScript > Grunt bake - Simple static html partials includes

install node.js


tar xf node-v0.12.0.tar.gz
cd node-v0.12.0
./configure
make
sudo make install

update npm

sudo npm install npm -g

install Grunt CLI

sudo npm install -g grunt-cli

install Grunt bake

cd path/to/your/project
npm install grunt-bake --save-dev

create Gruntfile.js in your project root

  1. module.exports = function(grunt) {
  2.  
  3.     // Project configuration.
  4.     grunt.initConfig( {
  5.         bake: {
  6.             your_target: {
  7.                 files: {
  8.                     // files to: from, ...:
  9.                     "index.html": "app/index.html",
  10.                     "mobile.html": "app/mobile.html"
  11.                 }
  12.             },
  13.         },
  14.     });
  15.  
  16.     // Load the plugin
  17.     grunt.loadNpmTasks( "grunt-bake" );
  18.  
  19.     // Default task(s).
  20.     grunt.registerTask('default', ['bake']);
  21. };
  22.  

create app/index.html

  1. <!--(bake includes/head.html title="おらホームページ")-->
  2. <!--(bake includes/foot.html)-->
  3.  

create app/includes/head.html

  2.     <head>
  3.         <title>{{title}}<title>
  4.     </head>
  5.     <body>
  6. <!--(bake contents.html)-->
  7.  

create app/includes/foot.html

  1. </body>
  2. </html>
  3.  

create app/includes/contents.html

  1. <div id="container">hello</div>
  2.  

run grunt

$ grunt
and this bake task will create index.html: 
  2.     <head>
  3.         <title>おらホームページ<title>
  4.     </head>
  5.     <body>
  6.         <div id="container">hello</div>
  7.     </body>
  8. </html>
  9.  



参考



grunt-rsync


npm install grunt-rsync 

  1. module.exports = function(grunt) {
  2.  
  3.     // Project configuration.
  4.     grunt.initConfig( {
  5.         bake: {
  6.           // bake config
  7.         },
  8.         rsync: {
  9.             options: {
  10.                 exclude: ['app',
  11.                           'node_modules',
  12.                           'README.txt',
  13.                           'package.json',
  14.                           'Gruntfile.js',
  15.                           '.htaccess'],
  16.                 recursive: true,
  17.                 syncDest: false,        // コピー先に存在しないファイルを削除しない
  18.             },
  19.             dist: {
  20.                 options: {
  21.                     src: "./",               // コピー元ディレクトリ
  22.                     dest: "~/www",      // コピー先ディレクトリ
  23.                     host: "username@host",     // コピー先ホスト
  24.                     // private-key を使えるようにしておく ~/.ssh/id_rsa
  25.                 }
  26.             },
  27.         }
  28.     });
  29.     grunt.loadNpmTasks('grunt-rsync');
  30.  
  31.     // Default task(s).
  32.     grunt.registerTask('default', ['bake', 'rsync']);
  33. };
  34.  



「Grunt bake - Simple static html partials includes」をウィキ内検索
最終更新：2015年02月20日 22:07

[Amazon商品]