Getting gulp to work with livereload

Question

I have got my Gulpfile to compile my sass and am only a "live-reload away from dumping codekit". I am struggling getting this style injection to work though. I am trying to set this up: https://github.com/vohof/gulp-livereload

And when i run gulp in the terminal it seems that it compiles the sass, but it doesnt inject the styles. What am i doing wrong? I installed the livereload extention in chrome + the following node modules:

  "devDependencies": {
    "gulp": "~3.5.0",
    "gulp-sass": "~0.6.0"
  },
  "dependencies": {
    "gulp-livereload": "~0.2.0",
    "tiny-lr": "0.0.5"
  }

And my gulpfile looks like this:

var gulp = require('gulp');

//plugins
var sass = require('gulp-sass'),
    lr = require('tiny-lr'),
    livereload = require('gulp-livereload'),
    server = lr();

gulp.task('sass', function () {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./'))
        .pipe(livereload(server));
});


// Rerun tasks when a file changes
gulp.task('watch', function () {
    server.listen(35729, function (err) {

        if (err) return console.log(err);

        gulp.watch('scss/**/*.scss', ['sass']);

    });
});





// The default task (called when you run 'gulp' from cli)
// "sass" compiles the sass to css
// "watch" looks for filechanges, and runs tasks accordingly
gulp.task('default', ['sass', 'watch']);

Any help is much appreciated. Thanks!

what do you mean by 'it doesn't inject the styles' ? Is it compiling your sass to the correct directory? — Brian Glaz, Jan 28 '14 at 15:18
And when i reload the browser the styles take effect. But i have to do it manually — Malibur, Jan 28 '14 at 15:20
are you running off localhost? Go into the settings from the plugin in Chrome and check the option for file urls — Brian Glaz, Jan 28 '14 at 15:44
Do you have the livereload plugin installed *and* enabled in your browser? (Alternatively, you can use [gulp-embedlr](https://npmjs.org/package/gulp-embedlr) to inject the LR javascript into your webpage with no browser plugin.) — OverZealous, Jan 28 '14 at 15:44
@BrianGlaz That was exactly my problem. Thank you so much! If you leave that as an answer - ill accept that. Thank you. Silly mee. — Malibur, Jan 28 '14 at 15:49
I just posted a working sample of a an express static server, gulp and livereload. — markuz-gj, May 19 '14 at 03:04

score 12 · Accepted Answer · answered Jan 28 '14 at 15:55

12

are you running off localhost? Go into the settings from the plugin in Chrome and check the option for file urls: chrome://extensions/

answered Jan 28 '14 at 15:55

Brian Glaz

15,468
4
37
55

score 4 · Answer 2 · answered Apr 19 '14 at 14:59

4

If you're using gulp-livereload, I think there is no point in using tiny-lr as well.

You can find a working example of LiveReload integration here:

https://github.com/kriasoft/spa-seed.front-end - SPA Front-end Starter Kit

answered Apr 19 '14 at 14:59

Konstantin Tarkus

37,618
14
135
121

I had problems before using only gulp-livereload if you want to use a port different of the default one. Using tiny-lr solved this problem – markuz-gj May 19 '14 at 02:30
gulp-livereload works fine without tiny-lr: livereload = require('gulp-livereload'); var lr = livereload.listen( { port: 12345, auto: false } ); ..and later... .pipe( livereload( { port: 12345 } ) ) – Jarno Argillander Nov 25 '15 at 08:53

score 4 · Answer 3 · answered Apr 26 '14 at 15:37

4

Just came across this fantastic tutorial explaining all the points to get Livereload up and running with Gulp:

http://rhumaric.com/2014/01/livereload-magic-gulp-style/

answered Apr 26 '14 at 15:37

Dmitri Zaitsev

13,548
11
76
110

score 2 · Answer 4 · answered Jan 17 '15 at 14:07

This is my solution

In need only this npm modules npm install gulp gulp-sass gulp-livereload express --save-dev
Put the Scss-Files in /app/styles and Html-Files in /app/
Install the live-reload-plugin for Chrome.
Go to http://localhost:4000 and activate the pluin for the current tab

Done :-)

(Don't forget to change the sass-settings for your Project. Set indentedSyntax to false if you are using scss instead of sass)

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  livereload = require('gulp-livereload');

gulp.task('sass', function() {
  gulp.src('app/styles/*.sass')
    .pipe(sass({
      includePaths: ['app/styles'],
      indentedSyntax : true,
      errLogToConsole: true
    }))
    .pipe(gulp.dest('app/css'))
    .pipe(livereload());
});

gulp.task('serve', function(done) {
  var express = require('express');
  var app = express();
  app.use(express.static(__dirname + '/app'));
  app.listen(4000, function () {
     done();
  });
});

gulp.task('html', function() {
  gulp.src('app/**/*.html')
    .pipe(livereload());
});

gulp.task('watch', function() {
  gulp.watch('app/styles/*.sass', ['sass']);
  gulp.watch('app/**/*.html', ['html']);

  livereload.listen();
});

gulp.task('default', ['watch', 'serve']);

score 2 · Answer 5 · answered Dec 22 '15 at 11:50

2

I had enabled livereload via browser extensions, but the last thing I needed to do was to click this button to "activate" it on the individual tab.

answered Dec 22 '15 at 11:50

blomster

768
2
10
27

markuz-gj · Answer 6 · 2014-05-19T03:10:12.227

I got gulp and livereload running without the need of browser plugins.

var http = require('http')
, path = require('path')
, Promise = Promise || require('es6-promise').Promise
, express = require('express')
, gulp = require('gulp')
, log = require('gulp-util').log
, tinylr = require('tiny-lr')
, livereload = require('gulp-livereload')

, ROOT = 'dist'
, GLOBS = [path.join(ROOT, "/**/*")]
, PORT = 8000
, PORT_LR = PORT + 1

, app = express()
;

app.use(require('connect-livereload')({port: PORT_LR}))
app.use('/', express.static("./dist"))

http.createServer(app).listen(PORT, function() {
  log("Started express server on http://localhost:" + PORT);
});

lrUp = new Promise(function(resolve, reject) {
  lrServer = tinylr()
  lrServer.listen(PORT_LR, function(err) {
    if (err) return reject(err)
    resolve(lrServer)
  })
})

gulp.watch(GLOBS, function(evt) {
  if (evt.type === 'deleted') return

  lrUp.then(function(lrServer) {
    log("LR: reloading", path.relative(ROOT, evt.path));
    gulp.src(evt.path).pipe(livereload(lrServer))
  })
  .catch(console.log)
});

enjoy :)

Getting gulp to work with livereload

6 Answers6

This is my solution