schickling / gulp-webserver Goto Github PK

When I have the livereload option set to true it works but there are two issues:

1. It seems like it runs twice when two tasks are run under one watch. example in config:

watch([
    config.js + '/**/*.js',
    '!' + config.js + '/main.js'
], function(files, cb) {
    gulp.start('lint', cb);
    gulp.start('browserify', cb);
});

When I edit a JS file it runs linting and browserify. A reload happens after the lint and a second reload happens after browserify is run. How can I avoid this so that only one reload gets fired (preferably after browserify)?

2. When I edit a sass file and run compass to compile it, a full page refresh happens rather than an injection of the styles (as I was used to happening in Grunt, updated the css without a page refresh, just injected them right in so you don't lose your spot on the page). Here is my config for the Sass watch:

watch(config.sass + '/**/*.scss', function(files, cb) {
    gulp.start('compass-dev', cb);
});

Is there a way to do this with gulp-webserver so that it injects the CSS rather than reloading the page?

Many thanks for any help offered.

An api to filter node-watch. My build includes bower_components which is to many files for node-watch.

fs.js:1051
    throw errnoException(process._errno, 'watch');
          ^
Error: watch EMFILE
  at errnoException (fs.js:1019:11)
  at FSWatcher.start (fs.js:1051:11)
  at Object.fs.watch (fs.js:1076:11)
  ...

Here is my configuration:

gulp.src( './build' )
    .pipe(webserver({
        host:             '0.0.0.0',
        port:             4321,
        livereload:       true,
        directoryListing: false,
        fallback: 'index.html',
        https: true,
        key: 'config/grunt-connect/server.key',
        cert: 'config/grunt-connect/server.crt',
        proxies: [{
            context: '/api',
            target: 'https://otherdomain.com/api'
        },
        {
            context: '/content',
            target: 'https://otherdomain.com/content'
        }]
        //ca: 'config/grunt-connect/ca.crt', //unused option? copied from grunt-connect
    }));

Here is the error:

[13:09:11] TypeError: Cannot read property 'handle' of undefined
at Function.app.use (/home/user/Projects/myproject/node_modules/gulp-webserver/node_modules/connect/lib/proto.js:56:30)
at module.exports (/home/user/Projects/myproject/node_modules/gulp-webserver/src/index.js:148:9)
at Gulp.<anonymous> (/home/user/Projects/myproject/gulpfile.js:52:15)
at module.exports (/home/user/Projects/myproject/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/home/user/Projects/myproject/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/home/user/Projects/myproject/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/home/ajbogh/Projects/myproject/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
at process._tickCallback (node.js:415:13)
at Function.Module.runMain (module.js:499:11)

Reviewing the function in question from the TypeError shows that it's trying to get the handle of livereload:

// wrap sub-apps
console.log(fn, fn.handle);
if ('function' == typeof fn.handle) {

Here's the output:

[13:30:31] Starting 'webserver'...
[Function: livereload] undefined

Please, if there is some configuration option that I'm missing, please help me understand. This is for a large project that requires some complex proxy support. I would appreciate the help.

Hello!

I'm trying to use this plugin, here's my gulp task:

gulp.task('webserver', function() {
    gulp.src('./build/')
        .pipe(webserver({
            directoryListing: true
        }))
    ;
});

When I run this task and open URL in the browser I'm getting list of files from the root of the project, not from the build subdirectory. When I try to navigate to the /build/index.html it show me: Cannot GET /build/index.html.

Please advise. Thanks!

gulp --version

[gulp] CLI version 3.6.2
[gulp] Local version 3.8.10

Update

gulp-connect is working fine with the following code:

gulp.task('webserver', function() {
    connect.server({
        root: './build',
        port: 8888,
        fallback: 'index.html'
    });
});

Using gulp-connect I could execute a gulp task and then invoke the reload() function, for example:
gulp.task('views', function () {
gulp.src('./app/views/*/')
.pipe(gulp.dest('dist/views/'))
.pipe(connect.reload());
});
Using gulp-webserver how do I invoke the livereload?

Hi. I currently start the connect server from protractor task like this:

gulp.task('connect', function() {
  gulp.src('.')
    .pipe(webserver({
      port: 9001
    }));
});

gulp.task('protractor', ['connect'], function() {
  gulp.src(paths.e2e)
    .pipe((protractor({
      configFile: 'build/protractor.conf.js'
    })).on('error', function(e) {
      throw e;
    }));
});

The problem is that the protractor task never ends. Is it possible to enable a single run mode, so it exits the task when gulp protractor task is finished?

Getting this error after updating to Yosemite:

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: getaddrinfo ENOTFOUND
    at errnoException (dns.js:37:11)
    at Object.onanswer [as oncomplete] (dns.js:124:16)

Using the following code, the web server still launches at the root folder of the project.
Any idea why this is?

gulp.task('webserver', function() {
gulp.src('app')
.pipe(webserver({
livereload: true,
directoryListing: true,
open: true
}));
});

https://github.com/schickling/gulp-webserver/blob/master/src/index.js#L207

I would like to start a server, do smoke tests, then immediately close the server.

On my Mac, I get this error when I enable livereload:

2014-08-25 09:10 gulp[26913] (CarbonCore.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)

This is my Gulp task:

gulp.task('serve', ['styles'], function () {
  return gulp.src('.')
    .pipe(webserver({
      livereload: true,
      open: true,
      fallback: 'index.html'
    }));
});

On a MacBook Pro running OS X 10.9.4 Mavericks

This is my gulp webserver task:

gulp   = require "gulp"
$      = do require "gulp-load-plugins"
gulp.task "webserver", ->
  gulp.src "dist"
    .pipe $.webserver(
      directoryListing : true
      host             : "0.0.0.0"
      port             : 9000
    )

When i open up http://127.0.0.1:9000/ it ignores the the gulp.src location i've set and uses the root of the folder. But i can see files being listed:

If i click into a index.html for example inside the dist folder. i get this message on the page.
Cannot GET /dist/index.html

Hi!

I love the autoreload, however, is there a way to get the server so that we can call attach a .changed callback?

I've come across the pain in the ass gulp-compass library. Unfortunately compass does not stream back the files so currently this is the workaround: https://gist.github.com/mouton-rebelle/8434320

With gulp-webserver is it possible to do the same thing, triggering a reload "manually"?

Is it possible to set a different launch path than index.html? I know there's fallback, but that only works when index.html doesn't exist. How trivial is it to force the fallback?

Hi,
I am working on a small static website assembled with gulp and served with gulp-webserver during development. Overall it's working fine, however it seems that live reload via gulp-webserver is somewhat slower to reload as compared to the liveReload.app (all of this on OS X 10.10)

I did not do hard measurements, but it's in the range of 1-2 seconds slower after doing e.g. a touch index.html in the root of the build directory. Not critical, but faster is always good.

Is there an explanation for this or better a fix, can the polling frequency be sped up? At this point I have <25 files watched, so would not expect it to be due to the size of the file tree.

I'm trying to get webserver to proxy to my api on port 8888 which is originally run on vagrant.

The api currently runs on a vagrant machine that forwards to port 8888 locally.
My gulp tasks looks like this

gulp.task('serve', ['watch'], function() {
  gulp.src(['.tmp', 'bower_components', 'vendor'])
    .pipe($.webserver({
      port: 9000,
      livereload: true,
      proxies: [
        {
          source: '/api', target: 'http://localhost:8888/api'
        }
      ]
    }))
    .on('error', shallowError)
})

Prior to learning about webserver being able to proxy I was using Nginx which was working fine.

When running the webserver task with the livereload set to true, I getting some errors on the terminal:

$ gulp server
[10:12:05] Using gulpfile /Volumes/NuggetDev/Projects/personal/sk-browserify/gulpfile.js
[10:12:05] Starting 'server'...
[10:12:05] Webserver started at http://localhost:8000
[10:12:05] Finished 'server' after 23 ms
2014-07-22 10:12 gulp[1158] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)
2014-07-22 10:12 gulp[1158] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)
...
2014-07-22 10:12 gulp[1158] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)
2014-07-22 10:12 gulp[1158] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)

