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'); }); ...
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 =...
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...
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...
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,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...
How about: gulp.task('styles', function(){ var destPath = isWatching ? '.tmp/css/' : 'dist'; return gulp.src('sass/**/*.scss') .pipe(sass()) .pipe(gulp.dest(destPath)); }); ...
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...
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...
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...
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)); ...
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,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...
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...
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); }); }); ...
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...
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']); }); ...
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',...
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.
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,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');...
It looks like he just fixed whatever the bug was in 2.7.1. Updating Browser-sync fixed the issue for me :)
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> ...
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'...
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...
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...
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() {...
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...
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,...
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...
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....
The problem here was an outdated version of BrowserSync. Updating to the latest version will solve this issue....
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 *.*...