7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 1.1 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Creating the Build Task

In this, the final lesson, we’ll create the build task to help us create deliverables. It will eliminate all the unnecessary development files, keeping just the essentials ready for deployment. Let’s see how that can be done.

2.6 Creating the Build Task

Hello, and welcome to lesson number eight, where we'll create the build task. And the build task will create deliverables. It will get rid of all the non-essential thing, all the development files that the client doesn't really need. And just create stuff that can be uploaded and presented as a website. Now, we're gonna do a couple of things. First of all, we're going to copy all of the HTML files. But we're going to replace scripts.js with scripts.min.js because we will minify the JavaScript files. And we're also gonna minify the CSS files. And we're also going to optimize the images. Now I just have some random images here with various extensions just so we can see what certain plugins can do. But we're gonna take all of these changes, all of these changed files, and we're gonna put them in a dist folder, or distribution. So for that, we need to install a couple of plugins. First one is called clean. grunt-contrib-clean --save-dev. And this will basically delete a folder and all of its contents. Then we need a plugin called copy. So, grunt-contrib-copy. Also save this to development. And we need another one called imagemin. So, grunt-contib-imagemin. This will take care of the images. It's gonna optimize them. And after all of these are installed, let's open our Grunt file and load them right here. Now so, copy clean and imagemin. And then let's go ahead and write the tasks for them. First of all, it's copy. Now copy, and I'm targeting the HTML here. First of all, it's setting the current directory to my app directory. And expand actually allows us to work like this. Then it's gonna take all of the HTML files and it's gonna put them in the dist folder, which I have defined here on the top. So, paths dist. And, actually, I did not define it here. Let's do it right now. dist: should be the 'dist' folder. So it's gonna put them in the dist folder. Then we also have some options. We have the ability to change the content of that file. So what we're gonna do is we have a process function here. And on copy, we're gonna return the content in which we're gonna replace scripts.js with scripts.min.js, essentially changing this bit, and that's the copy task. Next, we have the clean task. And this will basically just delete the dist directory. And finally, the imagemin task on build will take all of the files I specified from the app img folder with the extensions that you see here and move them to the dist.img folder, which is dist/images. But it's also gonna apply an algorithm for minimizing and compressing. Now, we need to write two more build targets for some of our tasks. And the first one is uglify. And uglify currently has a dev target. But we're gonna write the build target like this. So we're taking basically everything from the .js folder, and the stuff from Bower, and we're writing in scripts.min.js. But this time, we're setting compress to true so it's minified. And then we're gonna write the build target on the sass task. And this will essentially take styles.css, and it's gonna transform it from the app folder. And it's gonna move it the dist folder with the same filename, but this time it's gonna be compressed. All right, so now that we have all the tasks in place, let's go ahead and write our build task. And that build task looks something like this. We're registering a task with the name of build. And then we're applying or we're executing the following tasks. First we clean, we get rid of the dist folder if it already exists. So we're always starting fresh. Then we're copying the files. Then we're doing the image minification. We're uglifying the JavaScript. We're concatenating the CSS. And we're minifying the CSS using the sass.build task. So now, if we say, grunt build, You'll see that it's gonna run all of these tasks. And its gonna create the dist folder with an index.html, which contains an updated path to the scripts. Images, which have been minified. You can see here, almost 600 kilobytes. A minified CSS file which contains normalize. And a minified JavaScript file which contains only jQuery for now because, well, we did not have any scripts of our own. And that's about it for our workflow. As you saw, it's pretty easy to create once you get ahold of Grunt and all the plugins, and you can use them how to write tasks and stuff. Personally, I like this workflow. I'm gonna use it a lot. Of course, I'm gonna adapt it to my own needs and stuff. And I invite you to do the same. And maybe you'll use different plugins than me. Maybe you'll create an entirely different workflow for what I know. The idea is to adapt it to your own needs. I would like to thank you very much for watching. And until next time, take care.

Back to the top