fs.js:1051
    throw errnoException(process._errno, 'watch');
          ^
Error: watch EMFILE
  at errnoException (fs.js:1019:11)
  at FSWatcher.start (fs.js:1051:11)
  at Object.fs.watch (fs.js:1076:11)
  at watch (/Volumes/NuggetDev/Projects/personal/sk-browserify/node_modules/gulp-webserver/node_modules/node-watch/lib/watch.js:221:8)
  at /Volumes/NuggetDev/Projects/personal/sk-browserify/node_modules/gulp-webserver/node_modules/node-watch/lib/watch.js:230:9
  at /Volumes/NuggetDev/Projects/personal/sk-browserify/node_modules/gulp-webserver/node_modules/node-watch/lib/watch.js:41:14
  at Array.forEach (native)
  at /Volumes/NuggetDev/Projects/personal/sk-browserify/node_modules/gulp-webserver/node_modules/node-watch/lib/watch.js:38:18
  at Object.oncomplete (fs.js:107:15)

It works fine with the livereload set to false, but then the gulp-connect is still a better solution for me. Any ideas of what this could be?

I have my index.html defined in the root directory and not in a sub directory ("src"). I can't get my /index.html file to be served no mater what I try. If I run build which puts the minned versions in "dist" and put gulp.src('dist') it works. However, in debug mode (all the time), I just want to serve up the root directory.. How can I do this.

