Getting gulp to work with livereload
Solution 1
are you running off localhost? Go into the settings from the plugin in Chrome and check the option for file urls: chrome://extensions/
Solution 2
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/
Solution 3
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
Solution 4
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.
Solution 5
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']);
Malibur
Updated on December 23, 2020Comments
-
Malibur over 3 years
I have got my
Gulpfile
to compile mysass
and am only a "live-reload
away from dumpingcodekit
". I am struggling getting this style injection to work though. I am trying to set this up: https://github.com/vohof/gulp-livereloadAnd 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!
-
markuz-gj almost 10 yearsI 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
-
Jarno Argillander over 8 yearsgulp-livereload works fine without tiny-lr: livereload = require('gulp-livereload'); var lr = livereload.listen( { port: 12345, auto: false } ); ..and later... .pipe( livereload( { port: 12345 } ) )