Gulp: Episode 2 - A New Hope

the force will be with you. always

In the previous article, we've learned some theory, so now we can start practicing – we'll write our first task. 

В API gulp є лише 5 методів, все лаконічно і просто -

.src(globs[, options]) receives glob and returns an input stream
.dest(path) receives a path to a file and returns the output stream
.task(name[, deps], fn) defines a task
.run(tasks...[, cb]) runs a task
.watch(glob [, opts], cb) watches for changes in the file system

Let's write our first task that watches .scss files of a project for changes, and if there are any, the files are compiled into .css. To begin with, create an empty  gulpfile.js, all our tasks will be written there. 

Create the 'sass' task and specify which files gulp.src gets when compiling a stream. 

gulp.src('assets/scss/**/*.scss')
The code fragment gulp.src('assets/scss/**/*.scss') compiles all files from the '/assets/scss/ ' directory. The fragment /**/*.scss') compliles all .scss files from both '/scss' directory and subdirectories. 

Here, we handle the errors detected by the gulp-util plug-in in the SASS compiler. At first glance, it may seem not that important, but if we don't catch the errors found by the compiler, they will just stop Gulp. In that case, a user will have to either restart Gulp manually or to connect a processor. 

Next, the stream is processed with autoprefixer. Specific browser prefixes such as -moz, -webkit, etc, will be added to the styles where needed. According to the plug-in parameters, three latest versions will be maintained by the plug-in. 

 

After that, the processed stream is returned, in fact, it is the .css file compiled and processed with autoprefixer . We write it in the '/assets/css/' directory and create a stream, any changes in the stream start livereload.

 

This task is much simpler – we start the livereload server and begin watching the files listed in the parameters.  

 

'sacc' task, separated by a comma in the square brackets, is started by default whenever a change occur in the files that are tracked. When they are changed, and the callback .on( ‘change’) is activated, the livereload server forces a page to reload.

And finally, we register a default task; the task will be performed when Gulp is started without indicating a task name (for example, to start a new 'sass' task, the following command has to be run gulp + ‘task name’ → gulp sass ). Gulp takes it by default if the task is named 'default.'

According to the record in the screenshot above, a default task fetches successively 'sass' and 'watch' tasks.

Now, we have a gulpfile.js set up for SASS compilation, detecting errors, processing with autoprefixer and automatic reload of a page when the files are changed. Run the terminal (alt + f12 в phpStorm) and start Gulp!

As you can see, all tasks were started and completed successfully. We have the test page on which  livereload is installed and running. 

Let's change anything in the layouts.scss and check the result – add a beautiful 5 px border, press Ctrl + S, the changelog is enabled, and the style is updated.

Go back to the page without reloading it and check out the result. 

This way, Gulp is working, it watches for changes and reloads pages. 

Besides style compilation, you will most often have to get on with concatenating script/style into one file, their minimization, and renaming. For these tasks you may use the following plug-ins: gulp-uglify to compress scripts; gulp-concat to concatenate scripts and styles; gulp-rename to rename files.

This is how the tasks look like

Nothing complicated, create a stream from the selected files, concatenate/compress them, save the result in a file you need. 

That's it for today, in the last article we'll deal with the speed of Gulp and run tasks sequentially in Gulp. 

*the illustration to the article is taken from Star Wars: Episode IV: A New Hope

Let’s fill the brief, shall we?