I have the requirement to proxy requests to certain URLs to another URL to avoid CORS-problems during development.

I thought it would be great to add this to your config:

.pipe(webserver({
      host: "0.0.0.0",
      port: 9000,
      livereload: true,
      proxies: [{
        source: '/abc',
        target: 'http://localhost:8080/abc'
      },
      {
        source: '/def',
        target: 'http://localhost:8080/xyz'
      }]
}));

and your requests are being proxied.

Hi,

Any idea why I wouldn't be able to access the server from within a virtual machine?

Other servers I setup on my Mac using the same port work inside the VM but it's only this one that doesn't.

Thanks

Giles

Somehow this does not work for me:

gulp.task('webserver', function() {
    var webserver = require('gulp-webserver')

    gulp.src(settings.server.paths.src)
        .pipe(webserver({
            port:               settings.server.port,
            https:              true,
            livereload:         true,
            directoryListing:   false,
            open:               true
        }))
})

I get a Cannot GET /

I think my ExpressJS app isn't running at all. Do I have to start my node app in a separate task, i.E. with gulp-nodemon? Probably a lame question. Just wondering how you are doing it.

This here is my current task for nodemon and might showcase my problem a bit better:

gulp.task('run', ['default', 'watch'], function() {

    var nodemon = require('gulp-nodemon'),
        spawn   = require('child_process').spawn,
        bunyan

    nodemonInstance = nodemon({
        script: paths.server,
        ext:    'js json',
        ignore: [
            'etc/',
            'var/',
            'node_modules/',
            path.relative(process.cwd(), paths.browser)
        ],
        watch:    [paths.etc, paths.src],
        stdout:   false,
        readable: false,
        quiet:    true
    })
    .on('change', ['lint'])
    .on('readable', function() {
        // free memory
        bunyan && bunyan.kill()

        bunyan = spawn('./node_modules/bunyan/bin/bunyan', [
            '--output', 'short',
            '--color'
        ])

        bunyan.stdout.pipe(process.stdout)
        bunyan.stderr.pipe(process.stderr)

        this.stdout.pipe(bunyan.stdin)
        this.stderr.pipe(bunyan.stdin)
    })
})

If I can replace the above with gulp-webserver that would be great!

Thanks for any hints or examples.

When i clean the build/ folder which will delete build/ folder and again it is created, but the server is not working for recreated build folder.

My code:

var stream = gulp.src('build')
.pipe(gulpPluginLoad.webserver(someConfig));
setTimeout(function () {
open('http://localhost:9000');
}, 100);
return stream;

https://github.com/gulpjs/plugins/blob/master/src/blackList.json#L236

😢

Does webserver have an equivalent to the gulp-connect reload() function?

Hello! I am hoping to replace connect with this webserver. My one hang up so far is that connect had a directory listing option which is helpful when automatically generating a directory full of items which I don't control the naming of. Essentially I'd like to be able to serve a directory that contains no index.html and still have the end user be able to navigate the contents of the directory. Unfortunately the content naming is dynamic or I'd just hard code an index.html file.

Is this a feature request you'd entertain?

Thanks so much.

I have a fairly vanilla setup on Mac OS X Mavericks, but nothing seems to trigger a livereload -- the livereload server itself never seems to start.

The setup in the gulpfile.js is:

gulp.task('webserver', function () {
  gulp.src('.')
    .pipe(plugins.webserver(config.webserver));
})

Where config.webserver is:

  port: 4052
  directoryListing: true
  open: spec/runner.html
  livereload:
    port: 4053

I tried setting livereload to true but it has no impact.

The output from gulp webserver is:

[gulp] Using gulpfile /Users/brianhunt/Repos/knockout-else/gulpfile.js
[gulp] Starting 'webserver'...
[22:00:45] Webserver started at http://localhost:4052
[gulp] Finished 'webserver' after 219 ms

