Menu icon Foundation
Livereload setup for Foundation Apps

I noticed apps doesn't have livereload on/setup in the gulp file.... I thought gulp-connect came with it.

I tried adding livereload:true

to the gulp task but still din't work. I do have the chrome plugin on.

I tried browser-sync, couldn't get it to work.

What else do I have to do so the server automatically refreshes?

---------------

Update fix thanks to Shane Osbourne
http://quick.as/bdpiqkl

gulpfile.js fix is attached

var gulp           = require('gulp'),
    rimraf         = require('rimraf'),
    runSequence    = require('run-sequence'),
    frontMatter    = require('gulp-front-matter'),
    autoprefixer   = require('gulp-autoprefixer'),
    sass           = require('gulp-ruby-sass'),
    uglify         = require('gulp-uglify'),
    concat         = require('gulp-concat'),
    browserSync    = require('browser-sync'),
    reload         = browserSync.reload,
    path           = require('path'),
    modRewrite     = require('connect-modrewrite'),
    dynamicRouting = require('./bower_components/foundation-apps/bin/gulp-dynamic-routing');

// Clean build directory
gulp.task('clean', function(cb) {
  rimraf('./build', cb);
});

// Copy static files (but not the Angular templates, Sass, or JS)
gulp.task('copy', function() {
  var dirs = [
    './client/**/*.*',
    '!./client/templates/**/*.*',
    '!./client/assets/{scss,js}/**/*.*'
  ];

  gulp.src(dirs, {
    base: './client/'
  })
    .pipe(gulp.dest('build'));

  return gulp.src('bower_components/foundation-apps/iconic/**/*')
    .pipe(gulp.dest('build/assets/img/iconic/'));
});

gulp.task('clean-partials', function(cb) {
  rimraf('./build/partials', cb);
});

gulp.task('copy-partials', ['clean-partials'], function() {
  return gulp.src(['bower_components/foundation-apps/js/angular/partials/**.*'])
    .pipe(gulp.dest('./build/partials/'));
});

gulp.task('sass', function() {
  return gulp.src('client/assets/scss/app.scss')
    .pipe(sass({
      loadPath: ['bower_components/foundation-apps/scss', 'client/assets/scss'],
      style: 'nested',
      bundleExec: true
    }))
    .on('error', function(e) {
      console.log(e);
    })
    .pipe(autoprefixer({
      browsers: ['last 2 versions', 'ie 10']
    }))
    .pipe(gulp.dest('./build/assets/css/'));
});

// Process Foundation JS
gulp.task('uglify', ['uglify-angular'], function() {
  var libs = [
    'bower_components/jquery/dist/jquery.js',
    'bower_components/fastclick/lib/fastclick.js',
    'bower_components/viewport-units-buggyfill/viewport-units-buggyfill.js',
    'bower_components/notify.js/notify.js',
    'bower_components/tether/tether.js',
    'client/assets/js/app.js'
  ];

  return gulp.src(libs)
    .pipe(uglify({
      beautify: true,
      mangle: false
    }).on('error', function(e) {
      console.log(e);
    }))
    .pipe(concat('app.js'))
    .pipe(gulp.dest('./build/assets/js/'))
  ;
});

// Process Angular JS
gulp.task('uglify-angular', function() {
  var libs = [
    'bower_components/angular/angular.js',
    'bower_components/angular-animate/angular-animate.js',
    'bower_components/ui-router/release/angular-ui-router.js',
    'bower_components/foundation-apps/js/vendor/**/*.js',
    'bower_components/foundation-apps/js/angular/**/*.js'
  ];

  return gulp.src(libs)
    .pipe(uglify({
      beautify: true,
      mangle: false
    }))
    .pipe(concat('angular.js'))
    .pipe(gulp.dest('./build/assets/js/'))
  ;

});

gulp.task('copy-templates', ['copy'], function() {
  var config = [];

  return gulp.src('./client/templates/**/*.html')
    .pipe(dynamicRouting({
      path: 'build/assets/js/routes.js',
      root: 'client'
    }))
    .pipe(gulp.dest('build/templates'))
  ;
});

