Gulp is a development automation tool. It allows us to pipe files through a succession of pipline stages. Each stage can transform the files in the pipe.
For example, we might a pipeline to:
Concatenate your script into a single file.
Save the concatenated file as app.js.
Reload the web browser so you can see the changes.
Save the minified code again as app.min.js.
Gulp has a concept of streams. A stream is a set of files that can be transformed.
We create a stream using gulp.src, then pipe it through different functions which can transform the stream in a variety of ways. We can optionally pipe our stream back out onto the filesystem at any point using gulp.dest.
We use gulp for:
Anything else we can think of…
We configure gulp using a file called gulpfile.js. By convention, this lives in our project root. Our gulpfile contains a set of tasks that we would like to automate.
We extend the capabilities of Gulp using modules, which are installed using npm. Here are some useful ones:
sass - CSS precompilation
Concat - Script concatenation
Autoprefixer - Automatically add vendor prefixes to CSS
Header - Adds a header to the file
Size - Outputs the size of a minified file
We execute this task with:
We can tell gulp to watch our filesystem for changes, and execute a task whenever a file is modified.
Now we might create a default gulp task:
We can now set our gulp task running simply by typing gulp at a command line.
Exercise - JSHint
Install Gulp and the gulp-cli using npm. Note that currently gulp has to be installed locally in your project, so we omit the -g flag.
npm install gulp
npm install gulp-cli -g
Test your installation:
first install the gulp-jshint dependency
Now create a gulpfile containing something like the following:
Now run gulp js to execute the task:
Any errors? You may need to introduce an error to see the effect.
Set up Gulp to automatically validate the code in your node server. When you save the file, it should give you an error if you have made a mistake.
Piping out a stream
We can make transformations to our code right in the stream, and then at any point, pipe it out into a file. We might pipe it out more than once if we want to.
Exercise - Pipe out
Remember you will need to npm install gulp-concat and gulp-uglify.
Now integrate this with the lint exercise above. Make a task that will first lint your code, then concat and minify.
Angular Exercise - ngAnnotate
ngAnnotate is a project that will convert Angular round brace injectors into minification safe square brace injectors.
Use yo to generate a simple express site. Fire it up with by running Gulp.
Try to add another route
Exercise - Gulp
Gulp is watching your project. Every time you change a view file, your browser will refresh.
Make a change to the SASS file and watch the browser reload automatically. This is a massive productivity gain, especially with multiple screens.
You ay need to install the livereload Chrome plugin.
Exercise - Modify a view
Look in your views folder. You'll find a file called layout.jade. Jade is an html preprocessor with semantic indentation. You don't need to use angled braces or close your tags, it handles that for you.