We Keep Coding

Gulp watch execute task only once

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

Node - An #import loop has been found

I'm new with js, node and all things related.
I'm trying to set up a front end development environment from scratch, using gulp, bower, browser sync, and other plugins.
I'm almost done, it's working in some way, except for a couple of details I can't resolve because I'm not sure if it's something in the code syntax or the order of the functions executed in my gulpfile.js file, or because the plugins are not being used correctly. I have already tried to change the order of them, change some path, etc with no results.
Now I'm experiencing the following issues:
The main.scss needs to be saved two times before see the changes reflected in the browser.
When I run gulp in the console this is what I receive (these errors are new and appeared after a minor change proposed by Poeta in his answer, which helped me a lot.
[16:38:08] Starting 'html'...
[16:38:08] 'html' errored after 41 ms
[16:38:08] ReferenceError: injectFiles is not defined
at Gulp. ([full_path]\gulpfile.js:50:18)
at module.exports ([full_path]\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask ([full_path]\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep ([full_path]\node_modules\orchestrator\index.js:214:10)
at [full_path]\node_modules\orchestrator\index.js:279:18)
at finish ([full_path]\node_modules\orchestrator\lib\runTask.js:21:8)
at [full_path]\node_modules\orchestrator\lib\runTask.js:52:4
at f ([full_path]\node_modules\once\once.js:17:25)
at DestroyableTransform.onend ([full_path]\node_modules\end-of-stream\index.js:31:18)
at emitNone (events.js:91:20)
This is my gulpfile.js content:
var gulp = require('gulp');
var sass = require('gulp-sass');
var inject = require('gulp-inject');
var wiredep = require('wiredep').stream;
var plumber = require('gulp-plumber');
var imagemin = require('gulp-imagemin');
var browserSync = require('browser-sync');
var uglify = require('gulp-uglify');
gulp.task('styles', function(){
var injectAppFiles = gulp.src(['!src/styles/main.scss', 'src/styles/*.scss'], {read: false});
var injectGlobalFiles = gulp.src('src/global/*.scss', {read: false});
function transformFilepath(filepath) {
return '#import "' + filepath + '";';
}
var injectAppOptions = {
transform: transformFilepath,
starttag: '// inject:app',
endtag: '// endinject',
addRootSlash: false
};
var injectGlobalOptions = {
transform: transformFilepath,
starttag: '// inject:global',
endtag: '// endinject',
addRootSlash: false
};
return gulp.src('src/styles/main.scss')
.pipe(plumber())
.pipe(wiredep())
.pipe(inject(injectGlobalFiles, injectGlobalOptions))
.pipe(inject(injectAppFiles, injectAppOptions))
.pipe(sass())
.pipe(gulp.dest('dist/styles'));
});
gulp.task('html', ['styles'], function(){
var injectAppFiles = gulp.src('src/styles/*.scss', {read: false});
var injectOptions = {
addRootSlash: false,
ignorePath: ['src', 'dist']
};
return gulp.src('src/index.html')
.pipe(plumber())
.pipe(inject(injectFiles, injectOptions))
.pipe(gulp.dest('dist'));
});
gulp.task('imagemin', function() {
gulp.src('src/assets/*.{jpg,jpeg,png,gif,svg}')
.pipe(plumber())
.pipe(imagemin())
.pipe(gulp.dest('dist/assets'));
});
gulp.task('uglify', function() {
gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
gulp.task('sass', function() {
gulp.src('src/styles/*.scss')
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('dist/styles/'));
});
gulp.task('browser-sync', function() {
browserSync.init(["styles/*.css", "js/*.js","index.html"], {
server: {
baseDir: "dist"
}
});
});
gulp.task('watch', function() {
gulp.watch('src/js/*.js', ['uglify']).on('change', browserSync.reload);
gulp.watch('src/styles/*.scss', ['sass']).on('change', browserSync.reload);
gulp.watch('src/assets/*.{jpg,jpeg,png,gif,svg}', ['imagemin']).on('change', browserSync.reload);
gulp.watch('src/index.html', ['html']).on('change', browserSync.reload);
});
gulp.task('default', ['html', 'sass','imagemin', 'uglify', 'browser-sync', 'watch']);
So, could you please point me in the right direction to get this enviroment set in the proper way?
Update about previous problem: The following was resolved thanks to Bruno Poeta's answer.
Plumber found unhandled error: Error in plugin 'gulp-sass'
Message: src\styles\main.scss
Error: An #import loop has been found: (full_path)/src/styles/main.scss imports src/styles/main.scss on line 526 of src/styles/main.scss
After that message...
[15:11:18] Finished 'styles' after 4.48 s
[15:11:18] Starting 'html'...
[15:11:19] gulp-inject 1 files into index.html.
[15:11:19] Finished 'html' after 1.44 s
[15:11:19] Starting 'default'...
[15:11:19] Finished 'default' after 6.98 μs
[Browsersync] Access URLs:
Local: localhost : 3000
External: 192.168 .0.4 :3000
UI: localhost :3001
UI External: 192.168 .0.4 :3001
[Browsersync] Serving files from: dist
[Browsersync] Watching files...
Note: the line 526 doesn't exist since it is generated by the gulp-inject plugin. These are the last lines in the main.css file, line 520 and 521:
// inject:app
// endinject

The error as you may have noticed is in your styles task. The problem is that you are importing all .scss files, including main.scss itself. That is your loop, right there. Remove main.scss from the files that should be injected, like this:
gulp.task('styles', function(){
var injectAppFiles = gulp.src(['!src/styles/main.scss', 'src/styles/*.scss'], {read: false});
// ...
It should work right now.

Gulp livereload not working in Chrome

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.

Gulp-livereload, -webserver and -embedlr. How to use them together?

I try to understand how to use gulp with these useful and popular plugins. There are what I have:
runned go(lang) server on localhost:8000
static/local html files under app folder which are used by server to form pages
scss files under the same directory, which are converted into css and then autoprefixed
Here is my gulpfile.js:
var gulp = require('gulp'),
sass = require('gulp-sass'),
watch = require('gulp-watch'),
autoprefixer = require('gulp-autoprefixer'),
livereload = require('gulp-livereload');
// "./" - it's "app" directory
gulp.task('default', function() {
return gulp.src('./*.scss')
.pipe(watch('./*.scss'))
.pipe(sass())
.pipe(autoprefixer('> 5%'))
.pipe(gulp.dest('./'));
});
So what I need:
watch html, css/scss files for change and make reload on localhost:8000 (chrome's open tab)
it will be great if there is no need to use:
livereload chrome plugin
expressjs framework
reload html pages if it opened directly just like file without server
I've read that it is possible to achieve this by using gulp-embedlr and gulp-webserver. If so, how to do it?

Ok, the best solution that I find is using Gulp + BrowserSync! It's great solution.
Here is the code of my gulpfile.js:
var gulp = require('gulp'),
sourcemaps = require('gulp-sourcemaps'),
sass = require('gulp-sass'),
watch = require('gulp-watch'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync'),
reload = browserSync.reload;
gulp.task('browserSync', function() {
browserSync({
//logConnections: false,
//logFileChanges: false,
notify: false,
open: false,
server: {
baseDir: "./"
}
});
});
gulp.task('sass', function() {
return gulp.src('./css/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer('> 5%'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css'))
.pipe(reload({stream:true}));
});
gulp.task('watch', function() {
gulp.watch('./css/*.scss', ['sass']);
gulp.watch('./*.html', reload);
});
gulp.task('default', ['watch', 'sass', 'browserSync']);
There is no sense to explain the code above. Just read this: http://www.browsersync.io/docs/gulp/

Browsersync not syncing scroll

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.