gulp.task('server:start', function() {
  browserSync({
    open: false,
    notify: false,
    server: {
      baseDir: "./build",
      middleware: [
        modRewrite(['^[^\\.]*$ /index.html [L]'])
      ]
    }
  })
});

gulp.task('build', function() {
  runSequence('clean', ['copy', 'copy-partials', 'sass', 'uglify'], 'copy-templates', function() {
    console.log("Successfully built.");
  })
});

gulp.task('default', ['build', 'server:start'], function() {
  // gulp.watch(['./client/**/*.*', './js/**/*.*'], ['build', 'css', server.restart]);

  // Watch Sass
  gulp.watch(['./client/assets/scss/**/*', './scss/**/*'], ['sass', reload]);

  // Watch JavaScript
  gulp.watch(['./client/assets/js/**/*', './js/**/*'], ['uglify', reload]);

  // Watch static files
  gulp.watch(['./client/**/*.*', '!./client/templates/**/*.*', '!./client/assets/{scss,js}/**/*.*'], ['copy', reload]);

  // Watch Angular partials
  gulp.watch(['js/angular/partials/**.*'], ['copy-partials', reload]);

  // Watch Angular templates
  gulp.watch(['./client/templates/**/*.html'], ['copy-templates', reload]);
});

            

         

appslivereloadgulpfilegulp

I noticed apps doesn't have livereload on/setup in the gulp file.... I thought gulp-connect came with it.

I tried adding livereload:true

to the gulp task but still din't work. I do have the chrome plugin on.

I tried browser-sync, couldn't get it to work.

What else do I have to do so the server automatically refreshes?

---------------

Update fix thanks to Shane Osbourne
http://quick.as/bdpiqkl

gulpfile.js fix is attached

var gulp           = require('gulp'),
    rimraf         = require('rimraf'),
    runSequence    = require('run-sequence'),
    frontMatter    = require('gulp-front-matter'),
    autoprefixer   = require('gulp-autoprefixer'),
    sass           = require('gulp-ruby-sass'),
    uglify         = require('gulp-uglify'),
    concat         = require('gulp-concat'),
    browserSync    = require('browser-sync'),
    reload         = browserSync.reload,
    path           = require('path'),
    modRewrite     = require('connect-modrewrite'),
    dynamicRouting = require('./bower_components/foundation-apps/bin/gulp-dynamic-routing');

// Clean build directory
gulp.task('clean', function(cb) {
  rimraf('./build', cb);
});

// Copy static files (but not the Angular templates, Sass, or JS)
gulp.task('copy', function() {
  var dirs = [
    './client/**/*.*',
    '!./client/templates/**/*.*',
    '!./client/assets/{scss,js}/**/*.*'
  ];

  gulp.src(dirs, {
    base: './client/'
  })
    .pipe(gulp.dest('build'));

  return gulp.src('bower_components/foundation-apps/iconic/**/*')
    .pipe(gulp.dest('build/assets/img/iconic/'));
});

gulp.task('clean-partials', function(cb) {
  rimraf('./build/partials', cb);
});

gulp.task('copy-partials', ['clean-partials'], function() {
  return gulp.src(['bower_components/foundation-apps/js/angular/partials/**.*'])
    .pipe(gulp.dest('./build/partials/'));
});

gulp.task('sass', function() {
  return gulp.src('client/assets/scss/app.scss')
    .pipe(sass({
      loadPath: ['bower_components/foundation-apps/scss', 'client/assets/scss'],
      style: 'nested',
      bundleExec: true
    }))
    .on('error', function(e) {
      console.log(e);
    })
    .pipe(autoprefixer({
      browsers: ['last 2 versions', 'ie 10']
    }))
    .pipe(gulp.dest('./build/assets/css/'));
});

