update gulpfile for template to work with twistd/flask
authorcavaliet
Thu, 09 Oct 2014 12:17:28 +0200
changeset 4 9c70d81e9062
parent 3 1b94e6e9579f
child 5 90a7c431b979
update gulpfile for template to work with twistd/flask
client/app/annotationclient.html
client/app/index.html
client/gulpfile.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/app/annotationclient.html	Thu Oct 09 12:17:28 2014 +0200
@@ -0,0 +1,94 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Mons by IRI</title>
+  <link rel="stylesheet" href="{{ pre_static_path }}static/css/lib.css">
+  <link rel="stylesheet" href="{{ pre_static_path }}static/css/app.css">
+</head>
+<body ng-controller="homeCtrl" ng-app="mons" ng-cloak>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12">
+      <form role="form">
+        <input class="form-control" placeholder="Nom d'utilisateur" ng-model="username"/>
+      </form>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-12">
+        <form role="form">
+          <autocomplete ng-model="yourchoice" data="allCatLabels" on-type="onAutocompleteType" attr-input-class="form-control" attr-placeholder="Catégories..." on-select="onSelect" ></autocomplete>
+        </form>
+      </div>
+    </div>
+    <div class="row mons-content">
+        <div class="mons-button hand return" ng-style="returnVisStyle" ng-click="selectLevel(false)" ng-init="returnVisStyle={visibility:'hidden'}">
+          <div class="content">
+              <div class="table">
+                <div class="table-cell">
+                  <p class="large-cat">RETOUR</p>
+                </div>
+              </div>
+          </div>
+        </div>
+        <div class="mons-button hand send" ng-click="sendAnnotation(yourchoice)">
+          <div class="content">
+              <div class="table">
+                <div class="table-cell">
+                  <p class="large-cat">ENVOYER</p>
+                  <p class="normal-cat">la catégorie saisie</p>
+                </div>
+              </div>
+          </div>
+        </div>
+    </div>
+    <div class="mons-content">
+      <div ng-show="!selectedlevel">
+          <div class="mons-button hand" ng-repeat="c in data.categories" style="background-color: {{ '{{' }} c.color {{ '}}' }}" ng-click="selectLevel($index, c.event_code)">
+            <div class="content">
+                <div class="table">
+                  <div class="table-cell">
+                    <p class="large-cat">{{ '{{' }} c.label {{ '}}' }}</p>
+                    <p class="normal-cat">{{ '{{' }} c.full_label {{ '}}' }}</p>
+                  </div>
+                </div>
+            </div>
+          </div>
+      </div>
+      <div ng-show="selectedlevel">
+          <div class="mons-button hand" ng-repeat="c in selectedlevel" style="background-color: {{ '{{' }} c.color {{ '}}' }}" ng-click="sendAnnotation(c.event_code)">
+            <div class="content">
+                <div class="table">
+                  <div class="table-cell">
+                    <p class="large-cat">{{ '{{' }} c.label {{ '}}' }}</p>
+                    <p class="normal-cat">{{ '{{' }} c.full_label {{ '}}' }}</p>
+                  </div>
+                </div>
+            </div>
+          </div>
+      </div>
+    </div>
+    <footer>
+      <div class="row">
+        <div class="col-md-12 text-center">
+            mons vBeta - ©IRI-2014
+        </div>
+      </div>
+    </footer>
+  </div>
+  <script type="text/javascript" src="{{ pre_static_path }}static/js/lib.js"></script>
+  <!--script type="text/javascript" src="{{ pre_static_path }}static/js/templates.js"></script-->
+  <script type="text/javascript" src="{{ pre_static_path }}static/js/app.js"></script>
+  <script type="text/javascript">
+      angular.module("mons")
+          .value('context', {
+              urls: {
+                  dataUrl: "{{ pre_static_path }}static/data/categories.json"
+              }
+          });
+
+  </script>
+</body>
+</html>
--- a/client/app/index.html	Thu Oct 09 11:48:42 2014 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,94 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Mons by IRI</title>
-  <link rel="stylesheet" href="lib.css">
-  <link rel="stylesheet" href="app.css">
-</head>
-<body ng-controller="homeCtrl" ng-app="mons" ng-cloak>
-  <div class="container">
-    <div class="row">
-      <div class="col-md-12">
-      <form role="form">
-        <input class="form-control" placeholder="Nom d'utilisateur" ng-model="username"/>
-      </form>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-md-12">
-        <form role="form">
-          <autocomplete ng-model="yourchoice" data="allCatLabels" on-type="onAutocompleteType" attr-input-class="form-control" attr-placeholder="Catégories..." on-select="onSelect" ></autocomplete>
-        </form>
-      </div>
-    </div>
-    <div class="row mons-content">
-        <div class="mons-button hand return" ng-style="returnVisStyle" ng-click="selectLevel(false)" ng-init="returnVisStyle={visibility:'hidden'}">
-          <div class="content">
-              <div class="table">
-                <div class="table-cell">
-                  <p class="large-cat">RETOUR</p>
-                </div>
-              </div>
-          </div>
-        </div>
-        <div class="mons-button hand send" ng-click="sendAnnotation(yourchoice)">
-          <div class="content">
-              <div class="table">
-                <div class="table-cell">
-                  <p class="large-cat">ENVOYER</p>
-                  <p class="normal-cat">la catégorie saisie</p>
-                </div>
-              </div>
-          </div>
-        </div>
-    </div>
-    <div class="mons-content">
-      <div ng-show="!selectedlevel">
-	      <div class="mons-button hand" ng-repeat="c in data.categories" style="background-color: {{ c.color }}" ng-click="selectLevel($index, c.event_code)">
-	        <div class="content">
-	            <div class="table">
-	              <div class="table-cell">
-			        <p class="large-cat">{{ c.label }}</p>
-			        <p class="normal-cat">{{ c.full_label }}</p>
-                  </div>
-                </div>
-	        </div>
-	      </div>
-      </div>
-      <div ng-show="selectedlevel">
-	      <div class="mons-button hand" ng-repeat="c in selectedlevel" style="background-color: {{ c.color }}" ng-click="sendAnnotation(c.event_code)">
-            <div class="content">
-                <div class="table">
-                  <div class="table-cell">
-                    <p class="large-cat">{{ c.label }}</p>
-                    <p class="normal-cat">{{ c.full_label }}</p>
-                  </div>
-                </div>
-            </div>
-	      </div>
-	  </div>
-    </div>
-    <footer>
-      <div class="row">
-        <div class="col-md-12 text-center">
-            mons vBeta - ©IRI-2014
-        </div>
-      </div>
-    </footer>
-  </div>
-  <script type="text/javascript" src="lib.js"></script>
-  <!--script type="text/javascript" src="templates.js"></script-->
-  <script type="text/javascript" src="app.js"></script>
-  <script type="text/javascript">
-      angular.module("mons")
-          .value('context', {
-              urls: {
-                  dataUrl: "data/categories.json"
-              }
-          });
-
-  </script>
-</body>
-</html>
--- a/client/gulpfile.js	Thu Oct 09 11:48:42 2014 +0200
+++ b/client/gulpfile.js	Thu Oct 09 12:17:28 2014 +0200
@@ -8,9 +8,13 @@
 //var filesize = require('gulp-filesize');
 //var cssmin  = require('gulp-cssmin');
 