There is noting in the logs that indicates that the livereload server is listening on the given (or default) port. In any case, nothing is actually listening according to lsof -i TCP:4053.

So it would seem the livereload server is not loading for some reason, and no error message is being printed indicating what the failure might be. My cursory review of the code yielded no immediate or obvious causes, so I would be grateful for assistance.

Many thanks in advance.

Great plug-in. I am able to run my gulp command and start the localhost and everything works. The only part of the config that I do not fully understand is how to automatically open the browser.

The documentation says "open:" accepts a boolean / string. I believe the string would be the path. However, I am not sure which path it is referencing. Any assistance with this is much appreciated.

Here is my task:
//Webserver
gulp.task('webserver', function() {
gulp.src('app/builds/development/')
.pipe(webserver({
livereload: true,
directoylisting: false,
open: true
}))
});

It is very helpful that you have mentioned in the FAQ section to use 0.0.0.0 in order to make the server available on the local network.

However, when host is set to 0.0.0.0 and open is set to true, a page is automatically opened to 0.0.0.0:, which does not show any page. On the local machine, the browser still needs to be directed to localhost: in order to successfully render the page.

I don't know if this is something that should be fixed for the actual logic of the open configuration option, but it would at least be nice to mention this in the FAQ section.

In this article :

An alternative to LiveReload is available.
BrowserSync is similar in that it displays changes in the browser, but it has a lot more functionality.
When you make changes to code, BrowserSync either reloads the page or, if it is CSS, injects the CSS, meaning that the page doesn’t need to be refreshed. This is very useful if your website isn’t refresh-resistant.
Suppose you’re developing four clicks into a single-page application, and refreshing the page would take you back to the starting page. With LiveReload, you would need to click four times every time you make a change.
BrowserSync, however, would just inject the changes when you modify the CSS, so you wouldn’t need to click back.

What is your opinion ? Are you agree to replace LiveReload ?

is it possible to use this with a PHP file system? if not do you know of any that do work with php?

We should expose the ignore property of the connect-livereload options. This is useful for specifying paths that should not auto-reload. Useful in the case of scss>css converters like compass where both file types live in one folder that is being watched but only one should trigger a reload.

Hi!

I'm using gulp-webserver with react.js and rackt/react-router, and I'm having issues with your html5 pushstate config.

I'm currently passing fallback: index.html into the webserver task's config, but deep linking (navigating to the link manually by typing it in) doesn't work and throws this error:

Uncaught SyntaxError: Unexpected token < 

to clarify, navigating to http://localhost:1337/ works fine, but navigating to http://localhost:1337/foos/1 does not work when manually typed, but does work when following a link.

Any ideas?

Sending a PR in a moment.

Will it possible to support WS with "proxies section" ?
Example on localhost:8080 : {source: '/sock', target: 'localhost:8000', options: {headers: {'ABC_HEADER': 'abc'}, ws: true}}

Behavior:

• a first call to http://localhost:8080/sock will redirect to http://localhost:8000/sock - and the server returns a redirect for WS (Upgrade:websocket).
• a redirection to ws://localhost:8000/sock

I think it would be great if the FAQ section of the readme had another question: "What does gulp-webserver do that gulp-connect doesn't already do?", along with the answer to that, of course. Would that be just the directoryListing option?

Hello,

I running gulp-webserver and return this error:

/Users/username/Desktop/project/node_modules/gulp-webserver/node_modules/serve-static/node_modules/send/node_modules/etag/index.js:55
throw new TypeError('argument entity must be string or Buffer')
^
TypeError: argument entity must be string or Buffer
at etag (/Users/username/Desktop/project/node_modules/gulp-webserver/node_modules/serve-static/node_modules/send/node_modules/etag/index.js:55:11)
at SendStream.setHeader (/Users/username/Desktop/project/node_modules/gulp-webserver/node_modules/serve-static/node_modules/send/index.js:724:15)
at SendStream.send (/Users/username/Desktop/project/node_modules/gulp-webserver/node_modules/serve-static/node_modules/send/index.js:500:8)
at /Users/username/Desktop/project/node_modules/gulp-webserver/node_modules/serve-static/node_modules/send/index.js:630:12
at Object.oncomplete (fs.js:97:15)

My Gulp File:

var gulp = require('gulp'),
webserver = require('gulp-webserver');

