Finish build process

README.md

@@ -3,24 +3,36 @@
 - That application is a basic cookbook based on jQuery mobile (dedicated for a kitchen robot my wife bought called 'thermomix').
 - Application is mainly written in JavaScript, on the client side.
 - Data (categories, recipes and cookbook name) are stored in the client’s localStorage.
-- Data (localStorage exported in JSON) are persisted on the server using a small piece of code in PHP (because it’s far easier to host on my old power-pc server).
+- Data (localStorage exported in JSON) are persisted on the server using a small piece of code in PHP.
 - You can switch between cookbooks, which are stored on separated files on the server.
 - Application should work on offline mode, in a read only mode.
 
+### Prerequisites
+
+You’ll need PHP5 on the server to run the app.
+
+## Build
+
+Run "rake".
+
+The build process copy files, concat and minify JavaScript, appends git last commit hash to html file and generate the appcache.manifest for offline use.
+
+### Prerequisites
+
+To build the application, you’ll need rake and grunt (which uses nodejs).
+For developpement, you’ll need to active Apache’s rewrite mod (see src/.htaccess file).
+
 ## Installation
 
 1. Copy files on the server,
-2. set write attributes to the data folder for the web server,
-3. run scripts/build\_manifest.py in order to build the manifest file for offline use (that should be done for each new version, to refresh manifest timestamp).
+2. set write attributes to the data folder for the web server’s user.
 
 ## Know issues
 
 - Application labels and messages are written in french.
 - For now, all data (meaning all categories and all recipes) are sent on the server on each save (yeah I know, not really bandwith efficient for now).
 - Concurrency check is very very basic for now (on save, we compare a timestamp between local data and server data and ask user if he want to override all data or not).
 
-CouchDB would address thoses issues but, as I said, I have problem running it on my power-pc server.
-
 ## Legal stuff
 
 Code of that application is released under GPLv2 : http://opensource.org/licenses/GPL-2.0
@@ -32,6 +44,7 @@ This application uses following OpenSource code or images :
 - jQuery mobile page param plugin (https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params),
 - qUnit (http://qunitjs.com),
 - PageDown editor (https://code.google.com/p/pagedown/),
-- FamFamFam icons (http://www.famfamfam.com/).
+- FamFamFam icons (http://www.famfamfam.com/),
+- Grunt for JavaScript build.
 
-I also used some icons from Thermomix manual and derived the logo for the icon.
+I also used some icons from the Thermomix manual and derived the logo for the icon.

build_manifest.py

@@ -44,7 +44,7 @@ def produce_manifest_entries(dir):
   # Update manifest's version timestamp on every run to force the cache update.
   f.write('#%s\n\n' % str(datetime.datetime.now()))
   f.write('index.html\n')
-  for d in ['imgs', 'css', 'js']:
+  for d in ['js', 'css', 'css/themes/default/images', 'imgs']:
     f.writelines(produce_manifest_entries(d))
   f.write('\nNETWORK:\n*\n')
 

rakefile.rb

@@ -9,6 +9,7 @@
   puts "Copying files..."
   FileUtils.mkdir_p BUILD_DIR
   FileUtils.cp "#{SOURCE_DIR}/index.html", BUILD_DIR
+  FileUtils.cp "./dist.htaccess", "#{BUILD_DIR}/.htaccess"
   FileUtils.cp_r "#{SOURCE_DIR}/css", BUILD_DIR
   FileUtils.cp_r "#{SOURCE_DIR}/imgs", BUILD_DIR
 
@@ -21,6 +22,10 @@
   puts "Concatening and minifying JS files"
   system "grunt concat min"
 
+  puts "Removing non minified css/js files"
+  FileUtils.rm "#{BUILD_DIR}/css/themes/default/jquery.mobile-1.2.0-rc.2.css"
+  FileUtils.rm "#{BUILD_DIR}/js/thermomix-recipes.js"
+
   puts "Generate manifest"
   system "(cd dist && ../build_manifest.py)"
 

src/.htaccess

@@ -0,0 +1,7 @@
+<IfModule mod_deflate.c>
+AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript application/json
+</IfModule>
+
+RewriteEngine On
+RewriteRule ^js/thermomix-recipes\.min\.js$ js/concat-js.php [L]
+

src/index.html

@@ -7,20 +7,11 @@
         <link rel="icon" type="image/png" href="imgs/favicon.ico" />
         <title>Mes recettes Thermomix</title> 
         <meta name="viewport" content="width=device-width, initial-scale=1"> 
-        <link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.2.0-rc.2.css" />
+        <link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.2.0-rc.2.min.css" />
         <link rel="stylesheet"  href="css/thermomix.css" />
         <link rel="apple-touch-icon" href="imgs/logo.png" />
         <link rel="apple-touch-icon" sizes="72x72" href="imgs/logo.png" />
-        <script src="js/jquery-1.8.2.min.js"></script>
-        <script src="js/Markdown.Converter.js"></script>
-        <script src="js/Markdown.Sanitizer.js"></script>
-        <script src="js/jquery.mobile-1.2.0-rc.2.min.js"></script>
-        <script src="js/jqm.page.params.js"></script>
-        <script src="js/underscore-min.js"></script>
-        <script src="js/thermomix-main.js"></script>
-        <script src="js/thermomix-data.js"></script>
-        <script src="js/thermomix-controller.js"></script>
-        <script src="js/thermomix-views.js"></script>
+        <script src="js/thermomix-recipes.min.js"></script>
     </head> 
     <body>
         <div id="connection-status">
@@ -295,7 +286,5 @@ <h1 class="edit">Modification d’une catégorie</h1>
                 </div>
             </div>
         </div>
-
-
     </body>
 </html>

src/js/concat-js.php

@@ -0,0 +1,18 @@
+<?php
+$javascripts = array(
+    'jquery-1.8.2.min.js',
+    'Markdown.Converter.js',
+    'Markdown.Sanitizer.js',
+    'jquery.mobile-1.2.0-rc.2.min.js',
+    'jqm.page.params.js',
+    'underscore-min.js',
+    'thermomix-main.js',
+    'thermomix-data.js',
+    'thermomix-controller.js',
+    'thermomix-views.js'
+);
+
+header('Content-type: application/javascript');
+foreach($javascripts as $file) {
+    echo file_get_contents(__DIR__."/".$file);
+}