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!

Answer 1

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