It used to work, if I run gulp with one or few instances already running, it will find new port (3001, 3002, 3003, 3004, [...]) and run without any issue.
I tweaked code occasionally and then I noticed that it doesn't work anymore. I don't know when it stopped working and what changed. It demands to run on only port 3000, without automatically finding new port and running on it.
Can anyone look at my gulpfile.js to see anything that is stopping from multiple instances running?
Error:
λ gulp
[19:32:57] Using gulpfile D:\Dev\Projects\NASDAQ\gulp\gulpfile.js
[19:32:57] Starting 'sass'...
[19:32:57] Finished 'sass' after 29 ms
[19:32:57] Starting 'serve'...
[19:33:07] Finished 'serve' after 10 s
[19:33:07] Starting 'default'...
[19:33:07] Finished 'default' after 5.43 μs
events.js:141
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE :::3000
at Object.exports._errnoException (util.js:837:11)
at exports._exceptionWithHostPort (util.js:860:20)
at Server._listen2 (net.js:1231:14)
at listen (net.js:1267:10)
at Server.listen (net.js:1363:5)
at module.exports.plugin (D:\Dev\Projects\NASDAQ\gulp\node_modules\browser-sync\lib\server\index.js:24:25)
at Object.module.exports.startServer [as fn] (D:\Dev\Projects\NASDAQ\gulp\node_modules\browser-sync\lib\async.js:236:52)
at D:\Dev\Projects\NASDAQ\gulp\node_modules\browser-sync\lib\browser-sync.js:149:14
at iterate (D:\Dev\Projects\NASDAQ\gulp\node_modules\browser-sync\node_modules\async-each-series\index.js:8:5)
at D:\Dev\Projects\NASDAQ\gulp\node_modules\browser-sync\node_modules\async-each-series\index.js:16:16
gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "..",
notify: false
});
gulp.watch("../assets/scss/*.scss", ['sass']);
gulp.watch("../**/*").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("../assets/scss/*.scss")
.pipe(plumber())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sass())
.pipe(gulp.dest("../assets/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
I hope this issue can be resolved. Thanks.
Related
I am building a website on gulp, this code snippet basically contains 3 tasks browser-sync jekyll-build stylus, browser-sync task depends upon jekyll-build.
browser-sync works fine but the stylus function in which I am returning a stream is giving a error which is not expected.
Below is my code snippet.
I am returning a stream here which is one of the solutions mentioned in the doc Async Completion but still I get the error.
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
browserSync = require('browser-sync'),
stylus = require('gulp-stylus'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
jeet = require('jeet'),
rupture = require('rupture'),
koutoSwiss = require('kouto-swiss'),
prefixer = require('autoprefixer-stylus'),
imagemin = require('gulp-imagemin'),
cp = require('child_process');
var messages = {
jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};
var jekyllCommand = (/^win/.test(process.platform)) ? 'jekyll.bat' : 'jekyll';
/**
* Build the Jekyll Site
*/
gulp.task('jekyll-build', function (done) {
browserSync.notify(messages.jekyllBuild);
return cp.spawn(jekyllCommand, ['build'], {stdio: 'inherit'})
.on('close', done);
});
/**
* Wait for jekyll-build, then launch the Server
*/
gulp.task('browser-sync', gulp.series('jekyll-build'), function() {
browserSync({
server: {
baseDir: '_site'
}
});
done();
});
/**
* Stylus task
*/
gulp.task('stylus', function() {
return gulp.src('src/styl/main.styl').pipe(plumber())
.pipe(
stylus({
use: [koutoSwiss(), prefixer(), jeet(), rupture()],
compress: true,
})
)
.pipe(gulp.dest('_site/assets/css/'))
.pipe(gulp.dest('assets/css'))
.pipe(browserSync.stream());
});
ERROR SHOWN BELOW
[23:28:52] Using gulpfile ~/berserker1.github.io/gulpfile.js
[23:28:52] Starting 'default'...
[23:28:52] Starting 'browser-sync'...
[23:28:52] Starting 'jekyll-build'...
Configuration file: /home/aaryan/berserker1.github.io/_config.yml
Source: /home/aaryan/berserker1.github.io
Destination: /home/aaryan/berserker1.github.io/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 0.234 seconds.
Auto-regeneration: disabled. Use --watch to enable.
[23:28:52] Finished 'jekyll-build' after 818 ms
[23:28:52] Finished 'browser-sync' after 819 ms
[23:28:52] Starting 'stylus'...
[23:28:53] The following tasks did not complete: default, stylus
[23:28:53] Did you forget to signal async completion?
There is an issue here (whether it is the same as the one in your question we'll see if it helps):
gulp.task('browser-sync', gulp.series('jekyll-build'), function() {
browserSync({
server: {
baseDir: '_site'
}
});
done();
});
I gulp v4 task takes only two arguments - the code above has three. This should be correct:
gulp.task('browser-sync', gulp.series('jekyll-build', function(done) {
browserSync({
server: {
baseDir: '_site'
}
});
done();
}));
Plus, I added the done parameter in the first line. See if this helps.
$ gulp build
[02:36:37] Using gulpfile C:\xampp\htdocs\melodic\gulpfile.js
[02:36:37] Starting 'build'...
[02:36:37] Starting 'clean:dist'...
[02:36:37] Finished 'clean:dist' after 4.63 ms
[02:36:37] Starting 'sass'...
[02:36:37] Starting 'useref'...
[02:36:37] Starting 'img'...
[02:36:37] Starting 'cleancss'...
[02:36:37] Finished 'cleancss' after 37 ms
C:\xampp\htdocs\melodic\node_modules\gulp-useref\node_modules\vinyl-
fs\lib\src\index.js:20
throw new Error('Invalid glob argument: ' + glob);
^
Error: Invalid glob argument:
at Object.src (C:\xampp\htdocs\melodic\node_modules\gulp-
useref\node_modules\vinyl-fs\lib\src\index.js:20:11)
at DestroyableTransform.addAssetsToStream
(C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:62:15)
at C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:124:31
at Array.forEach (native)
at DestroyableTransform.processAssets
(C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:115:11)
at C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:178:31
at Stream.<anonymous> (C:\xampp\htdocs\melodic\node_modules\gulp-
useref\node_modules\event-stream\index.js:318:20)
at _end (C:\xampp\htdocs\melodic\node_modules\through\index.js:65:9)
at Stream.stream.end
(C:\xampp\htdocs\melodic\node_modules\through\index.js:74:5)
at DestroyableTransform.onend
(C:\xampp\htdocs\melodic\node_modules\through2\node_modules\readable-
stream\lib\_stream_readable.js:577:10)
I have tried to remove the running tasks one by one but to no avail. What throws me off also is the fact that it seems to run through all the tasks and even finishing them and then crashing as the last task is finished. Thanks in advance.
EDIT: Here is my gulpfile as I forgot to include it.
var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
//Requires browser synch
var browserSync = require('browser-sync').create();
//Requires userref
var useref = require('gulp-useref');
//Requires uglify
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
//Requires cssnano
var cssnano = require('gulp-cssnano');
//Requires imagemin
var imagemin = require('gulp-imagemin');
//Requires cache
var cache = require('gulp-cache');
//Requires del
var del = require('del');
//Requires run-sequence
var runSequence = require('run-sequence');
//requires postcss
var postcss = require('gulp-postcss');
//ACTIVE COMMANDS
/*Run 'gulp browserSync' in commandline.
This task automatically reloads the broswer upon each save of document*/
gulp.task('browserSync', function() {
browserSync.init({
injectChanges: true,
server: {
baseDir: "./app"
},
})
});
/*Run 'gulp sass' in command line.
THIS TASK GETS ALL SCSS IMPORTED INTO THE app.scss FILE AND CONVERTS IT INTO app.css.
THIS TASK IS A ONE TIME CONVERSTION*/
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.stream({match: '**/*.css'}));
});
/*Run 'gulp watch' in command line.
THIS TASK GETS ALL SCSS AND OTHER FILE TYPES AND CONVERTS THEM ACITVELY.
THIS TASK IS ONGOING*/
gulp.task('watch', ['browserSync', 'sass'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
});
//PRODUCTION/FINAL COMMANDS
/*Run 'gulp useref' in command line.
THIS TASK GETS ALL CSS AND OTHER FILE TYPES AND JOINS DIFFERENT FILES AND MINIMIZES THEM IN THE DIST FOLDER.
*/
gulp.task('useref', function(){
return gulp.src('app/*.html')
.pipe(useref())
// Minifies only if it's a JavaScript file
.pipe(gulpIf('*.js', uglify()))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'))
});
gulp.task('cleancss', function () {
return gulp.src('./src/*.css')
.pipe(postcss())
.pipe(gulp.dest('./dest'));
});
/*Run 'gulp img' in command line.
MINIMIZSES PHOTOS TO THE DIST FOLDER*/
gulp.task('img', function(){
return gulp.src('app/img/**/*.+(png|jpg|gif|svg)')
.pipe(imagemin({
// Setting interlaced to true
interlaced: true
}))
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest('dist/img'))
});
/*Run 'gulp fonts' in command line.
CLEANS THE DIST DIRECTORY FOR UNUSED FILES*/
gulp.task('clean:dist', function() {
return del.sync('dist');
});
/*Run 'gulp fonts' in command line.
CLEANS THE IMAGE CACHE CREATED EARLIER*/
gulp.task('cache:clear', function (callback) {
return cache.clearAll(callback)
});
gulp.task('build', function (callback) {
runSequence('clean:dist',
['sass', 'useref', 'img', 'cleancss'],
callback
)
});
gulp.task('default', function (callback) {
runSequence(['sass','browserSync', 'watch'],
callback
)
});
EDIT: Included my gulpfile for further details.
So I'm trying to compile pug (jade), javascript and sass files with Gulp V4, and using browserSync to reload the browser when any of these files change. There are a lot of guides out there, but no matter which way I write the code, it just doesn't seem to get the task order right. Im using gulp.series to set the task order, but browserSync doesn't want to play ball.
Here's a print of my Gulp file:
var gulp = require('gulp'),
... etc.
var paths = {
sass: ['src/scss/**/*.scss'],
js: ['src/js/**/*.js'],
pug: ['src/**/*.pug']
};
// Shared Tasks:
//*------------------------------------*/
gulp.task('clean', function(done){
del(['dist/assets/**/*.css', 'dist/assets/**/*.map', 'dist/assets/**/*.js']);
done();
});
// App Specific Tasks:
//*------------------------------------*/
// Sass
gulp.task('build-sass', function(){
gulp.src(paths.sass)
return sass(paths.sass, {
style: 'expanded'
})
.on('error', sass.logError)
.pipe(prefix('last 2 version', '> 1%', 'ie 8', 'ie 9'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/assets/css'))
.pipe(cleanCSS({ advanced: false, keepSpecialComments: 0 }))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/assets/css'));
});
// JS
gulp.task('build-js', function(done){
gulp.src(paths.js)
.pipe(concat('all.js'))
.pipe(gulp.dest('dist/assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('dist/assets/js'))
done();
// Pug
gulp.task('build-pug', function buildHTML(done){
gulp.src(['src/**/*.pug'], {
base: 'src'
})
.pipe(pug())
.pipe(gulp.dest('./dist/'))
done();
});
// Service Tasks:
//*------------------------------------*/
// Delete the compiled views dir.
gulp.task('remove', function(done){
del(['dist/views/**/']);
done();
});
// Serve the site locally and watch for file changes
gulp.task('serve', function(done){
browserSync.init({
server: {
baseDir: './dist/',
notify: false,
open: false
}
});
// Watch & Reload Pug Files
gulp.watch([paths.pug], gulp.series('build-pug')).on('change', browserSync.reload);
// Watch & Reload Sass Files
gulp.watch([paths.sass], gulp.series('build-sass')).on('change', browserSync.reload);
});
gulp.task('default', gulp.series('clean', 'build-sass', 'build-js', 'build-pug', 'remove', 'serve', function(done){
done();
}));
And the terminal console log outputs this when starting gulp:
$ gulp
[13:09:33] Using gulpfile ~/Dropbox Aaron/Dropbox (Personal)/01_Me/01_Dev/01_My Work/*Template/gulpfile.js
[13:09:33] Starting 'default'...
[13:09:33] Starting 'clean'...
[13:09:33] Finished 'clean' after 2.64 ms
[13:09:33] Starting 'build-sass'...
[13:09:33] Finished 'build-sass' after 443 ms
[13:09:33] Starting 'build-js'...
[13:09:33] Finished 'build-js' after 4.42 ms
[13:09:33] Starting 'build-pug'...
[13:09:33] Finished 'build-pug' after 3.15 ms
[13:09:33] Starting 'remove'...
[13:09:33] Finished 'remove' after 656 μs
[13:09:33] Starting 'serve'...
[BS] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://10.130.91.51:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://10.130.91.51:3001
-------------------------------------
[BS] Serving files from: ./dist/
And this when I change a file within the watched files:
[BS] File changed: src/scss/4_elements/_elements.page.scss
[13:12:33] Starting 'build-sass'...
[13:12:34] write ./style.css
[13:12:34] Finished 'build-sass' after 366 ms
So what seems to me to be happening in this instance, the file is changing, browserSync reloads the page, and then 'build-sass' starts. Which is the wrong way round. I obviously want to build the sass, then reload the page. I have to save 2 times for the browser to refresh the code I want.
Some of the code I've used is directly from the browserSync documentation:
https://www.browsersync.io/docs/gulp#gulp-reload
This doesn't seem to work.
Your log output looks right. First it runs 'default' and then your series of tasks. Later when you modify a sass file, it starts 'build-sass'. The only problem is it doesn't reload via browserSync.reload(). So I believe the problem may be here:
gulp.watch([paths.sass], gulp.series('build-sass')).on('change', browserSync.reload);
I highly recommend
https://github.com/gulpjs/gulp/blob/4.0/docs/recipes/minimal-browsersync-setup-with-gulp4.md
that is the gulp4.0 recipe to do exactly what you are trying to do. I am using pretty much what they have there, so if you have problems getting their code to work I can help. Here is my working code:
function serve (done) {
browserSync.init({
server: {
baseDir: "./",
index: "home.html"
},
ghostMode: false
});
done();
}
function reload(done) {
browserSync.reload();
done();
}
var paths = {
styles: {
src: "./scss/*.scss",
dest: "./css"
},
scripts: {
src: "./js/*.js",
dest: "./js"
}
};
function watch() {
gulp.watch(paths.scripts.src, gulp.series(processJS, reload));
gulp.watch(paths.styles.src, gulp.series(sass2css, reload));
gulp.watch("./*.html").on("change", browserSync.reload);
}
var build = gulp.series(serve, watch);
gulp.task("sync", build);
function sass2css() {
return gulp.src("./scss/*.scss")
.pipe(cached("removing scss cached"))
// .pipe(sourcemaps.init())
.pipe(sass().on("error", sass.logError))
// .pipe(sourcemaps.write("./css/sourceMaps"))
.pipe(gulp.dest("./css"));
}
function processJS() {
return gulp.src("./js/*.js")
.pipe(sourcemaps.init())
// .pipe(concat("concat.js"))
// .pipe(gulp.dest("./concats/"))
// .pipe(rename({ suffix: ".min" }))
// .pipe(uglify())
.pipe(sourcemaps.write("./js/sourceMaps/"))
.pipe(gulp.dest("./js/maps/"));
}
Note the general use of functions instead of 'tasks' and particularly the reload(done) function. You might try simply adding that to your watch statements like
gulp.watch([paths.sass], gulp.series('build-sass', reload);
after you have added the reload function, that might be enough to fix your problem without making all the other changes as in my code. Or you might simply have to add a return statement to your 'build-sass' task so gulp knows that task has completed. Good luck.
I have set up gulp so that it will reload when the gulpfile is modified. That basic process is working, but for some reason it seems the old tasks are not being terminated properly.
var gulp = require('gulp');
var less = require('gulp-less');
var spawn = require('child_process').spawn;
gulp.task('default', function(){
var p;
if(p)
p.kill();
p = spawn('gulp', ['watch'], {stdio: 'inherit'});
});
gulp.task('watch', ['styles', 'watch-styles', 'watch-gulp']);
gulp.task('styles', function(){
return gulp.src('./**/*.less')
.pipe(less())
.pipe(gulp.dest('./'))
});
gulp.task('watch-styles', ['styles'], function(){
gulp.watch('./**/*.less', ['styles']);
});
gulp.task('watch-gulp', ['styles'], function(){
gulp.watch('./gulpfile.js', ['default']);
});
That is a basic gulpfile that demonstrates the problem. When I tweak that gulpfile to cause it to reload I receive this in the console:
[11:21:02] Starting 'default'...
[11:21:02] Finished 'default' after 5.25 ms
[11:21:02] Using gulpfile ~/repo/gulp-reload/gulpfile.js
[11:21:02] Starting 'styles'...
[11:21:02] Finished 'styles' after 34 ms
[11:21:02] Starting 'watch-styles'...
[11:21:03] Finished 'watch-styles' after 669 ms
[11:21:03] Starting 'watch-gulp'...
[11:21:03] Finished 'watch-gulp' after 1.83 ms
[11:21:03] Starting 'watch'...
[11:21:03] Finished 'watch' after 2.92 μs
Then modifying a less file within the directory gives this output
[11:21:24] Starting 'styles'...
[11:21:24] Finished 'styles' after 8.95 ms
[11:21:24] Starting 'styles'...
[11:21:24] Finished 'styles' after 2.92 ms
Each subsequent restart seems to lead to an additional call to styles, as if the old watchers are still there.
I created a small repo on Github with this example project as well.
In this task:
gulp.task('default', function(){
var p;
if(p)
p.kill();
p = spawn('gulp', ['watch'], {stdio: 'inherit'});
});
p is never defined, because you always create a new variable when you call that function. Also, you don't have a pointer to your own process which you want to kill. A safer way would be to end all the other watchers by hand:
gulp.task('watch-styles', ['styles'], function(){
var watcher = gulp.watch('./**/*.less', ['styles']);
watchers.push(watcher);
});
gulp.task('watch-gulp', ['styles'], function(){
var watcher = gulp.watch('./gulpfile.js', ['default']);
watchers.push(watcher);
watcher.on('change', function(){
watchers.forEach(function(el){
el.end();
})
})
});
Everytime I run my gulp task, it generates a error on first run. The error is below. When I run it again, it builds without any error.
I am confused, why does it throw an error the first time but not after that.
[08:38:08] Using gulpfile ~/Documents/Code/proj2/Gulpfile.js
[08:38:08] Starting 'stylus'...
[08:38:08] Finished 'stylus' after 7.99 ms
[08:38:08] Starting 'copyClientHTML'...
[08:38:08] Finished 'copyClientHTML' after 2.27 ms
[08:38:08] Starting 'clientLint'...
[08:38:08] Starting 'demon'...
[08:38:08] Finished 'demon' after 1.88 ms
[gulp] [nodemon] v1.2.1
[gulp] [nodemon] to restart at any time, enter `rs`
[gulp] [nodemon] watching: *.*
[gulp] [nodemon] starting `node server/js/server.js`
[08:38:08] Starting 'watch'...
[08:38:09] Finished 'watch' after 31 ms
events.js:72
throw er; // Unhandled 'error' event
^
Error: ENOENT, stat '/Users/jhans/Documents/Code/proj2/client/build/index.html'
Including Gulpfile.
/*jshint globalstrict: true*/
'use strict';
var gulp = require('gulp'),
browserify = require('gulp-browserify'),
clean = require('gulp-clean'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
stylus = require('gulp-stylus'),
del = require('del'),
nodemon = require('gulp-nodemon'),
concat = require('gulp-concat');
var paths = {
client: {
scripts: 'client/js/**/*.js',
html: 'client/views/*.html',
index: 'client/*.html',
css: 'client/css/*.styl',
conf: 'client/conf.js'
},
server: {
scripts: 'server/js/**/*.js'
}
};
// Rerun the task when a file changes
gulp.task('watch', function () {
gulp.watch(paths.client.css, ['stylus']);
gulp.watch(paths.client.scripts, ['browserify']);
gulp.watch([paths.client.html, paths.client.index], ['copyClientHTML']);
gulp.watch(paths.server.scripts, ['serverLint']);
});
gulp.task('demon', function () {
nodemon({
script: 'server/js/server.js',
ext: 'js',
env: {
'NODE_ENV': 'development'
}
})
.on('start', ['watch'])
.on('change', ['watch'])
.on('restart', function () {
console.log('restarted!');
});
});
// Default Task
gulp.task('default', ['build', 'demon']);
gulp.task('build', ['stylus', 'copyClientHTML', 'browserify']);
/********** Building CSS *********/
gulp.task('stylus', function () {
del(['client/build/css/*']);
gulp.src(paths.client.css)
.pipe(stylus())
.pipe(concat('all.css'))
.pipe(gulp.dest('client/build/css/'));
});
gulp.task('clientLint', function () {
return gulp.src([paths.client.scripts])
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
gulp.task('serverLint', function () {
return gulp.src([paths.server.scripts])
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
gulp.task('browserify',['clientLint'], function () {
del(['client/build/js/*']);
gulp.src('client/js/app.js')
.pipe(browserify({
insertGlobals: true,
debug: true
}))
.pipe(gulp.dest('client/build/js'));
});
gulp.task('copyClientHTML', function () {
del(['client/build/views/*.*']);
del(['client/build/index.html']);
gulp.src(paths.client.html)
.pipe(gulp.dest('client/build/views'));
gulp.src(paths.client.index)
.pipe(gulp.dest('client/build'));
});
Your problem might come from your copyClientHTML task (and potentially some others).
Indeed, you have to know that the del module does not run synchronously. So it might delete your files after there were created, and can explain the issue you're experiencing.
I may advice you to create a task dedicated to the cleaning of your files that you can put as dependency of some of your tasks; or better a little function where you can pass a parameter to clean specified folders.
This will ensure you that the cleaning is finished before creating the new files.