This makes us 3 steps away from having livereload set up. Npm install tiny-lr connect-livereload -save-dev We'll also need the connect-livereload middleware to inject the Javascript communicating with livereload in the pages served by Express. This means no need for a specific Gulp plugin, we'll just use tiny-lr. Adding some livereload magicĪs for starting up an Express server, starting up a livereload server doesn't have much to do with manipulating streams. 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. 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:.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. My node app is created on port 8080, this is a simplified version of my server.js file: var env = _ENVĪpp.set('port', || 8080) Īpp.engine('jade', require('jade')._express)Īpp.use(express.There's been a new name making some buzz in world of JS task runners lately: Gulp. Following this great article on how to use npm as a build tool, I would like to implement it when building a nodejs express web app.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |