I am new to gulp and I'm trying to get browser-sync working. It seems to work fine except that the syncronised scroll is not working. Can anyone see what might be wrong with my setup.
var gulp = require('gulp'),
jade = require('gulp-jade'),
uglify = require('gulp-uglify'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
livereload = require('gulp-livereload'),
browserSync = require('browser-sync');
var outputDir = "builds/development";
gulp.task('jade', function() {
return gulp.src('src/templates/**/*.jade')
.pipe(jade())
.pipe(gulp.dest(outputDir))
.pipe(livereload());
});
// Js - to uglify use gulp js --type production ( or just leave out js to build everything )
gulp.task('js', function() {
return gulp.src('src/js/main.js')
.pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
.pipe(gulp.dest(outputDir + '/js'))
.pipe(livereload());
});
// Sass - to compress use gulp sass --type production ( or just leave out sass to build everything )
gulp.task('sass', function() {
var config = {};
if ( gutil.env.type === 'production') {
config.outputStyle = 'compressed';
}
return gulp.src('src/sass/main.scss')
.pipe(sass(config))
.pipe(gulp.dest(outputDir + '/css'))
.pipe(livereload());
});
// Browser Sync ( not working 100% ... not scrolling )
gulp.task('browser-sync', function() {
browserSync({
proxy: "http://localsandbox.dev/gulptutorial/builds/development/"
});
});
// Watch
gulp.task('watch', function() {
gulp.watch('src/templates/**/*.jade', ['jade']);
gulp.watch('src/js/**/*.js', ['js']);
gulp.watch('src/sass/**/*.scss', ['sass']);
});
gulp.task('default', ['jade', 'js', 'sass', 'watch', 'browser-sync'], function () {
gulp.watch("js/*.js", ['js', browserSync.reload]);
});
Your issue might be related to watching with both Gulp and BrowserSync. Here is a good reference to that:
"You shouldn't watch files with BrowserSync + Gulp" https://github.com/shakyShane/gulp-browser-sync/issues/16#issuecomment-43597240
So you would probably want remove livereload (let BrowserSync handle everything) and change your default Gulp task to something like this:
gulp.task('default', ['jade', 'js', 'sass', 'browser-sync'], function () {
gulp.watch('src/templates/**/*.jade', ['jade', browserSync.reload]);
gulp.watch('src/js/**/*.js', ['js', browserSync.reload]);
gulp.watch('src/sass/**/*.scss', ['sass', browserSync.reload]);
});
You could also try setting scroll explicitly (but it defaults to true anyway):
gulp.task('browser-sync', function() {
browserSync({
proxy: "http://localsandbox.dev/gulptutorial/builds/development/"
ghostMode: {
scroll: true
}
});
});
I had the same problem and that was because I had a javascript function called scrollTo declared in my own code, which was interfering with browserSync code. All I needed to do is to rename that function, and the browsersync scrolling was working again.
Related
I've installed gulp-livereload to reload pages after making changes in .js files.
Here is the code:
const gulp = require('gulp');
const livereload = require('gulp-livereload');
gulp.task('jsLiveReload', () => {
gulp
.src('/home/ksdmwms/Desktop/projs/others/tests/gulp_test/src/js/file.js')
.pipe(livereload());
});
gulp.task('watchJsTest', function() {
livereload.listen({
reloadPage: 'http://localhost/projs/others/tests/gulp_test/src/index.html'
});
gulp.watch('/home/ksdmwms/Desktop/projs/others/tests/gulp_test/src/js/file.js', gulp.series('jsLiveReload'));
});
So its listening changes on file.js.
When i execute i get this:
gulp watchJsTest
[14:05:40] Using gulpfile /opt/lampp/htdocs/projs/others/tests/gulp_test/gulpfile.js
[14:05:40] Starting 'watchJsTest'...
[14:05:46] Starting 'jsLiveReload'...
[14:05:46] /home/ksdmwms/Desktop/projs/others/tests/gulp_test/src/js/file.js reloaded.
It reloads only when i save the first changes, if i make another changes its not reloading.
How can i solve this?
Note: Im using livereload chrome extension and Ubuntu 18.04
If gulp is installed in /home/ksdmwms/Desktop/projs/others/tests/gulp_test
you could try this:
var gulp = require('gulp'),
livereload = require('gulp-livereload');
gulp.task('jsLiveReload', function() {
gulp.src('./src/js/**/*.js')
.pipe(livereload());
//.pipe(gulp.dest(''));
});
gulp.task('watchJsTest', function() {
livereload.listen({
reloadPage: 'http://localhost/'
});
gulp.watch('./src/js/**/*.js', ['jsLiveReload']);
});
Tell me if it works :)
Have you already tried brwosersync?
Browser-sync > Gulp-live-reload
Browser-Sync
const gulp = require('gulp')
const browserSync = require('browser-sync').create()
gulp.task('js', () => {
return gulp.src([
'Files1',
'File2'
])
.pipe(gulp.dest(''))
.pipe(browserSync.stream())
})
gulp.task('serve', ['sass', 'js'], () => {
browserSync.init({
server: './src',
})
gulp.watch([
'src/sass/*.scss',
'src/js/*.js',
], ['sass', 'js'])
gulp.watch('src/*.html').on('change', browserSync.reload)
})
gulp.task('default', ['serve'])
In serve task, gulp.watch
Today I migrated to Gulp 4, but I'm not able to get my watch function to work.
// Watch
gulp.task('watch', gulp.series('typescript', 'sass', 'browserSync', function(){
gulp.watch('./app/styles/**/*.scss', gulp.series('sass'));
gulp.watch('app/scripts/**/*.ts', gulp.series('typescript'));
gulp.watch('./app/*.html', browserSync.reload);
}));
typescript, sass, browserSync will run but watch does not react to file changes.
I just had the same problem. You don't actually have a reference to the initialized browserSync inside your watch gulp task. Instead of having your browserSync.init function in a separate browserSync gulp task, move it to inside your watch task, and it should work. Hope this helps!
Example:
gulp.task('watch', gulp.series(function (){
browserSync.init({
proxy:"http://localhost:8888",
injectChanges: true,
plugins: ["bs-html-injector?files[]=*.html"]
});
var html = gulp.watch('development/index.html');
html.on('change', function(path, stats) {
console.log('you changed the html');
browserSync.notify("Compiling, please wait!");
browserSync.reload("index.html");
})
var js = gulp.watch('development/**/*.js');
js.on('change', function(path, stats) {
console.log('you changed the js');
browserSync.notify("Compiling, please wait!");
browserSync.reload();
})
var css = gulp.watch('development/**/*.css');
css.on('change', function(path, stats) {
console.log('you changed the css');
browserSync.notify("Injecting CSS!");
browserSync.reload("*.css");
})
}));
Change gulp.watch('app/scripts/**/*.ts', gulp.series('typescript')); to a absolute gulp.watch('./app/scripts/**/*.ts', gulp.series('typescript'));
Also i normally stick this syntax, per task.
var watcher = gulp.watch('js/**/*.js', gulp.parallel('concat', 'uglify'));
watcher.on('change', function(path, stats) {
console.log('File ' + path + ' was changed');
});
I had some issues too, and i found this tutorial of gulp 4, this is my gulpfile to compile scss and watch the Scss files, concat and compile to a main.min.css with autoprefix.
var gulp = require('gulp'),
concat = require('gulp-concat'),
autoprefixer = require('gulp-autoprefixer'),
sass = require('gulp-sass');
//task para o sass
var paths = {
styles: {
src: 'scss/**/*.scss',
dest: 'css'
}
};
function styles() {
return gulp
.src(paths.styles.src, {
sourcemaps: true
})
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(concat('main.min.css'))
.pipe(autoprefixer({
browser: ['last 2 version', '> 5%'],
cascade: false
}))
.pipe(gulp.dest(paths.styles.dest));
}
function watch() {
gulp.watch(paths.styles.src, styles);
}
var build = gulp.parallel(styles, watch);
gulp.task(build);
gulp.task('default', build);
I think that on the gulp v4 you need to use the gulp.parallel. I'm digging to learn more about the new version.
I have this weird problem after installing the following gulp packages. Everything renders just fine, but when it gets to the part of the liveReload() it just doesn't reload the page...
I installed the livereload chrome extension (is it necessary?), and it seems like there is nothing to config there...
Here is my gulpfile:
var gulp = require('gulp'),
autoPrefixer = require('gulp-autoprefixer'),
jade = require('gulp-jade'),
liveReload = require('gulp-livereload'),
sourceMaps = require('gulp-sourcemaps'),
ts = require('gulp-typescript'),
tsLint = require('gulp-tslint'),
watch = require('gulp-watch'),
sass = require('gulp-sass');
// Configuration
var config = {
js: 'public/_assets/frontend/js',
css: 'public/_assets/frontend/css',
fonts: 'public/_assets/frontend/fonts',
images: 'public/_assets/frontend/img',
markup: 'public/'
};
// Javascript
gulp.task('scripts', function() {
var tsResult = gulp.src(['src/ts/*.ts', 'src/ts/**/*.ts'])
.pipe(tsLint())
.pipe(ts({
noImplicitAny: true
}));
tsResult.js
.pipe(gulp.dest(config.js))
.pipe(liveReload());
});
// Sass
gulp.task('sass', function() {
return gulp.src(['src/sass/*.scss', 'src/sass/**/*.scss'])
.pipe(watch(['src/sass/*.scss', 'src/sass/**/*.scss']))
.pipe(sourceMaps.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(autoPrefixer({
browsers: ['last 3 versions'],
cascade: false
}))
.pipe(sourceMaps.write())
.pipe(gulp.dest(config.css))
.pipe(liveReload());
});
// jade
gulp.task('markup', function() {
return gulp.src(['src/**/*.jade', 'src/**/_*.jade'])
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest(config.markup))
.pipe(liveReload());
});
// Images
gulp.task('images', function() {
return gulp.src(['src/images/**/*.*', 'src/images/*.*'])
.pipe(gulp.dest(config.images));
});
// Watch
gulp.task('watch', function() {
liveReload.listen();
gulp.watch(['src/ts/*.ts', 'src/ts/**/*.ts'], ['scripts']);
gulp.watch(['src/sass/*.scss', 'src/sass/**/*.scss'], ['sass']);
gulp.watch(['src/*.jade', 'src/**/*.jade'], ['markup']);
});
// Default Task
gulp.task('default', function() {
gulp.start('sass', 'scripts', 'markup', 'images', 'watch');
});
Everything works just fine, the gulp is doing it's thing and rendering all my files, but the page won't reload... I'm using python simple http server on port 8000.
Any ideas?
The only thing that comes to my mind is: did you include the livereload client script into your page? AFAIK you should be supposed to inject this script at the end of your page's body.
<script src="http://localhost:35729/livereload.js"></script>
You can use
Live Reload Browser Page
GitHub
Live Reload Browser Page is very flexible tool for live reloading of the browser page.
Hi im trying to get a gulp watch on the go in my gulp.js file. It needs to run my sass and minify it and set to destination folder on watch. Can anybody help please?
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var watch = require('gulp-watch');
var htmlmin = require('gulp-html-minifier');
gulp.task('sass', function(){
return gulp.src('scss/styles.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(minifyCss())
.pipe(gulp.dest('dest'))
});
gulp.task('minify-css', function() {
return gulp.src('dest/*.css')
.pipe(minifyCss())
.pipe(gulp.dest('dest'));
});
gulp.task('compress', function() {
return gulp.src('lib/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('minify-html', function() {
gulp.src('*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest(''))
});
// Watch Files For Changes
gulp.task('watch', function(){
gulp.watch('scss/*.scss', ['sass']);
// Other watchers
})
// Run all Refinedby Tasks
gulp.task('all', ['sass']);
You need to load the watcher when you call your "all task command".
gulp.task('all', ['sass'], function() {
gulp.watch('scss/*.scss', ['sass']);
});
or
gulp.task('all', ['sass'], function() {
gulp.start('watch');
});
or if you do not want to change your code just add
// Run all Refinedby Tasks
gulp.task('all', ['sass', 'watch']);
So I am trying to set up the livereload server, however, I never get the message Live reload server listening on: <port_number> like in this video. If I change my files, the console says that the file was reloaded. I have the Chrome extension installed. What am I missing? Thanks.
gulpfile.js
'use strict';
// include gulp
var gulp = require('gulp'),
gutil = require('gulp-util');
// include plug-ins
var autoprefix = require('gulp-autoprefixer'),
changed = require('gulp-changed'),
concat = require('gulp-concat'),
http = require('http'),
imagemin = require('gulp-imagemin'),
jshint = require('gulp-jshint'),
livereload = require('gulp-livereload'),
minifyCSS = require('gulp-minify-css'),
minifyHTML = require('gulp-minify-html'),
sass = require('gulp-sass'),
st = require('st'),
stripDebug = require('gulp-strip-debug'),
uglify = require('gulp-uglify');
gulp.task('build-css', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/styles'));
});
// minify new or changed HTML pages
gulp.task('htmlpage', function() {
var htmlSrc = './src/*.html',
htmlDst = './dist';
return gulp.src(htmlSrc)
.pipe(changed(htmlDst))
.pipe(minifyHTML())
.pipe(gulp.dest(htmlDst));
});
// minify new images
gulp.task('imagemin', function() {
var imgSrc = './src/images/**/*',
imgDst = './dist/images';
return gulp.src(imgSrc)
.pipe(changed(imgDst))
.pipe(imagemin())
.pipe(gulp.dest(imgDst));
});
// JS hint task
gulp.task('jshint', function() {
return gulp.src('./src/scripts/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// JS concat, strip debugging and minify
gulp.task('scripts', function() {
return gulp.src(['./src/scripts/lib.js','./src/scripts/*.js'])
.pipe(concat('script.js'))
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./dist/scripts/'));
});
gulp.task('server', function(done) {
http.createServer(
st({
path: __dirname + '/dist',
index: 'index.html',
cache: false
})
).listen(8080, done);
});
// CSS concat, auto-prefix and minify
gulp.task('styles', function() {
return gulp.src(['./src/styles/*.css'])
.pipe(concat('styles.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest('./dist/styles/'));
});
gulp.task('watch', ['server'], function() {
livereload.listen({
basePath: 'dist'
});
// watch for HTML changes
gulp.watch('./src/*.html', ['htmlpage']).on('change', livereload.changed);
// watch for JS changes
gulp.watch('./src/scripts/*.js', ['jshint', 'scripts']).on('change', livereload.changed);
// watch for CSS changes
gulp.watch('./src/styles/*.css', ['styles']).on('change', livereload.changed);
gulp.watch('src/scripts/**/*.js', ['jshint']).on('change', livereload.changed);
gulp.watch('src/styles/scss/**/*.scss', ['build-css']).on('change', livereload.changed);
});
// default gulp task
gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles', 'watch'], function() {
return gutil.log('Gulp is running!')
});
I use browser-sync to reload the browser when a file has changed.
Try something like this:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('serve', function() {
gulp.watch("app/**/*.js").on('change', browserSync.reload);
gulp.watch("templates/**/*.html").on('change', browserSync.reload);
gulp.watch("css/**/*.css").on('change', browserSync.reload);
browserSync.init({
server: "./"
});
});
gulp.task('default', ['serve']);
I recommend your attention to the real-time browser page reload tool.
Live Reload Browser Page
Live Reload Browser Page
GitHub
Easy to use. Works independently of the IDE. But you need the IDE to be able to auto-save files. Also works with tools like Gulp, WebPack, Grunt and others.