Configure Gulp 'watch' task for very basic server-restart (Node JS)
So there are a lot of great tutorials out there, but IMHO they seem to not break down the step-by-step details that a newbie to Gulp like myself is looking for. This post assumes the reader has a basic understanding of how to set up paths with node JS, and...
gulp.watch going into endless loop
javascript,node.js,gulp,gulp-watch
I think your problem comes from your html watcher. The fact you're watching for changes on all your .html files to launch the html task, that is injecting references to your scripts and your styles files into the index.html will cause this infinite loop. Just when the files are finished...
How to Gulp-Watch Multiple files?
gulp.task('default', ['css', 'browser-sync'] , function() { gulp.watch(['sass/**/*.scss', 'layouts/**/*.css'], ['css']); }); sass/**/*.scss and layouts/**/*.css will watch every directory and subdirectory for any changes to .scssand .css files that change. If you want to change that to any file make the last bit *.*...
BrowserSync showing message 'Disconnected from BrowserSync'
It looks like he just fixed whatever the bug was in 2.7.1. Updating Browser-sync fixed the issue for me :)
Gulp SASS Task No longer 'Watches' Since Adding Media Queries
css,sass,gulp,gulp-watch,gulp-sass
Looks like your configuration wasn't doing anything except running sass only when styles.scss changed. Gulp watch needs the files to watch, and the process to run - gulp.watch([source], [task]); Try this below. // Watch Files For Changes gulp.task('watch', function() { gutil.log("Watching your files...") gulp.watch(paths.js, ['scripts']); gulp.watch('assets/css/*.scss', ['sass']); }); ...
Declaring optional dependencies
I don't believe gulp supports the concept of optional dependencies. I believe what you need is run-sequence. It'll allow you to do this: var sequence = require('run-sequence'); gulp.task('mySequence', sequence( ['task1', 'task2'], // ok to run these in parallel 'task3' // will not run until 1 and 2 are both completed...
Running gulp.watch server-side causes changed files to miss in the results
javascript,sass,gulp,gulp-watch
Write delay of SSHFS probably. So you might want to wrap the code execution in a Timeout to work around this problem Edited: As Commented by Null Pointer exception, i clarify my answer: Over SSHFS there is a write delay of the acutal content of the file. So the watch...
Live reload for electron application
I was able to achieve this with the gulp-livereload plugin. Here is the code to livereload CSS ONLY. It's the same for everything else though. var gulp = require ('gulp'), run = require('gulp-run'), livereload = require('gulp-livereload'), uglify = require('gulp-uglify'), concat = require('gulp-concat'), rename = require('gulp-rename'), minifycss = require('gulp-minify-css'), jshint =...
If gulp is watching conditional
How about: gulp.task('styles', function(){ var destPath = isWatching ? '.tmp/css/' : 'dist'; return gulp.src('sass/**/*.scss') .pipe(sass()) .pipe(gulp.dest(destPath)); }); ...
Gulp with watchify/browserify runs twice then stops watching
gulp,browserify,gulp-watch,watchify
Here's what my new working gulp file looks like. Hasn't given me any problems and accomplishes the same thing. Pretty sure @Ben was correct - gulp.watch and wathcify were conflicting. var gulp = require('gulp'); var source = require('vinyl-source-stream'); var browserify = require('browserify'); var watchify = require('watchify'); var reactify = require('reactify');...
Gulp.js serve src files WITHOUT browserSync?
javascript,node.js,gulp,gulp-watch,browser-sync
Here's how to deprecate BrowserSync in favor of gulp-connect, a simple and stable Gulp plugin to run a webserver (with LiveReload). New gulp/server.js: 'use strict'; var gulp = require('gulp'); var util = require('util'); var connect = require('gulp-connect'); module.exports = function(options) { function createServerTask(name, pre, root) { gulp.task(name, pre, function() {...
issue with piping gulp-watch into gulp-ruby-sass
It seems the "solution" is to use gulp-sass for this instead of gulp-ruby-sass. I still do not know why gulp-ruby-sass doesn't support this since piping the results of gulp.src() into and out of gulp-ruby-sass works like a champ, but it doesn't. I wonder if gulp-watch returns a different file format...
gulp-assemble & gulp-watch not recompiling site when changes are made to data, includes or layouts
gulp-watch will only execute code inside the function for the default task, so to get things like data and layouts to reload, you'll need to move those pieces of code to inside the function (Just before gulp.src). var gulp = require('gulp'); var htmlmin = require('gulp-htmlmin'); var extname = require('gulp-extname'); var...
Gulp task outputs fine when run manually, fails to output when used in gulp.watch
Ok so my hacky way to fix the problem with jetbrains (im using phpstorm), you gotta understand 2 things. gulp watchers act on file save. jetbrains will not auto update the project files (as you have found out it uses a cache). To get around this problem i created a...
Gulp task not waiting the completion of the previous task
javascript,gulp,gulp-watch,gulp-rev
Your scripts task is not returning any value. When you do not return anything gulp have no way to know when the task is finished, therefore continues to the next one. simply say gulp.task('scripts', function() { // other stuff... var b = browserify(mainscript); return b.external('External') ... In case your task...
Gulp pipe to separate destination folders
I believe you can process one file at a time with gulp.watch: gulp.task('less:watch', function() { gulp.watch('src/**/less/**/*.less',function(evnt) { return gulp.src(evnt.path) .pipe(less({ paths: [ path.join(__dirname, 'less', 'includes') ] })) .pipe(gulp.dest(path.dirname(evnt.path))) .on('error', gutil.log); }); }); ...
gulp watch “TypeError: Object function (server)”
Be sure to check your gulp -v, make sure it is up to date and then you can check to make sure your packages are up to date npm outdated --depth=0 — https://docs.npmjs.com/cli/outdated This should fix the issue....
Gulp sass watch Missing property value with *.scss
sass,gulp,gulp-watch,gulp-sass
The issue here is that your *.scss glob takes everything with no special order. So the _theme.scss file could be picked first, and because it's using variables from the _imports.scss one that's not processed yet, you've got the error. To prevent this, you could use an array specific pattern to...
How do I run gulp eslint continuously and automatically while fixing files — how to set up watch
javascript,gulp,gulp-watch,eslint
Just add a watch task: gulp.task('watch', function() { gulp.watch('components/myjs.js', ['lint']); }); This way Gulp will track any changes on your 'components/myjs.js' and execute your 'lint' task on any change If you want further reading: https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js...
Gulp configuration not working
gulp,gulp-watch,gulp-sass,gulp-concat,gulp-uglify
gulp-ruby-sass changed it's API recently. So you can't pipe something through to the Sass task, but rather need to start with it. Much like browserify does. gulp-ruby-sass creates a stream, though, so the rest of the pipe should work fine: gulp.task('styles', function() { return sass(PATH.SRC.SASS, { style: 'expanded' }) .pipe(autoprefixer({...
Gulp.js stops compiling LESS when watched after there has been an error in the LESS files
javascript,gulp,gulp-watch,gulp-less
It works now! Here is my final, and working, gulp-less task: gulp.task('less', function() { return gulp.src(['src/main/webapp/styles/main.less'], {base: 'src/main/webapp/styles/'}) .pipe(less().on('error', function(err){ gutil.log(err); this.emit('end'); })) .pipe(gulp.dest('src/main/webapp/styles/build')) }); The problem was that, when there was an error in the LESS the task still went on and built the destination file. On top of...
How do I prevent gulp watch from crashing (e.g. stop watching) when using elixir in laravel 5?
laravel-5,gulp,gulp-watch,laravel-elixir
The problem gulp watch is set to stop when an error is detected, thus forcing the need to do a manual restart of gulp watch. Irritating. The solution (not elegant, but it works) First, my gulp.js as is now: var gulp = require('gulp'), elixir = require('laravel-elixir'), plumber = require('gulp-plumber'); gulp.task('default',...
gulp + browser-sync - why gulp errors on removing directory from app?
The problem here was an outdated version of BrowserSync. Updating to the latest version will solve this issue....
Why don't newly added files trigger my gulp-watch task?
gulp,gulp-imagemin,imagemin,gulp-watch
Most likely such kind of questions are redirected to gaze package and its internal processes, that runs complicated watching procedures on your OS. In this case you should pass images/**/* to glob option, so gaze will watch all (including new) files in images directory: var gulp = require('gulp'); var watch...
Enabling gulp-watch conditionally with gulp-if (or something else)
javascript,build,gulp,gulp-watch,gulp-less
gulp-watch is an endless stream, so if called it will never allow the process to exit. Your task always call watch() in order to pass it to gulpif even when the if won't need it. This means you will be running an unattached watcher. Additionally, the watcher needs to be...
Gulp watch…isn't watching?
Yes, because the watch task was not called. Add the watch to your default task // Default task gulp.task('default', ['watch'], function() { gulp.start('styles', 'scripts', 'images'); }); ...
How to detect css theme and work only with this theme?
That is indeed a tough one, but here is a solution. Please refer to the comments in the code for an explanation. version 1 var gulp = require('gulp'); var merge = require('merge2'); var $ = require('gulp-load-plugins')(); var path = require('path'); var options = {}; options.themes = [ 'default', 'rockStar', 'oneMoreTheme'...
Browserify errors ending gulp watch task
javascript,node.js,gulp,browserify,gulp-watch
If you don't handle the error event, the stream will throw. You could handle the event directly: gulp.task('browserify', function() { browserify(config.paths.browserifyEntry) .transform(reactify) .bundle() .on('error', console.error.bind(console)) .pipe(source('master.js')) .pipe(gulp.dest(config.paths.dist)); }); Or you could catch the error after it throws: process.on('uncaughtException', console.error.bind(console)); ...
Gulp-livereload, -webserver and -embedlr. How to use them together?
javascript,gulp,livereload,gulp-watch,gulp-livereload
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,...
Gulp - Pass parameter to inner function
javascript,parameter-passing,gulp,gulp-watch
Try using function(e) instead of function(e, groupName). it might be setting the variable groupName with undefined for your closure. the change callback only returns one argument I think.
Constant EBUSY issues on Windows
windows,node.js,gulp,gulp-watch
So I'm not entirely sure about this because I don't run Windows, but here's some pointers: Like I mentioned in the comment, always return your streams from gulp tasks. That way gulp's task manager knows when the task finishes and can properly sequence your dependencies. If you are overwriting files...
Issue with task not executing when using gulp with run-sequence
gulp,gulp-watch,run-sequence,gulp-jscs
After spending a number of hours researching the cause of the issue, I narrowed it down to the fact that JSCS throws an error when it determines that the code it has checked doesn't abide by the specs set by the user. When this error is thrown, it inhibits subsequent...
Browser-sync (under gulp) doesn't refresh browser
javascript,gulp,gulp-watch,gulp-livereload,browser-sync
I figured it out: browser-sync doesn't like implicit html tags, so this (although valid HTML5) will not work: <!doctype html> <title>implicit</title> but this will: <!doctype html> <html> <head> <title>full doc</title> </head> <body></body> </html> ...