#Npm gulp and express livereload install
#Npm gulp and express livereload full
#Npm gulp and express livereload code

It all depends on wether you need to launch express on its own or just use it when running other tasks. Then we could have called it via n inside the default task. We'd just needed to wrap it in a gulp.task call. The express startup could also have been a task of its own. The gulp command now pops up a server, and if you point your browser to you should see the content of you index.html This gives us the following Gulp configuration to start up Express. Gulp encourages to use the libraries as is when the task has nothing to do with manipulating streams, like popping up a web server, launching tests… This makes running Express with Gulp pretty much the same as when creating a standalone Express app. You'll notice we're installing the actual express package and not a specific plugin for Gulp. To get Express to host our project's file, we'll need a new dependency in the project. As the command provides no specific task, it will run whatever default defines. To run your “build”, just go gulp in your command line.

#Npm gulp and express livereload code

If you don’t want to leave your Gulpfile empty and already start playing with Gulp, you could fill it with the following code that provides a default “Hello world”-ish Gulp task.

a Gulpfile.js file to store Gulp configuration:.

#Npm gulp and express livereload install

a local install of gulp in your project ( npm install gulp from your project's folder, no -g this time),.

a package.json file to store the project's dependencies ( npm init will help you scaffold one),.

an index.html file (content is up to you, just make sure it has a ),.

As a starting point, we’ll use a simple folder containing: Now the gulp command is available, let's bootstrap our project. A quick npm call will sort that (don't forget to sudo if your system requires it, I always do :s): npm install -g gulp. Then we’ll add the livereload configuration.īut first of all, you'll need the gulp CLI installed on your system. We'll split this in two steps and start with the Express setup.

So let's get started on this Gulp + Express + Livereload configuration. To give a quick example, this is how a Gulp task for Javascript validation with JSHint looks like:

This apparently adds some performance improvements to the readability, though I have not really paid attention to that. Gulp is also meant to work a lot with streams doing small processings, `pipe()`-ing them to one another to create small treatment pipelines for each task. I find this makes things easier to read, but this is pretty subjective ). The most interesting point for me was the structure of the configuration file, which is more “programmatic” and less declarative. Pretty much like Grunt, Gulp allows you to define a set of tasks and run them from the command line. Curious, I've given it a quick go to see how hard it would be to get the minimal express & livereload setup I did with Grunt.

#Npm gulp and express livereload full

You can find the full code as an example on my git repo.There's been a new name making some buzz in world of JS task runners lately: Gulp. In the last article we ended up with gulpfile.js that looks like this const = require('gulp') Ĭonst cleanCSS = require('gulp-clean-css') Ĭonst liveReload = require('gulp-livereload') Įfault = series(minif圜SS, minifyJS) we agree that to access a task we either run gulp for public tasks or just gulp to run the default flow.īut to be honest, it's a little bit tedious to run the command every time we modify a file, whether it's a big or a small change, don't worry gulp has an easy way to keep watching for files changes and run any task you specify. In the previous article, we talked about gulpjs and we managed to create a couple of gulp tasks.