gulp.task('webserver', function() {
gulp.src('build')
.pipe(webserver({
livereload: true,
port: 9001,
open: true
}));

gulp.task('default', [
'webserver'
]);

Has anyone else had problems with requests for files served by gulp-webserver taking a long time (exactly 2 minutes) to be responded to?

It seems to be kind of random, and I have not seen this before with plain old connect or Express.

Is there a verbose logging mode or something else I can do to debug the issue?

Hi!

I'm using gulp-webserver for my AngularJS application. In production my application is served via apache which proxies incoming requests to various locations.

To prevent my client from knowing the api key the apache proxy also adds an authorization header with the api key to each request. Is this somehow possible with gulp-webserver or what is the recommended solution for this?

How to run gulp-webserver after finish all tasks like coffee, jade, compass?

Currently, I have this task to reload webserver when .build/index.html file is changed (see below). The problem is that the server is also reloaded when this file is deleted. Is there a way to reload only when the file is acutally updated?

gulp.task('ws', function () {
  return gulp.src('.build/')
    .pipe(webserver({
      livereload: {
        enable: true,
        filter: function(fileName) {
          return fileName.match(/.build\/index\.html$/) ? true : false;
        }
      }
  }));
});

I need multiple connections. But If I run two webservers I get error EADDRINUSE

gulp.task('webserver', function() {
    gulp.src('./public')
        .pipe(webserver({
            host: 'localhost',
            port: 7000,
            fallback: 'index.html',
            livereload: true
        }));
    gulp.src('./public/build')
        .pipe(webserver({
            host: 'localhost',
            port: 7001,
            fallback: 'index.html',
            livereload: true
        }));
});<

On a Mac, will enabling gzip in my httpd.conf work when using the server created by this plugin? If not, is it somehow possible?

Hi, thanks for this awesome module! I've got an issue where live reload is running before my gulp-watch tasks are complete. I have gulp-webserver configured as follows:

gulp.task('webserver', function() {
  gulp.src(paths.root)
    .pipe(webserver({
      host: 'localhost', //'0.0.0.0',
      port: 3000,
      livereload: true,
      directoryListing: false,
      fallback: 'index.html',
      open: true
    }));
});

index.html is in the root and the generated javascript and css are in a dist folder off root. js, css, ect folders are also in the root. Should I rearrange this so that only generated watched files are the root and development files are 1 level about this? Is there a way to only reload on some file changes?

With gulp-connect we can use connect.reload().

How duplicate this feature with gulp-webserver ?

Hey, I just tested this gulp task and found that if I say directoryListing: true, it somewhat ignores the folder I give it as a root. The weird thing is the following:

return gulp.src('dist') .pipe(webserver({ host: '127.0.0.1' port: 8282 livereload: false directoryListing: false fallback: 'dist/index.html' }))

1. If I open 127.0.0.1:8283 it shows the root directory in which the gulp file is located.
2. If I open 127.0.0.1:8282/dist/index.html it gives me an error that the file is not found.
3. If I open 127.0.0.1:8282/index.html it opens the index.html from the dist directory.
4. If I open 127.0.0.1:8282/dist it shows the content of the dist directory.

I think the directoryListing should use the root I provide in gulp.src as a root. Hope this is fixable.

Thanks for this great plugin!

For properties like livereload, directoryListing and https; which accept both objects or booleans as values, the feature should be auto-enabled when passing an object to the property.

Currently you have to set the enable property in the object to true to enable them.

Can this support multiple directories. In gulp-connect, I would root: ['web', '.tmp']

After testing gulp.src(['web', '.tmp']), it doesn't seem to serve the .tmp directory

I understand that livereload you can not change. But I got permanent errors in the console IE. Please add the check for IE breaking livereload for IE7 and 8

I have this config:

gulp.src('.')
    .pipe(webserver({
        livereload: true,
        directoryListing: true,
        open: true,
        fallback: 'index.html'
    }));

When I run the task, instead of loading index.html, it loads directory listing. If I disable directoryListing, then it works.

Moving the code

  // Proxy requests
  for (var i = 0, len = config.proxies.length; i < len; i++) {
    var proxyoptions = url.parse(config.proxies[i].target);
    if (config.proxies[i].hasOwnProperty('options')) {
      extend(proxyoptions, config.proxies[i].options);
    }
    app.use(config.proxies[i].source, proxy(proxyoptions));
  }

before

if (config.directoryListing.enable) {
    app.use(serveIndex(path.resolve(config.directoryListing.path), config.directoryListing.options));
  }

solves the problem.