// Process Foundation JS
gulp.task('uglify', ['uglify-angular'], function() {
  var libs = [
    'bower_components/jquery/dist/jquery.js',
    'bower_components/fastclick/lib/fastclick.js',
    'bower_components/viewport-units-buggyfill/viewport-units-buggyfill.js',
    'bower_components/notify.js/notify.js',
    'bower_components/tether/tether.js',
    'client/assets/js/app.js'
  ];

  return gulp.src(libs)
    .pipe(uglify({
      beautify: true,
      mangle: false
    }).on('error', function(e) {
      console.log(e);
    }))
    .pipe(concat('app.js'))
    .pipe(gulp.dest('./build/assets/js/'))
  ;
});

// Process Angular JS
gulp.task('uglify-angular', function() {
  var libs = [
    'bower_components/angular/angular.js',
    'bower_components/angular-animate/angular-animate.js',
    'bower_components/ui-router/release/angular-ui-router.js',
    'bower_components/foundation-apps/js/vendor/**/*.js',
    'bower_components/foundation-apps/js/angular/**/*.js'
  ];

  return gulp.src(libs)
    .pipe(uglify({
      beautify: true,
      mangle: false
    }))
    .pipe(concat('angular.js'))
    .pipe(gulp.dest('./build/assets/js/'))
  ;

});

gulp.task('copy-templates', ['copy'], function() {
  var config = [];

  return gulp.src('./client/templates/**/*.html')
    .pipe(dynamicRouting({
      path: 'build/assets/js/routes.js',
      root: 'client'
    }))
    .pipe(gulp.dest('build/templates'))
  ;
});

gulp.task('server:start', function() {
  browserSync({
    open: false,
    notify: false,
    server: {
      baseDir: "./build",
      middleware: [
        modRewrite(['^[^\\.]*$ /index.html [L]'])
      ]
    }
  })
});

gulp.task('build', function() {
  runSequence('clean', ['copy', 'copy-partials', 'sass', 'uglify'], 'copy-templates', function() {
    console.log("Successfully built.");
  })
});

gulp.task('default', ['build', 'server:start'], function() {
  // gulp.watch(['./client/**/*.*', './js/**/*.*'], ['build', 'css', server.restart]);

  // Watch Sass
  gulp.watch(['./client/assets/scss/**/*', './scss/**/*'], ['sass', reload]);

  // Watch JavaScript
  gulp.watch(['./client/assets/js/**/*', './js/**/*'], ['uglify', reload]);

  // Watch static files
  gulp.watch(['./client/**/*.*', '!./client/templates/**/*.*', '!./client/assets/{scss,js}/**/*.*'], ['copy', reload]);

  // Watch Angular partials
  gulp.watch(['js/angular/partials/**.*'], ['copy-partials', reload]);

  // Watch Angular templates
  gulp.watch(['./client/templates/**/*.html'], ['copy-templates', reload]);
});

            

         
Hans McMurdy over 4 years ago

I tried and gave up but if your even figure this out please fork/push the hell out of it.

Jay Clark over 4 years ago

I am also wanting this functionality. I'm a bit surprised it isn't included by default. I expected that foundation-apps watch would setup a watch process that could be connected to with the LiveReload Chrome extension.,,

Rafi Benkual over 4 years ago

Try this Foundation for Apps and BrowserSync http://quick.as/bdpiqkl

Marius Crisan over 4 years ago

You are doing everything right, except that you'll need to add .pipe(connect.reload()) on the gulp tasks you would want to reload after. I know it's not the best approach, but it works for me. You can see my gulp file bellow:

 var gulp           = require('gulp'),
    rimraf         = require('rimraf'),
    runSequence    = require('run-sequence'),
    frontMatter    = require('gulp-front-matter'),
    autoprefixer   = require('gulp-autoprefixer'),
    sass           = require('gulp-ruby-sass'),
    uglify         = require('gulp-uglify'),
    concat         = require('gulp-concat'),
    connect        = require('gulp-connect'),
    path           = require('path'),
    modRewrite     = require('connect-modrewrite'),
    dynamicRouting = require('./bower_components/foundation-apps/bin/gulp-dynamic-routing');

// Clean build directory
gulp.task('clean', function(cb) {
  rimraf('./build', cb);
});

