Spinning up a local server with gulp

Written by Kevin Hougasian
2
This post is days old.

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.

Setup

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.

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

Gulpfile.js

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
    .pipe(server({
      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.

Suggested reading

Comments