It's now time to move on to the second part of the Gulp exercise.
We'll continue doing similar steps as we did in
the second part of the NPM script exercise and the current exercise.
So, we'll arrange for deleting the distribution folder then copying the fonts,
then also rebuilding the distribution folder,
using similar node modules
as what we used for Grant and also the NPM scripts.
Our next step is to set up the tasks for deleting
the distribution folder and also copying the fonts into the distribution folder.
So let's set up a few node modules.
The first one that we will set up is called del.
This node model allows you to delete a folder.
And let's go ahead and set up the Gulp tasks.
With Gulp, fortunately, we don't need to install another module for the sake of copying
because the Gulp streams allow us to do the copying of the files with little effort.
Going to the Gulp file,
I'm going to introduce the mixed Gulp module,
which I will say, del.
And then require the del module here.
So once we require the del module there,
we can go ahead and set up the tasks.
So, we'll set up first the clean task here.
So right after the default task,
I'm going to set up the clean task.
So I will say, Gulp task clean.
And as you can see,
this is set up as the function there.
And inside that we would say, return del.
And then the parameter supplied is the distribution folder here.
So this will set up the clean task.
And once this task is run,
then the distribution folder is going to be deleted.
Our next task is to copy the fonts into their distribution folder.
So, I would say, copy fonts.
And as you can see,
we set up the function there and then close out the function.
And then here, I would simply say,
Gulp source and node
modules, font awesome, fonts.
You can see me using the globbing patterns, right there.
And then once we select all the source files,
we just pipe them into the destination file.
So, you notice that we don't need
a specific module for arranging the copying of the files.
We simply use the Gulp source and destination streams to be able
to pipe the files from the source location to the destination location.
So, these two will set up the clean and the copy fonts task.
Next, we're going to set up the NPM module for the imagemin task.
So the minifying and compressing of the images.
So, to do that add the prompt type Gulp imagemin.
This is the Gulp plugin corresponding to the imagemin node module.
So we installed as Gulp plugin,
which is also node module.
So once the installation is complete,
let's set up that imagemin task.
Going to our Gulp file,
we'll setup the imagemin task here.
So we'll set up the imagemin task as function.
As you can see, the structuring of the code for
the Gulp task definition is pretty much standard.
So, you would say Gulp source.
We specify the source files there and the source files in
the image folder the JPG,
GIF and PNG files from there.
And then pipe them through the imagemin task.
And then I will set up some parameters here.
So, I will set up
the optimizations level to three, progressive as true.
So, this will turn them into progressive and interlaced images.
So once this is set up,
then the next step is to pipe them to their destination.
And the destination here as you can see is the image folder in the distribution folder.
So with this the imagemin task is now set up.
Now, we'll build up the build task here.
So, let me set up the build task.
So for the build the task,
what you would like to do is to first
execute the clean task before
the remaining tasks are executed
because we want to first clean up the distribution folder.
And that has to be completed before the remaining tasks are done.
With Gulp, the tasks are executed in parallel automatically.
And so it may so happen that
if you execute the clean task in parallel with the remaining task,
the clean task might end up finishing later and
then deleting some of the work that has been done by the remaining tasks.
So, that's why when you specify the Gulp task,
if you specify clean as the first one in,
as the second parameter here,
then that means that that task will be completed first.
And then the remaining tasks will be executed.
So, I would say Gulp start.
With the Gulp start,
all the tasks that we specify here are going to be executed in parallel.
So, I'm going to execute the copy fonts task and also the imagemin task together.
Later on, we will set up the usemin task and then
execute that also along with the copy fonts and imagemin.
One last thing that I need to add in before we go ahead and execute
the tasks is to go up here and then require the imagemin.
I would say imagemin require Gulp imagemin.
And then save the changes.
Let's now go ahead and check the build task.
At the prompt, if your type Gulp build,
then it should carry out all the three tasks.
So you'll see that it starts the clean task and
completes it and then it starts the actual build task.
So, you can see that by specifying
the clean should be completed before the actual build happens,
then you make sure that you first clean up the distribution folder
then the build task which comprises the copy fonts and the imagemin,
all of them completing in parallel will be executed thereafter.
Going to the editor,
you'll see that in the distribution folder,
we see that the fonts have been copied and images have been copied correctly.
The last step is to set the usemin task in order to build up the distribution folder.
To set up they usemin task,
I'm going to install a few Gulp plugins so I would say NPM install.
And then I would install the uglify Gulp file plugin,
which obviously is also a node module.
And then I will install the usemin node module and then the rev node module.
The Gulp rev node module is like the file graph rev grant plugin that we saw earlier.
It's slightly different from the file rev that we saw earlier,
but serves the same purpose.
So, Gulp rev, then I will set up Gulp clean CSS and then Gulp flatmap.
You'll see the reason for this as we-
We set up our usemin task, so,
and gulp-html min and we go ahead and install these modules here.
Once the modules are installed,
let's go ahead and require these modules in our gulpfile and then set up the usemin task.
Going to our gulpfile right at the top,
I'm going to require the modules that I just now installed.
So, the uglify gulp uglify.
So the uglify task then
the usemin task gulp usemin,
then after that
the rev then,
forgot there, comma there.
Be very careful not to miss out these commas there.
So require gulp clean-css, then flatmap, and htmlmin.
So these are the gulp modules
that we installed,
so let's save the changes and then we'll go down and set up the usemin task.
Coming to the bottom of the gulpfile,
right there I will set up the usemin task.
So, what does the usemin task do?
So the usemin task takes
the htmlfiles and then looks up the CSS and JavaScript blocks in the htmlfiles,
combines, concatenates, and minifies and nuglifies the files and then
replaces them by using the concatenated file in the distribution folder.
So to get started,
I would first start by specifying gulp source.
So where are the source files?
So the source files are the htmlfiles in the current folder.
So gulp./start.html, then I'm going to
pipe this gulpfiles through this gulp module called as flatmap.
What does flatmap do?
Flatmap takes these multiple htmlfiles and then
starts up parallel pipelines for each one of these htmlfiles.
Each one of them going through the same set of steps and then finally,
converging and copying it into the destination folder.
So as you can see in our current folder,
we have got contactus.html, aboutus.html, and index.html.
All three of them need to be processed.
So, the flatmap allows us to process these in parallel,
starting up the same set of pipe for each of these files,
so that's why I'm making use of the flatmap there.
So, flatmap, and then inside the flatmap I need to specify the function,
the two parameters; stream, file.
So, the file basically takes each one of those source files that we have specified there,
and then treats them to the same set of functions here,
and then starts up its separate stream for each one of them.
So, I will return stream,
and then I will pipe each one of these
through the usemin task which itself,
comprises of the css
and uglify JavaScript and html task.
So for the css, I'm going to perform the revision part.
So the css part will obviously do the concatenation and minification and so on,
and then applies the rev to that so that it acts
that 20 bit string to the main.css file there.
So for css I set that up,
and then for html,
because I have multiple html files,
I need to specify this as a function,
and inside this function I would say return htmlmin.
And then inside there I will give it parameter collapseWhitespace,
and that parameter would be set to true.
And so this essentially completes the html part of it.
And then the next one is the js part of it,
the JavaScript part of it,
which I need to do the uglify and then the revision for it.
And then, if I have
any inline javascript code then I need to apply
the uglify task for that,
and then for the inlinecss code,
I will use the cleanCss task there with concat as the parameter there.
So with this, I have set up my usemin task.
So it will cater for all these different actions on my behalf.
And then once they are done finally,
the resulting streams will be
piped to the distribution folder.
So with this, the usemin task is now all set setup.
Let me save the changes.
And then I will go down to the build task and then after imagemin I'm going to also
add usemin as one of the tasks to be performed by the build task.
So, with this changes, so,
we have modified the build task,
let's go ahead and then check whether the distribution folder is built correctly or not.
Going to the prompt, let me type in gulp
build and then wait for gulp to build up all the different tasks.
It'll take a little bit of time for the usemin to complete its work,
and when it is done completing the transformation,
then my distribution folder should now be ready for being viewed.
Going to the editor you can now see that the distribution folder has been
prepared here and you can see the index, contactus, and aboutus.htmlfile.
You can see that when you open the index.htmlfile,
it has been compressed.
And the htmlmin has been done,
in particular note how the css file has been replaced
with css/main- and then you'll see a long string there.css.
So this is just like the file rev that you saw in grunt with the gulp rev module,
this is what it does to the name of the file.
So if you look at the css you can see that the name of the file is main hyphen and
then some string there dot css and similarly for the javascriptfile.
So, this is what the gulp rev module does,
and then all these three files are prepared.
Let's take a look at these files in the browser.
Going to the browser I can see that there source files are being saved correctly.
Let me check out the distribution folder.
So in the distribution folder,
the index.html that has been prepared by
the gulp build task seems to be working correctly.
Let me also check out the about page,
and we can see that about page is also built correctly,
and also the contact page.
So now you can see that our gulp task is completed.
So with this, we complete this exercise.
In this exercise, we set up the cleaning up and
the copying of the font files to our distribution folder,
we did the imagemin task and then finally we set up
the usemin task to build up our distribution folder.
With this we complete this exercise.
This may be a good time for you to do a good comment with the message Gulp part two.