work on #31: improve watch and connect tasks; watch-build

README.md

@@ -66,24 +66,20 @@ yo m
 IMPORTANT: Cordova needs an empty directory to work. Please run any other setup (e.g. `git init`) after running `yo m`.
 
 ## Commands
-**gulp watch** or **gulp** - start livereload and watch for changes in files. Automatically injects deps into index.html and opens your default browsers
+**gulp watch** or **gulp** - prepares everything for development. Get ready to start coding!
 
 ```
 gulp watch
 ```
-OR
-```
-gulp
-```
 
-**gulp build** - build your assets into www, cleans before every build
+**gulp build** - builds into www, cleans before every build
 ```
   gulp build
 ```
 
-**gulp serve-build** - serve version from www
+**gulp watch-build** - builds into www and watches version in www (good for debugging your build!)
 ```
-  gulp serve-build
+  gulp watch-build
 ```
 
 **gulp --cordova** - local wrapper for cordova cli (won't use global install to be compatible with generated project)
@@ -94,8 +90,8 @@ gulp
 
 cordova build/run/emulate/prepare
 ```
+  # runs gulp build before running the actual command
   gulp --cordova 'run|build|emulate|prepare <platform>' 
-  # runs gulp build
 ```
 
 **gulp config** - manage project configuration

app/templates/_gulpfile.js

@@ -6,7 +6,7 @@ var gulp = require('gulp');
 // config
 gulp.paths = {
   dist: 'www',
-  jsFiles: ['./app/**/*.js', '!./app/bower_components/**/*.js']
+  jsFiles: ['app/**/*.js', '!app/bower_components/**/*.js']
 };
 // retrieve options
 var minimist = require('minimist');

app/templates/gulp_tasks/watching.js

@@ -7,65 +7,69 @@ var paths = gulp.paths;
 // plugins
 var $ = require('gulp-load-plugins')();
 // modules
+var http = require('http');
+var connect = require('connect');
 var opn = require('opn');
 var serveStatic = require('serve-static');
-var serveIndex = require('serve-index');
 var connectLiveReload = require('connect-livereload');
 
-gulp.task('watch', ['connect', 'serve'], function () {
+var createConnectServer = function (paths) {
+  var app = connect()
+    .use(connectLiveReload({port: 35729}));
+  for (var key in paths) {
+    app.use(serveStatic(paths[key]));
+  }
+  http.createServer(app)
+    .listen(9000)
+    .on('listening', function () {
+      console.log('Started connect web server on http://localhost:9000');
+    });
+};
+
+// WATCH
+gulp.task('watch', ['serve'], function () {
   $.livereload.listen();
 
   // watch for changes
   gulp.watch([
-    'app/*.html',
+    'app/index.html',
     '.tmp/main/styles/*.css',
     'app/*/assets/**/*',
     'app/*/templates/**/*'
-  ].concat(paths.jsFiles))
-  .on('change', function () {
-    $.livereload.reload();
-    gulp.start('inject-only'); // TODO: only run when added/deleted files
-    // FIXME: when deleting second watch is not started: index.html OK but 404 in livereload
-    // FIXME: not watching new files?!
+  ].concat(paths.jsFiles),
+  function (event) {
+    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
+    if (event.type === 'changed') {
+      $.livereload.reload();
+    }
+    else { // added or deleted
+      gulp.start('inject-only'); // inject in index (implicitly reloads)
+    }
   });
 
   // watch for changes in scss
   gulp.watch('app/*/styles/**/*.scss', ['styles']);
   // watch for changes in bower.json
   gulp.watch('bower.json', ['wiredep']);
 });
-
 gulp.task('serve', ['connect', 'inject', 'styles'], function () {
   opn('http://localhost:9000');
 });
 gulp.task('connect', function () {
-  var app = require('connect')()
-    .use(connectLiveReload({port: 35729}))
-    .use(serveStatic('app'))
-    .use(serveStatic('.tmp'))
-    // paths to bower_components should be relative to the current file
-    // e.g. in app/index.html you should use ../bower_components
-    .use('/bower_components', serveStatic('bower_components'))
-    .use(serveIndex('app'));
-
-  require('http').createServer(app)
-    .listen(9000)
-    .on('listening', function () {
-      console.log('Started connect web server on http://localhost:9000');
-    });
+  createConnectServer(['app', '.tmp']);
 });
 
+// WATCH-BUILD
+gulp.task('watch-build', ['serve-build'], function () {
+  $.livereload.listen();
+
+  gulp.watch(paths.dist + '/**/*', function () {
+    $.livereload.reload();
+  });
+});
 gulp.task('serve-build', ['connect-build', 'build'], function () {
   opn('http://localhost:9000');
 });
 gulp.task('connect-build', function () {
-  var app = require('connect')()
-    .use(serveStatic(paths.dist))
-    .use(serveIndex(paths.dist));
-
-  require('http').createServer(app)
-    .listen(9000)
-    .on('listening', function () {
-      console.log('Started connect web server on http://localhost:9000');
-    });
+  createConnectServer(paths.dist);
 });

gulpfile.js

@@ -10,6 +10,7 @@ var paths = {
   lint: [
     './gulpfile.js',
     './app/index.js',
+    './app/templates/gulp_tasks/*.js',
     './controller/index.js',
     './service/index.js',
     './template/index.js'