+var templateFolder = '../annot-server/templates/';
+var templateFileDest = '../annot-server/templates/annotationclient.html';
+var staticFolder = '../annot-server/static';
+
 gulp.task('clean', function () {
-  return gulp.src('build', {read: false})
-    .pipe(clean());
+  gulp.src(templateFileDest, {read: false}).pipe(clean());
+  gulp.src(staticFolder, {read: false}).pipe(clean());
 });
 
 var scriptsSrc = ['!./app/**/*_test.js','./app/**/*.js'];
@@ -22,33 +26,34 @@
         .pipe(plugins.jshint.reporter('default'))
         .pipe(plugins.jshint.reporter('fail'))
         .pipe(plugins.concat('app.js'))
-        .pipe(gulp.dest('./build'))
+        .pipe(gulp.dest(staticFolder+'/js'))
         .pipe(plugins.filesize())
         .pipe(plugins.uglify())
         .pipe(plugins.rename('app.min.js'))
-        .pipe(gulp.dest('./build'))
+        .pipe(gulp.dest(staticFolder+'/js'))
         .pipe(plugins.filesize())
         .on('error', gutil.log);
 });
 
-gulp.task('templates',function(){
-    //combine all template files of the app into a js file
-    gulp.src(['!./app/index.html',
-        './app/**/*.html'])
-        .pipe(plugins.angularTemplatecache('templates.js',{standalone:true}))
-        .pipe(gulp.dest('./build'));
-});
+
+//gulp.task('templates',function(){
+//    //combine all template files of the app into a js file
+//    gulp.src(['!./app/index.html',
+//        './app/**/*.html'])
+//        .pipe(plugins.angularTemplatecache('templates.js',{standalone:true}))
+//        .pipe(gulp.dest(staticFolder+'/js'));
+//});
 
 gulp.task('css', function(){
     gulp.src('./app/**/*.css')
 //        .pipe(plugins.csslint())
 //        .pipe(plugins.csslint.reporter())
         .pipe(plugins.concat('app.css'))
-        .pipe(gulp.dest('./build'))
+        .pipe(gulp.dest(staticFolder+'/css'))
         .pipe(plugins.filesize())
         .pipe(plugins.minifyCss({keepBreaks:true}))
         .pipe(plugins.rename('app.min.css'))
-        .pipe(gulp.dest('./build'))
+        .pipe(gulp.dest(staticFolder+'/css'))
         .pipe(plugins.filesize());
 });
 