// Copy static files (but not the Angular templates, Sass, or JS)
gulp.task('copy', function() {
  var dirs = [
    './client/**/*.*',
    '!./client/templates/**/*.*',
    '!./client/assets/{scss,js}/**/*.*'
  ];
  return gulp.src(dirs, {
    base: './client/'
  })
    .pipe(gulp.dest('build'))
    .pipe(connect.reload());
});

gulp.task('clean-partials', function(cb) {
  rimraf('./build/partials', cb);
});

gulp.task('copy-partials', ['clean-partials'], function() {
  return gulp.src(['bower_components/foundation-apps/js/angular/partials/**.*'])
    .pipe(gulp.dest('./build/partials/'));
});

gulp.task('sass', function() {
  return gulp.src('client/assets/scss/app.scss')
    .pipe(sass({
      loadPath: ['bower_components/foundation-apps/scss', 'client/assets/scss'],
      style: 'nested',
      bundleExec: true
    }))
    .on('error', function(e) {
      console.log(e);
    })
    .pipe(autoprefixer({
      browsers: ['last 2 versions', 'ie 10']
    }))
    .pipe(gulp.dest('./build/assets/css/'))
    .pipe(connect.reload());;
});

// Process Foundation JS
gulp.task('uglify', ['uglify-angular'], function() {
  var libs = [
    'bower_components/jquery/dist/jquery.js',
    'bower_components/fastclick/lib/fastclick.js',
    'bower_components/viewport-units-buggyfill/viewport-units-buggyfill.js',
    'bower_components/notify.js/notify.js',
    'bower_components/tether/tether.js'
  ];

  return gulp.src(libs)
    .pipe(uglify({
      beautify: true,
      mangle: false
    }).on('error', function(e) {
      console.log(e);
    }))
    .pipe(concat('app.js'))
    .pipe(gulp.dest('./build/assets/js/'))
  ;
});

// Process Angular JS
gulp.task('uglify-angular', function() {
  var libs = [
    'bower_components/angular/angular.js',
    'bower_components/angular-animate/angular-animate.js',
    'bower_components/ui-router/release/angular-ui-router.js',
    'bower_components/foundation-apps/js/angular/**/*.js',
    'client/assets/js/app.js'
  ];

  return gulp.src(libs)
    .pipe(uglify({
      beautify: true,
      mangle: false
    }))
    .pipe(concat('angular.js'))
    .pipe(gulp.dest('./build/assets/js/'))
    .pipe(connect.reload())
  ;

});

gulp.task('copy-templates', ['copy'], function() {
  var config = [];

  return gulp.src('./client/templates/**/*.html')
    .pipe(dynamicRouting({
      path: 'build/assets/js/routes.js',
      root: 'client'
    }))
    .pipe(gulp.dest('build/templates'))
    .pipe(connect.reload())
  ;
});

gulp.task('server:start', function() {
  connect.server({
    root: './build',
    livereload: true,
    middleware: function() {
      return [
        modRewrite(['^[^\\.]*$ /index.html [L]'])
      ];
    },
  });
});

gulp.task('build', function() {
  runSequence('clean', ['copy', 'copy-partials', 'sass', 'uglify'], 'copy-templates', function() {
    console.log("Successfully built.");
  })
});

gulp.task('default', ['build', 'server:start'], function() {
  // gulp.watch(['./client/**/*.*', './js/**/*.*'], ['build', 'css', server.restart]);

  // Watch Sass
  gulp.watch(['./client/assets/scss/**/*', './scss/**/*'], ['sass']);

  // Watch JavaScript
  gulp.watch(['./client/assets/js/**/*', './js/**/*'], ['uglify']);

  // Watch static files
  gulp.watch(['./client/**/*.*', '!./client/templates/**/*.*', '!./client/assets/{scss,js}/**/*.*'], ['copy']);

  // Watch Angular partials
  gulp.watch(['js/angular/partials/**.*'], ['copy-partials']);

  // Watch Angular templates
  gulp.watch(['./client/templates/**/*.html'], ['copy-templates']);
});

Fidel Torres over 3 years ago

best way i have been using is to install live-server from npm:

https://www.npmjs.com/package/live-server