I'm trying to set up gulp to run livereload using MAMP. Here is my gulpfile:
'use strict';
var gulp = require('gulp');
var del = require('del');
var sass = require('gulp-sass');
var livereload = require('gulp-livereload');
var paths = {
elements: ['elements/**/*']
};
gulp.task('clear:cache', function () {
return del(['core/cache/**/*']).then(function(){
livereload();
console.log('live reload called');
}).catch(function(){
livereload();
});
});
gulp.task('sass', function () {
console.log('sassy live reload');
return gulp.src('assets/styles/scss/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('assets/styles/css'))
.pipe(livereload());
});
gulp.task('sass:watch', function () {
gulp.watch('assets/styles/scss/*.scss', ['sass']);
});
// Rerun the task when a file changes
gulp.task('watch', function() {
livereload.listen({port:8888,host:"localhost",start:true, reloadPage:"index.php"});
gulp.watch(paths.elements, ['clear:cache', 'sass:watch']);
});
// The default task (called when you run `gulp` from cli)
gulp.task('default', ['sass:watch','clear:cache','watch']);
As you can see, the gulpfile is supposed to clear the cache and reload the browser whenever changes are made to files in the elements directory, and compile the sass and reload the browser whenever any scss files are changed. The cache clearing and sass compiling work fine, and both spit out the console.log messages in their respective functions.
Where I'm having trouble is getting livereload to reload the browser. I know that livereload is working but not targeting the browser at all, in fact, because I get messages in my terminal like /Applications/MAMP/htdocs/assets/styles/css/style.css reloaded.
By default the LiveReload extensions listens on port 35729. To use a different port, like 8888 in your example, you have to override the default. More infos can be found here http://feedback.livereload.com/knowledgebase/articles/195869-how-to-change-the-port-number-livereload-listens-o
You can use Live Reload Browser Page
Live Reload Browser Page
GitHub live-reload-bp
Works with NodeJs, Grunt, Gulp, WebPack. You can use any IDE if it has a function to autosave a file after editing
Related
Gulp-livereload is giving me an error when I save a change to my .scss files. My gulpfile.js has been working fine for years and just started giving me trouble a little while ago. The scss gets compiled to css and livereload tries to reload the page, but I get the following error (photo attached: https://i.stack.imgur.com/o57el.png). When I manually reload the page the error goes away and the style changes are reflected. Also, if I make changes to other files (i.e. HTML or JavaScript) everything works just fine.
It may also be worth mentioning, I am using MAMP to create a local Apache server, so I don't think I can make use of something else like browsersync. Any help would be much appreciated, thank you!
Here is what my gulpfile.js looks like.
'use strict';
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var sass = require('gulp-sass');
var livereload = require('gulp-livereload');
gulp.task('sass', function () {
return gulp.src('./styles/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./styles/css'))
.pipe(livereload());
});
gulp.task('html', function() {
return gulp.src('./**/*.html')
.pipe(livereload());
});
gulp.task('js', function() {
return gulp.src('./js/*.js')
.pipe(livereload());
});
gulp.task('watch', function () {
livereload.listen();
gulp.watch('./styles/sass/**/*.scss', gulp.series('sass'));
gulp.watch('./*.html', gulp.series('html'));
gulp.watch('./js/*.js', gulp.series('js'));
});
I want to add Browser Sync to the gulpfile.js, and got so far as below.
It is a Drupal 8 site on MAMP / apache 80.
I have this working script when I run gulp runbsync. I would like to add it to gulp watch.
I have tried various methods to include the task inside of gulp.task('watch:css', all of which simply failed.
var browserSync = require('browser-sync').create(),
reload = browserSync.reload;
//define task
gulp.task('bsync', function () {
//spin up dev server
browserSync.init({
proxy: "dev.sitename.local",
hostname: "dev.sitename.local",
port: 3000, //even if apache is running on 80 or something else
});
//when css files change, reload browserSync
gulp.watch('./css/*.css').on('change', function () {
browserSync.reload();
});
});
//call task with 'gulp runbsync'
gulp.task('runbsync', ['bsync']);
The watch parts are:
// The default task.
gulp.task('default', ['build']);
// Build everything.
gulp.task('build', ['sass', 'drush:cc', 'lint']);
// Default watch task.
// #todo needs to add a javascript watch task.
gulp.task('watch', ['watch:css']);
// Watch for changes for scss files and rebuild.
gulp.task('watch:css', ['sass', 'drush:cc', 'lint:sass'], function () {
return gulp.watch(options.theme.scss + '**/*.scss', options.gulpWatchOptions, ['sass', 'drush:cc', 'lint:sass']);
});
I dont know if other parts of the file are nessesary so I left them out here and made a repo (you can even send a pull request)
https://github.com/petergus/D8-zurb-foundation-gulp-browsersync/blob/master/gulpfile.js
I have been playing with gulp and babel for the past few days. I am getting a solid grasp of setting up babel with gulp through tutorials. I've noticed that the newer the tutorial the more changes that develop.
Here is one way I was able to set up es6 to es5 with a transpiler.
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('es6to5', function () {
return gulp.src('js/src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
However, I do not want to rerun gulp each time, and I want the dist/ folder to update on each save.
I added browser-sync and delete.
var gulp = require('gulp');
var babel = require('gulp-babel');
var browserSync = require('browser-sync');
var del = require('del');
gulp.task('clean:dist', function() {
return del([
'dist/app.js'
]);
});
gulp.task('es6to5', function () {
return gulp.src('js/src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
gulp.task("browserSync", function() {
browserSync({
server: {
baseDir: './dist'
}
});
});
gulp.task("copyIndex", ['clean:dist'], function() {
gulp.src("src/index.html")
.pipe(gulp.dest('./dist'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('watchFiles', function() {
gulp.watch('src/index.html', ['copyIndex']);
gulp.watch('src/**/*.js', ['babelIt']);
});
gulp.task('default', ['clean:dist', 'es6to5','browserSync','watchFiles']);
I set up a default that will clean out the dist folder then run es6to5. Afterwards I want it to sync and update. I called watchFiles last.
However, I am no longer getting updated js files. The files in the dist folder Are not compiling to es5 and everything is going to a 404.
The task
copyIndex seems to be the problem but I am not sure how to fix it or if it is the only problem. Any direction helps.
You have a typo.
It should be gulp.watch('src/**/*.js', ['es6to5']);, not gulp.watch('src/**/*.js', ['babelIt']);
Anyway i suggest to use gulp-watch instead of the built-in watch function. It has several advantages, mainly it recompile on new file creation.
after reading alot and trying to make my own gulpfile.js I figured out how to make it compile my "scss" to a "css", the problem is that my browser-sync doesn't work because I need a proxy (because im using .php not .html), If I write this on CMD: "browser-sync start --proxy localhost:8080/app" I can see my files, but I need it to sync every time I modify something on my "scss". All I need now is to implement the proxy thing on it and reloads everytime I save/modify the ".scss", this is my currently gulpfile.js :
var gulp = require('gulp');
var httpProxy = require('http-proxy');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var paths = {
scss: '.sass/*.scss'
};
gulp.task('sass', function () {
gulp.src('scss/style.scss')
.pipe(sass({
includePaths: ['scss']
}))
.pipe(gulp.dest('css'));
});
gulp.task('browser-sync', function() {
browserSync.init(["css/*.css", "js/*.js"], {
server: {
baseDir: "./"
}
});
});
gulp.task('watch', ['sass', 'browser-sync'], function () {
gulp.watch(["scss/*.scss", "scss/base/*.scss", "scss/sections/*.scss", "scss/style/*.scss"], ['sass']);
});
This gulpfile.js is watching my "scss/syle.scss" and updates my "css/style.css" everytime I modify the scss file.
Have you taken a look at the browserSync options? This should give you a pretty good idea on how to set it up. It doesn't seem like you implemented it in the gulpfile you provided.
My gulpfile watches for changes to Sass files then should fire a refresh for the lr server. The watch event is working fine as the Sass is being compiled on each change, however the browser is not refreshing. I am using gulp-ruby-sass to compile the Sass.
I have an almost identical task that watches JS files then fires a browser refresh, this works fine.
Below is the (abridged) gulpfile.js. I have included the task scripts as this currently works the same way as styles task should do.
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var bourbon = require('node-bourbon').includePaths;
var newer = require('gulp-newer');
var lr = require('tiny-lr');
var lrserver = lr();
var refresh = require('gulp-livereload');
gulp.task('scripts', ['vendorScripts', 'libScripts'], function () {
return gulp.src([paths.js])
.pipe(newer(paths.destJS + '/script.js'))
.pipe(concat('script.js'))
.pipe(gulp.dest(paths.destJS))
.pipe(refresh(lrserver));
});
gulp.task('styles', function () {
return gulp.src(paths.sass)
.pipe(newer(paths.destCSS))
.pipe(sass({loadPath: require('node-bourbon').includePaths}))
.pipe(gulp.dest(paths.destCSS))
.pipe(refresh(lrserver));
});
gulp.task('watch', function () {
gulp.watch(paths.jsAll, ['scripts']);
gulp.watch(paths.sass, ['styles']);
gulp.watch(paths.html, ['html']);
gulp.watch([paths.img, '!' + paths.app + '/**/images/sprites{,/**}'], ['images']);
gulp.watch(paths.sprites, ['sprites']);
});
I have tried removing both the newer plugin and the node-bourbon require but it has no effect on this issue.
As a workaround, in response to soenguy's comments:
Create a new task which itself first calls the styles task:
gulp.task('goRefresh', ['styles'], function () {
return gulp.src([paths.app], { read: false })
.pipe(refresh(lrserver));
});
Then for the watch task change the Sass watch to:
gulp.watch(paths.sass, ['goRefresh']);
This is far from an ideal solution, but at least browser refreshing works.