Spinning up a local server with gulp

Written by Kevin Hougasian

Setting up a local server comes in many flavours today. My goto was the Apache vhost.conf/hosts combo, now to load something quickly - Gulp.


We’re going to assume you have node and npm up and running in your dev environment, if not there’s a good article here for mac.

{: .ui.info.message} Git users: Don’t forget to add node_modules/ to your .gitignore file.

Let’s prime the project and install the packages we’re going to need for a straight http server.

$ cd /path/to/my/project
$ npm init

npm is going to ask you a few questions to setup your package.json file. The package file keeps your set dependencies for this project.

Now let’s install the packages you need, gulp and gulp-webserver. Note, we’re installing gulp globally with -g so all projects have access.

$ npm i gulp -g
$ npm i gulp gulp-webserver --save-dev


Create gulpfile.js requiring the packages we just installed.

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

Now let’s create a task for gulp.

gulp.task('server', function() {
  gulp.src('public')	// <-- your app folder
      livereload: true,
      open: true,
      port: 6000	// set a port to avoid conflicts with other local apps

Let’s set a default task and add server so we can simply call gulp, and not gulp server, in your project directory.

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

Not much help here, although, as you add additional gulp packages, gulp-sass maybe, lint, minify, you’ll see the benefits.

So for now, run gulp in your root directory and your local server is running.

Running php, no problem, there’s help here.

Published September 29, 2017 by

undefined avatar
Kevin Hougasian Lead Frontend Developer

Suggested Reading