work on #31: gulp build - fonts, css, images, ...; fix gulp watch wit…

…h new livereload syntax

app/index.js

@@ -208,15 +208,9 @@ var MGenerator = yeoman.generators.Base.extend({
       skipInstall: this.options['skip-install'],
       callback: function () {
         if (!this.options['skip-install']) {
-          // inject bower dependencies and app js files
           var done = this.async();
-          this.spawnCommand('gulp', ['wiredep', 'fonts']) // inject files into index, copy fonts to app/fonts
+          this.spawnCommand('gulp', ['bower-fonts']) // copy ionic fonts
           .on('exit', function () {
-            // TODO: better gulp task wiring/dependencies
-            // https://github.com/gulpjs/gulp/blob/master/docs/API.md#async-task-support
-            // https://github.com/klei/gulp-inject#injecting-files-from-multiple-source-streams
-            // https://github.com/klei/gulp-inject#injecting-some-files-into-head-and-some-into-body
-            this.spawnCommand('gulp', ['inject']);
             done();
           }.bind(this));
         }

app/templates/_index.html

@@ -12,7 +12,7 @@
     <!-- endbower -->
     <!-- endbuild -->
 
-    <!-- build:css styles/main.css -->
+    <!-- build:css main/styles/main.css -->
     <link rel="stylesheet" href="main/styles/main.css">
     <!-- endbuild -->
   </head>

app/templates/gulp_tasks/building.js

@@ -9,14 +9,16 @@ var $ = require('gulp-load-plugins')();
 // modules
 var del = require('del');
 
-gulp.task('build', ['clean', 'jshint', 'jscs', 'build-app', 'templates', 'images', 'fonts'], function () {
-  return gulp.src(paths.dist + '/**/*').pipe($.size({title: 'build', gzip: true}));
+gulp.task('build', ['clean', 'jshint', 'jscs', 'build-app', 'build-templates', 'build-assets'], function () {
+  return gulp.src(paths.dist + '/**/*')
+    .pipe($.size({title: 'build', gzip: true}));
 });
 
 gulp.task('clean', function () {
   del.sync(['.tmp', paths.dist + '/*']);
 });
-// build starting from main html file (index.html)
+// concatenate files in build:blocks inside index.html
+// and copy to build folder destinations
 gulp.task('build-app', ['inject', 'styles'], function () {
   // useref - parses build block in html, concatenate & replace files
   // only builds files that are actually used
@@ -39,19 +41,19 @@ gulp.task('build-app', ['inject', 'styles'], function () {
     .pipe(gulp.dest(paths.dist));
 });
 // copy templates
-gulp.task('templates', function () {
+gulp.task('build-templates', function () {
   return gulp.src([
-    'app/templates/**/*', // html, language, locales, assets
+    'app/**/templates/**/*',
   ])
-  .pipe(gulp.dest(paths.dist + '/templates'));
+  .pipe(gulp.dest(paths.dist));
 });
-// copy & minify images to dist/images
-gulp.task('images', function () {
-  return gulp.src('app/images/**/*')
+// copy assets
+gulp.task('build-assets', function () {
+  return gulp.src('app/**/assets/**/*')
     // disabled: imagemin not working correctly - https://github.com/mwaylabs/generator-m/issues/90
     // .pipe($.cache($.imagemin({
     //   progressive: true,
     //   interlaced: true
     // })))
-    .pipe(gulp.dest(paths.dist + '/images'));
+    .pipe(gulp.dest(paths.dist));
 });

app/templates/gulp_tasks/injecting.js

@@ -10,17 +10,22 @@ var $ = require('gulp-load-plugins')();
 var wiredep = require('wiredep');
 var mainBowerFiles = require('main-bower-files');
 
-// inject app/**/.*js and cordova.js files into index.html
-gulp.task('inject', function () {
+// inject app/**/*.js and bower components into index.html
+gulp.task('inject', ['wiredep'], function () {
+  return gulp.start('inject-only');
+});
+
+// inject app/**/*.js files into index.html
+gulp.task('inject-only', function () {
   var jsFiles = gulp.src(paths.jsFiles);
 
-  return gulp.src('./app/index.html')
+  return gulp.src('app/index.html')
     .pipe($.inject(
       jsFiles
         .pipe($.plumber()) // use plumber so watch doesn't crash on js error
         .pipe($.angularFilesort()),
       {relative: true}))
-    .pipe(gulp.dest('./app'));
+    .pipe(gulp.dest('app'));
 });
 
 // inject bower components
@@ -29,17 +34,17 @@ gulp.task('wiredep', function () {
 //   gulp.src('app/styles/*.scss') // into main.scss
 //     .pipe(wiredep())
 //     .pipe(gulp.dest('app/styles'));
-  return gulp.src('app/*.html') // into index.html
+  return gulp.src('app/index.html') // into index.html
     .pipe(wiredep.stream({exclude: ['bower_components/ionic/release/css']}))
        // exclude ionic scss since we're using ionic sass
     .pipe(gulp.dest('app'));
 });
 
-// copy fonts to do dist/fonts and app/fonts
-gulp.task('fonts', function () {
-  return gulp.src(mainBowerFiles({filter: /\.(eot|svg|ttf|woff)/i})
-    .concat('app/main/assets/fonts/**/*'))
+// copy bower-fonts to do app/main/assets/fonts
+gulp.task('bower-fonts', function () {
+  var fontFiles = mainBowerFiles({filter: /\.(eot|svg|ttf|woff)/i})
+    .concat('app/main/assets/fonts/**/*');
+  return gulp.src(fontFiles)
     .pipe($.flatten())
-    .pipe(gulp.dest(paths.dist + '/fonts'))
     .pipe(gulp.dest('app/main/assets/fonts')); // TODO: find a better way to inject $ionicons-font-path: "../fonts" !default; into main.scss on build
 });

app/templates/gulp_tasks/watching.js

@@ -18,13 +18,13 @@ gulp.task('watch', ['connect', 'serve'], function () {
   // watch for changes
   gulp.watch([
     'app/*.html',
-    '.tmp/styles/*.css',
+    '.tmp/main/styles/*.css',
     'app/*/assets/**/*',
     'app/*/templates/**/*'
   ].concat(paths.jsFiles))
   .on('change', function () {
-    $.livereload.changed();
-    gulp.start('inject'); // TODO: only run when added/deleted files
+    $.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?!
   });
@@ -38,9 +38,6 @@ gulp.task('watch', ['connect', 'serve'], function () {
 gulp.task('serve', ['connect', 'inject', 'styles'], function () {
   opn('http://localhost:9000');
 });
-gulp.task('serve-build', ['connect-build', 'inject', 'styles'], function () {
-  opn('http://localhost:9000');
-});
 gulp.task('connect', function () {
   var app = require('connect')()
     .use(connectLiveReload({port: 35729}))
@@ -57,11 +54,13 @@ gulp.task('connect', function () {
       console.log('Started connect web server on http://localhost:9000');
     });
 });
+
+gulp.task('serve-build', ['connect-build', 'build'], function () {
+  opn('http://localhost:9000');
+});
 gulp.task('connect-build', function () {
   var app = require('connect')()
-    .use(connectLiveReload({port: 35729}))
     .use(serveStatic(paths.dist))
-    .use('/bower_components', serveStatic('bower_components'))
     .use(serveIndex(paths.dist));
 
   require('http').createServer(app)

module/index.js

@@ -15,7 +15,7 @@ var MGenerator = yeoman.generators.NamedBase.extend({
     var moduleFolder = 'app/' + this.fileName + '/';
     this.mkdir(moduleFolder);
     this.template('_module.js', moduleFolder + this.fileName + '.js');
-    this.copy('yo.png', moduleFolder + 'assets/yo@2x.png');
+    this.copy('yo.png', moduleFolder + 'assets/images/yo@2x.png');
     this.mkdir(moduleFolder + 'controllers/');
     this.mkdir(moduleFolder + 'directives/');
     this.mkdir(moduleFolder + 'services/');

module/templates/_main.scss

@@ -19,7 +19,7 @@ $assertive:                       #ef4e3a !default;
 $royal:                           #8a6de9 !default;
 $dark:                            #444 !default;
 
-// The path for our ionicons font files, relative to the built CSS in www/css
+// The path for our ionicons font files, relative to the built & temporary main.css
 $ionicons-font-path: "../assets/fonts" !default;
 
 // Include all of Ionic

template/templates/_template.html

@@ -7,6 +7,6 @@ <h1 class="title"><%= name %></h1>
     <ul>
       <li>icons working?: <span class="ion-checkmark-circled"></span></li>
 <% if(options.sample === 'start') {%> <li>{{someData.binding}} </li><% } %>
-    <li>images working?<br><img src="<%= moduleFolder%>/assets/yo@2x.png"></li>
+    <li>images working?<br><img src="<%= moduleFolder%>/assets/images/yo@2x.png"></li>
   </ion-content>
 </ion-pane>