@@ -67,11 +72,11 @@
     //concatenate vendor JS files
     gulp.src(vendorJSsrc)
         .pipe(plugins.concat('lib.js'))
-        .pipe(gulp.dest('./build'))
+        .pipe(gulp.dest(staticFolder+'/js'))
         .pipe(plugins.filesize())
         .pipe(plugins.uglify())
         .pipe(plugins.rename('lib.min.js'))
-        .pipe(gulp.dest('./build'))
+        .pipe(gulp.dest(staticFolder+'/js'))
         .pipe(plugins.filesize())
         .on('error', gutil.log);
 });
@@ -81,48 +86,48 @@
     gulp.src(['!./bower_components/**/*.min.css',
         './bower_components/**/*.css'])
         .pipe(plugins.concat('lib.css'))
-        .pipe(gulp.dest('./build'))
+        .pipe(gulp.dest(staticFolder+'/css'))
         .pipe(plugins.filesize())
         .pipe(plugins.minifyCss({keepBreaks:true}))
         .pipe(plugins.rename('lib.min.css'))
-        .pipe(gulp.dest('./build'))
+        .pipe(gulp.dest(staticFolder+'/css'))
         .pipe(plugins.filesize());
 });
 
 gulp.task('vendorFonts', function(){
     gulp.src(['./bower_components/**/fonts/*'])
         .pipe(plugins.flatten())
-        .pipe(gulp.dest('./build/fonts'));
+        .pipe(gulp.dest(staticFolder+'/css/fonts'));
 });
 
 gulp.task('copy-index', function() {
-    gulp.src('./app/index.html')
-        .pipe(gulp.dest('./build'));
+    gulp.src('./app/annotationclient.html')
+        .pipe(gulp.dest(templateFolder));
 });
 
 gulp.task('copy-data', function() {
     gulp.src('./data/**/*')
-        .pipe(gulp.dest('./build/data'));
+        .pipe(gulp.dest(staticFolder+'/data'));
 });
 
 gulp.task('copy-img', function() {
     gulp.src('./img/**/*')
-        .pipe(gulp.dest('./build/img'));
+        .pipe(gulp.dest(staticFolder+'/img'));
 });
 
 gulp.task('watch',function(){
     gulp.watch([
-        'build/**/*.html',
-        'build/**/*.js',
-        'build/**/*.css'
+        templateFolder+'/**/*.html',
+        staticFolder+'/**/*.js',
+        staticFolder+'/**/*.css'
     ], function(event) {
         return gulp.src(event.path)
             .pipe(plugins.connect.reload());
     });
     gulp.watch(['./app/**/*.js','!./app/**/*test.js'],['scripts']);
-    gulp.watch(['!./app/index.html','./app/**/*.html'],['templates']);
+    //gulp.watch(['!./app/index.html','./app/**/*.html'],['templates']);
     gulp.watch('./app/**/*.css',['css']);
-    gulp.watch('./app/index.html',['copy-index']);
+    gulp.watch('./app/annotationclient.html',['copy-index']);
     gulp.watch('./data/**/*',['copy-data']);
     gulp.watch('./img/**/*',['copy-img']);
 
@@ -134,4 +139,5 @@
     livereload: true
 }));
 
-gulp.task('default',['connect','scripts','templates','css','copy-index','copy-data','copy-img','vendorJS','vendorCSS','vendorFonts','watch']);
+//gulp.task('default',['connect','scripts','templates','css','copy-index','copy-data','copy-img','vendorJS','vendorCSS','vendorFonts','watch']);
+gulp.task('default',['connect','scripts','css','copy-index','copy-data','copy-img','vendorJS','vendorCSS','vendorFonts','watch']);