1 00:00:03,510 --> 00:00:06,510 Let's continue our grunting. 2 00:00:06,510 --> 00:00:11,175 As we did in the second part of the NPM scripts exercise, 3 00:00:11,175 --> 00:00:14,660 in this second part of that grunt exercise, 4 00:00:14,660 --> 00:00:17,080 we're going to configure exactly the same tasks. 5 00:00:17,080 --> 00:00:20,475 We're going to do cleaning up the distribution folder, 6 00:00:20,475 --> 00:00:23,175 copying the fonts to the distribution folder, 7 00:00:23,175 --> 00:00:29,780 then we will also do the minification of our images using imagemin, 8 00:00:29,780 --> 00:00:37,530 and then finally use the usemin task to build and prepare our distribution folder. 9 00:00:37,530 --> 00:00:40,420 Continuing with our exercise, 10 00:00:40,420 --> 00:00:43,590 I will install a couple of grunt modules. 11 00:00:43,590 --> 00:00:49,990 So, let's install NPM, install-grunt-contrib-copy. 12 00:00:51,110 --> 00:01:00,665 This is used for copying the files and then grunt-contrib-clean, 13 00:01:00,665 --> 00:01:04,575 and minus minus save-dev. 14 00:01:04,575 --> 00:01:06,655 And once these two are installed, 15 00:01:06,655 --> 00:01:10,595 then we'll go ahead and config the corresponding tasks. 16 00:01:10,595 --> 00:01:12,800 Going to your grunt file, 17 00:01:12,800 --> 00:01:19,770 we'll add in the configuration for both the copy and the clean tasks. 18 00:01:19,770 --> 00:01:22,895 So, starting with the comma, 19 00:01:22,895 --> 00:01:26,295 always remember not to forget the comma. 20 00:01:26,295 --> 00:01:30,360 It'll come back to bite you at the wrong moments if you do that. 21 00:01:30,360 --> 00:01:32,245 So let's set up the copy task. 22 00:01:32,245 --> 00:01:38,180 For the copy, usemin expects us to also keep 23 00:01:38,180 --> 00:01:41,110 our HTML files copied to the distribution folder 24 00:01:41,110 --> 00:01:44,760 so that it can do the manipulation on that. 25 00:01:44,760 --> 00:01:47,250 So, in this case, 26 00:01:47,250 --> 00:01:48,630 we're going to first copy 27 00:01:48,630 --> 00:01:53,440 the HTML files from our project folder to the distribution folder. 28 00:01:53,440 --> 00:01:55,330 So, to do the copying, 29 00:01:55,330 --> 00:02:01,535 I'm going to set up the HTML part of it. 30 00:02:01,535 --> 00:02:04,740 So, this is where we will use some of 31 00:02:04,740 --> 00:02:09,920 the grunt syntax for specifying the files that need to be copied. 32 00:02:09,920 --> 00:02:19,880 So, I say files and also specify the right, 33 00:02:19,880 --> 00:02:23,560 left and right braces there so within this, 34 00:02:23,560 --> 00:02:27,855 I need to specify now certain configuration. 35 00:02:27,855 --> 00:02:37,600 So, I would say, expand true and dot true, then CWD, 36 00:02:37,600 --> 00:02:42,015 the current working directory is dot slash, 37 00:02:42,015 --> 00:02:44,440 and then after that, 38 00:02:44,440 --> 00:02:51,730 we'll configure the next one which is SRC, the source files, 39 00:02:51,730 --> 00:02:56,690 and then the source files are star.html, 40 00:02:56,690 --> 00:02:59,325 all the HTML files, 41 00:02:59,325 --> 00:03:05,850 and then we are going to copy them to the dist folder. 42 00:03:05,850 --> 00:03:10,135 So that's why the destination is set to the distribution folder here. 43 00:03:10,135 --> 00:03:12,385 So, with this set up, 44 00:03:12,385 --> 00:03:18,880 my copy task will copy all the HTML files to the distribution folder. 45 00:03:18,880 --> 00:03:22,285 Now along with that, we also need to copy the fonts. 46 00:03:22,285 --> 00:03:26,200 So, I will set up the second one for the fonts. 47 00:03:26,200 --> 00:03:31,090 So, I specify fonts and then in here also I need to specify 48 00:03:31,090 --> 00:03:37,500 the files that need to be copied and so we say files, 49 00:03:37,500 --> 00:03:41,780 and then these are 50 00:03:41,780 --> 00:03:47,465 some configuration parameters that you need to set up for the copy task. 51 00:03:47,465 --> 00:03:49,225 Now, if you need to understand, 52 00:03:49,225 --> 00:03:54,510 then by reading the documentation for the corresponding grunt plugin, 53 00:03:54,510 --> 00:03:57,650 you'll be able to figure this out and so or you can 54 00:03:57,650 --> 00:04:00,960 just simply follow the example that I am giving here. 55 00:04:00,960 --> 00:04:05,350 So, dot true, and then CWD, 56 00:04:05,350 --> 00:04:14,780 the current working directory is node modules and font awesome. 57 00:04:14,780 --> 00:04:18,295 So that is where I'm going to copy the files from, 58 00:04:18,295 --> 00:04:27,180 and then the source of the files is the fontsstar.star, 59 00:04:27,180 --> 00:04:30,310 those are the files that I need to copy, 60 00:04:30,310 --> 00:04:38,370 and the destination is the distribution folder. 61 00:04:38,370 --> 00:04:42,050 So with this, I have set up my copy task to copy 62 00:04:42,050 --> 00:04:47,490 both the HTML files and the fonts files into my distribution folder. 63 00:04:47,490 --> 00:04:52,370 Now, the next task that I'm going to set up is the clean task. 64 00:04:52,370 --> 00:04:56,290 So, let me configure the clean task. 65 00:04:56,540 --> 00:05:05,825 For the clean task, I will configure the build, 66 00:05:05,825 --> 00:05:13,460 and then I will say the source is the distribution folder. 67 00:05:13,460 --> 00:05:19,660 So, essentially specifying that the distribution folder should be cleaned up. 68 00:05:19,830 --> 00:05:27,835 So, now we have set up the copy and the clean tasks so let's save the changes. 69 00:05:27,835 --> 00:05:31,530 The next task that I'm going to set up is the imagemin task. 70 00:05:31,530 --> 00:05:40,030 This is what we will use to compress and copy the images into the distribution folder. 71 00:05:40,030 --> 00:05:44,200 To get started with the imagemin task, the first step, 72 00:05:44,200 --> 00:05:49,910 install the corresponding grunt plugin. 73 00:05:49,910 --> 00:06:00,520 So, grunt-contrib-imagemin, minus minus save.dev. 74 00:06:00,520 --> 00:06:03,470 And once that is installed, 75 00:06:03,470 --> 00:06:07,330 then we'll go ahead and configure the corresponding imagemin task. 76 00:06:07,330 --> 00:06:12,015 Going to our grunt file after the configuration for the clean task, 77 00:06:12,015 --> 00:06:15,620 I'm going to configure the imagemin task. 78 00:06:15,620 --> 00:06:18,050 So, I will say imagemin, 79 00:06:19,460 --> 00:06:22,055 and then right in there, 80 00:06:22,055 --> 00:06:26,225 I will specify dynamic, 81 00:06:26,225 --> 00:06:30,950 and inside there I will specify the files so you can 82 00:06:30,950 --> 00:06:36,010 see that the file specification would be similar. 83 00:06:36,010 --> 00:06:39,130 I'd say, expand true, 84 00:06:39,130 --> 00:06:46,830 then CWD is the current directory. 85 00:06:49,680 --> 00:06:58,350 Then the source of the files is imagestar. 86 00:07:00,840 --> 00:07:05,405 and then within brackets, within braces, 87 00:07:05,405 --> 00:07:12,910 I specify PNG, GIF, and JPG. 88 00:07:12,910 --> 00:07:17,000 So essentially, you can see the file global pattern here. 89 00:07:17,000 --> 00:07:18,640 So it says any PNG, GIF, 90 00:07:18,640 --> 00:07:21,610 or JPG files that matches this pattern and then 91 00:07:21,610 --> 00:07:25,755 start dot meaning all the files of that pattern, 92 00:07:25,755 --> 00:07:29,280 and source, and the destination, 93 00:07:29,280 --> 00:07:34,310 I set as the distribution folder. 94 00:07:34,310 --> 00:07:37,790 So with this, we have configured our copy, 95 00:07:37,790 --> 00:07:39,425 clean and imagemin task. 96 00:07:39,425 --> 00:07:46,670 Let's configure a task here called build. 97 00:07:46,670 --> 00:07:49,365 So, I would say, register task, 98 00:07:49,365 --> 00:07:55,700 grunt register task and then I will name the task as build, 99 00:07:55,700 --> 00:07:57,695 and then inside this, 100 00:07:57,695 --> 00:08:03,160 we will specify the set up steps to be done by the build task. 101 00:08:03,160 --> 00:08:09,105 So, right there, semicolon and then in there, 102 00:08:09,105 --> 00:08:13,685 I will specify the three tasks in the sequence that they should be performed. 103 00:08:13,685 --> 00:08:16,650 First, I will say, clean. 104 00:08:16,650 --> 00:08:19,420 So, we will clean up the distribution folder 105 00:08:19,420 --> 00:08:22,340 and then start rebuilding the distribution folder. 106 00:08:22,340 --> 00:08:27,320 Clean, then the next task would be 107 00:08:27,320 --> 00:08:36,980 copy and then after that I would do, imagemin. 108 00:08:37,380 --> 00:08:41,340 So these three tasks to be configured here. 109 00:08:41,340 --> 00:08:43,910 So with this, let me save the changes. 110 00:08:43,910 --> 00:08:46,590 Let's see how this thing works. 111 00:08:46,590 --> 00:08:50,280 Now, going to the prompt if I type, 112 00:08:50,280 --> 00:08:57,955 grunt and build, you will see that it will first do the clean, 113 00:08:57,955 --> 00:09:01,550 then to do the copy and do the imagemin task. 114 00:09:01,550 --> 00:09:05,600 So, it does all these three and then you would immediately see that 115 00:09:05,600 --> 00:09:11,810 the distribution folder is built up in my project folder here. 116 00:09:11,810 --> 00:09:15,200 And inside the distribution folder you can see that the fonts have been copied, 117 00:09:15,200 --> 00:09:16,590 the images have been copied and 118 00:09:16,590 --> 00:09:20,665 the three HTML files have been copied to the distribution folder. 119 00:09:20,665 --> 00:09:22,350 You're only halfway there. 120 00:09:22,350 --> 00:09:29,370 Now, we need to be able to process these files using the usemin plugin. 121 00:09:29,370 --> 00:09:31,675 So, let's go to that next. 122 00:09:31,675 --> 00:09:35,140 Now, I'm going to install a few NPM modules 123 00:09:35,140 --> 00:09:38,555 that are useful for building the distribution folder. 124 00:09:38,555 --> 00:09:42,225 So, to do that, I would say NPM install. 125 00:09:42,225 --> 00:09:47,120 I can specify a set of modules here so, 126 00:09:47,120 --> 00:09:52,300 I would say, grunt-contrib-concat. 127 00:09:52,300 --> 00:10:01,000 So, this a used for concatenating files, then grunt-contrib-cssmin, 128 00:10:01,000 --> 00:10:13,512 grunt-contrib-htmlmin, then say, grunt-contrib-uglify. 129 00:10:13,512 --> 00:10:18,240 Then grunt-filerev. 130 00:10:18,240 --> 00:10:21,910 You'll see the reason for using filerev in a short while, 131 00:10:21,910 --> 00:10:32,925 and then grunt-usemin, and save def and then, 132 00:10:35,475 --> 00:10:40,050 install all this grunt modules. 133 00:10:40,050 --> 00:10:42,205 Once all of them have been installed, 134 00:10:42,205 --> 00:10:44,305 the next step is to go and configure, 135 00:10:44,305 --> 00:10:47,625 usemin task which also uses 136 00:10:47,625 --> 00:10:55,090 the cssmin Uglify Concat tasks to accomplish the building of the distribution folder. 137 00:10:55,090 --> 00:10:59,140 Now, lets proceed ahead configuring the usemin task. 138 00:10:59,140 --> 00:11:03,750 So going back to the grunt file after imagemin, 139 00:11:03,750 --> 00:11:10,950 I'm going to add in the next task for usemin to work with the grunt. 140 00:11:10,950 --> 00:11:17,165 The first task that I need to configure is called useminPrepare. 141 00:11:19,145 --> 00:11:25,175 This useminPrepare task will prepare the files and then also configure 142 00:11:25,175 --> 00:11:32,655 the ConCache CSS min and Uglify and file ref plugins, 143 00:11:32,655 --> 00:11:35,070 so that they can do their work correctly. 144 00:11:35,070 --> 00:11:36,915 So, that's the reason for the useminPrepare. 145 00:11:36,915 --> 00:11:42,220 So, this is how the grant usemin plugin has been designed. 146 00:11:42,220 --> 00:11:48,340 Somewhat different from the way the usemin that we used with the end game scripts wooks. 147 00:11:48,340 --> 00:11:50,295 So, in the useminPrepare, 148 00:11:50,295 --> 00:11:59,590 just some random name that I'm going to use and then say destination is dist. 149 00:11:59,590 --> 00:12:08,730 And then I would specify the source as all the html files here. 150 00:12:08,730 --> 00:12:13,605 So I would say contactus.html, 151 00:12:14,875 --> 00:12:23,550 aboutus.html, and index.html. 152 00:12:23,550 --> 00:12:26,915 So, all these three files need to be processed. 153 00:12:26,915 --> 00:12:30,765 The next part of this usemin configuration, 154 00:12:30,765 --> 00:12:37,735 useminPrepare configuration is where I specify the options. 155 00:12:38,115 --> 00:12:43,245 This is something I have figured out by trial and error. 156 00:12:44,995 --> 00:12:47,395 Just follow along the steps. 157 00:12:47,395 --> 00:12:48,845 So I need to configure 158 00:12:48,845 --> 00:12:54,125 a few things here inside where I need to configure something called Flow. 159 00:12:54,125 --> 00:13:00,695 And then inside there I need to configure another part called Steps, 160 00:13:00,695 --> 00:13:07,875 and then here I specify the steps here and then say cssmin, 161 00:13:07,915 --> 00:13:14,645 and then after that I will say js is uglify. 162 00:13:14,645 --> 00:13:21,515 So, this is something that I need to specify here and then after this I say post, 163 00:13:24,405 --> 00:13:29,695 and here I can allow this to supply 164 00:13:29,695 --> 00:13:36,475 some options for their specific tasks that I have configured. 165 00:13:36,475 --> 00:13:40,175 So, I am supplying some additional options for css. 166 00:13:40,175 --> 00:13:44,540 So, that is supplied inside of the post here. 167 00:13:44,540 --> 00:13:49,485 Now again, this is how the configuration has to be done. 168 00:13:49,485 --> 00:13:52,695 So, we just learned it by looking at the documentation there. 169 00:13:52,695 --> 00:13:55,390 So, in here inside the post css, 170 00:13:55,390 --> 00:13:59,275 I would specify a name as cssmin. 171 00:13:59,275 --> 00:14:01,450 So far this here is cssmin task. 172 00:14:01,450 --> 00:14:07,974 I would say createConfig: 173 00:14:08,775 --> 00:14:17,005 function context block, and then inside those function 174 00:14:17,005 --> 00:14:19,955 I have to supply certain parameters. 175 00:14:19,955 --> 00:14:22,175 So, I would say var 176 00:14:22,175 --> 00:14:31,835 generated context options generator. 177 00:14:31,835 --> 00:14:34,685 So this is some JavaScript variable that I need to 178 00:14:34,685 --> 00:14:38,705 specify there, JavaScript object essentially. 179 00:14:38,705 --> 00:14:44,185 So, this object contains this property called options, 180 00:14:44,185 --> 00:14:48,005 where I can specify some options which are passed 181 00:14:48,005 --> 00:14:51,485 into the CSS min tasked by the usemin prepare task. 182 00:14:51,485 --> 00:14:56,310 So, in there, keep 183 00:14:56,310 --> 00:15:02,105 special comments and then, 184 00:15:05,655 --> 00:15:08,635 rebase is false. 185 00:15:08,635 --> 00:15:16,025 Apparently I need to supply this in order for my cssmin task to currently handle 186 00:15:16,025 --> 00:15:23,855 the font awesome modification and inclusion in the concatenated file. 187 00:15:23,855 --> 00:15:25,390 If I don't do this, 188 00:15:25,390 --> 00:15:29,380 it seems to break the font awesome and this is something that I figured out, 189 00:15:29,380 --> 00:15:31,890 by doing a little bit of 190 00:15:31,890 --> 00:15:37,285 research on stack overflow and some of these places and figured out 191 00:15:37,285 --> 00:15:42,505 that their problem that is being caused with font awesome can be 192 00:15:42,505 --> 00:15:48,619 fixed by including this into my grunt configuration. 193 00:15:48,619 --> 00:15:51,445 So, again I have just looked up 194 00:15:51,445 --> 00:15:55,810 the suggestions from some people that have tried and to fix the problem. 195 00:15:55,810 --> 00:15:58,465 So, if you run into problems like this, 196 00:15:58,465 --> 00:16:02,675 this is one way of solving issues that might arise when you're 197 00:16:02,675 --> 00:16:07,525 working with these various tools. 198 00:16:07,525 --> 00:16:14,710 Let me add in the next task for Concat. 199 00:16:14,710 --> 00:16:21,180 I will specify some things here and options. 200 00:16:21,180 --> 00:16:28,135 I specify this semicolon, 201 00:16:28,135 --> 00:16:31,215 so this is something that I need to specify for the Concat, 202 00:16:31,215 --> 00:16:37,725 and then also after 203 00:16:37,725 --> 00:16:43,180 options I specify dist as empty. 204 00:16:43,180 --> 00:16:48,385 Now this Concat options will be configured by the useminPrepare that runs earlier. 205 00:16:48,385 --> 00:16:50,435 So we can leave most of it blank there, 206 00:16:50,435 --> 00:16:54,005 and then that would be reconfigured by the useminPrepare. 207 00:16:54,005 --> 00:16:57,005 The next one is uglify. 208 00:16:57,665 --> 00:17:06,055 Inside uglify also I just need to specify this dist as empty. 209 00:17:06,055 --> 00:17:08,255 If I don't specify these, 210 00:17:08,255 --> 00:17:12,890 then the usemin task doesn't work correctly. 211 00:17:12,890 --> 00:17:16,785 So, that's why I need to specify all of these things explicitly. 212 00:17:16,785 --> 00:17:21,905 So for cssmin also I would say dist empty. 213 00:17:21,905 --> 00:17:29,005 And then, the next task that I'm going to configure is called filerev. 214 00:17:29,625 --> 00:17:36,725 So, you saw me installing the filerev plugin for Grunt. 215 00:17:36,725 --> 00:17:38,480 What does this filerev do? 216 00:17:38,480 --> 00:17:44,640 What the filerev does is when usemin prepares the main.css and main.js file, 217 00:17:44,640 --> 00:17:53,170 what filerev does is it adds an additional extension to that main name, 218 00:17:53,170 --> 00:18:02,070 so that when you prepare a new version of your website and upload it to the web page, 219 00:18:02,070 --> 00:18:05,895 in case somebody has seen your Website earlier, 220 00:18:05,895 --> 00:18:12,030 then their browser might have cashed the main.css and main.js files. 221 00:18:12,030 --> 00:18:15,675 If you don't attach this filerev what happens is that, 222 00:18:15,675 --> 00:18:21,480 the browser beneath downloads the new version of your web page. 223 00:18:21,480 --> 00:18:24,605 It may not download the main.js and main.css file 224 00:18:24,605 --> 00:18:28,515 because it finds them already in it's local cache. 225 00:18:28,515 --> 00:18:31,820 So, your web page may not be rendered correctly. 226 00:18:31,820 --> 00:18:33,725 So, to deal with the problem, 227 00:18:33,725 --> 00:18:37,535 what we do is every time we prepare a new distribution folder, 228 00:18:37,535 --> 00:18:41,235 we will add a file revision. 229 00:18:41,235 --> 00:18:43,045 That's what the filerev stands for, 230 00:18:43,045 --> 00:18:44,985 the file revision number, 231 00:18:44,985 --> 00:18:54,100 as a additional extension to the name of those css and js file. 232 00:18:54,100 --> 00:18:56,950 The main.ss and main.js files the pre-prepared. 233 00:18:56,950 --> 00:18:58,820 So that's what the filerev does. 234 00:18:58,820 --> 00:19:02,440 Now how does this filerev can compute this value? 235 00:19:02,440 --> 00:19:07,685 It takes the contents of these files and then does some processing and then generates 236 00:19:07,685 --> 00:19:14,655 an md5 compressed 20 characters number which will be attached to the main file. 237 00:19:14,655 --> 00:19:17,440 So, I'm going to configure that part here. 238 00:19:17,440 --> 00:19:20,245 So, in the options, 239 00:19:20,245 --> 00:19:30,990 I specify here saying how it is supposed to compute this number there. 240 00:19:30,990 --> 00:19:33,740 So, I say encoding utf8, 241 00:19:33,740 --> 00:19:40,150 and then I say algorithm that it used to compute this hash, 242 00:19:40,150 --> 00:19:43,544 what we call as the hash is md5. 243 00:19:43,544 --> 00:19:47,060 Now, it'll become more clearer when we actually run 244 00:19:47,060 --> 00:19:53,020 the usemin task and then see what it does, length 20. 245 00:19:53,020 --> 00:19:55,475 So, I will come back and explain what this thing 246 00:19:55,475 --> 00:19:59,460 does when we actually run the usemin task. 247 00:19:59,460 --> 00:20:06,790 So, let me finish the options here and then I would say release. 248 00:20:06,790 --> 00:20:10,855 So, I need to set up a few more things here and then release, 249 00:20:10,855 --> 00:20:18,150 and then I need to specify the files for which my filerev should act. 250 00:20:18,150 --> 00:20:20,625 So, I would say filerev files. 251 00:20:20,625 --> 00:20:22,005 So, inside here file. 252 00:20:22,005 --> 00:20:26,645 So, you're beginning to see a pattern in the way things are specified here. 253 00:20:26,645 --> 00:20:28,640 So, when you specify the files here, 254 00:20:28,640 --> 00:20:30,775 you will say the source, 255 00:20:30,775 --> 00:20:37,815 and then in there you will specify dist CSS 256 00:20:37,815 --> 00:20:41,025 and then star dot CSS, 257 00:20:41,025 --> 00:20:47,295 and then the next one dist js*.js. 258 00:20:47,295 --> 00:20:51,225 So, with this, you have configured the filerev. 259 00:20:51,225 --> 00:20:53,625 So, the filerev part is configured. 260 00:20:53,625 --> 00:20:58,820 And finally, we need to configure the usemin task. 261 00:20:58,820 --> 00:21:00,795 So, to configure the usemin task, 262 00:21:00,795 --> 00:21:04,125 I go down here and say usemin, 263 00:21:04,125 --> 00:21:09,100 and in here let me specify some options for the usemin task. 264 00:21:09,100 --> 00:21:12,470 So, here I specify html. 265 00:21:12,470 --> 00:21:21,205 So, here I am specifying to it which files it needs to change, 266 00:21:22,255 --> 00:21:25,455 it needs to update. 267 00:21:25,455 --> 00:21:32,465 So, the files that have been copied to the distribution folder. 268 00:21:33,290 --> 00:21:41,975 And the last one is "dist/index.html." 269 00:21:41,975 --> 00:21:50,300 So these are the three files that it is supposed to process, 270 00:21:50,510 --> 00:21:55,095 and then some options for this here. 271 00:21:55,095 --> 00:22:04,970 So, the options I will specify "assetsDirs." 272 00:22:04,970 --> 00:22:10,520 So, this is where all the assets that I'm using exist. 273 00:22:10,520 --> 00:22:14,355 So, the CSS and the JavaScript files exist. 274 00:22:14,355 --> 00:22:21,715 So, I'll specify "dist/css" and "dist/js." 275 00:22:21,715 --> 00:22:27,020 With this, you have completed configuring the "usemin" task. 276 00:22:27,020 --> 00:22:30,930 Next, we configure the "htmlmin" task. 277 00:22:30,930 --> 00:22:32,870 For the "htmlmin" task, 278 00:22:32,870 --> 00:22:37,160 we specified the target which is "dist", the distribution folder, 279 00:22:37,160 --> 00:22:40,140 and the "htmlmin" to be performed on 280 00:22:40,140 --> 00:22:44,690 all the HTML files that are in that distribution folder. 281 00:22:44,690 --> 00:22:49,560 The options that we specify for this state that, we'll say, 282 00:22:49,560 --> 00:22:53,945 "collapsedWhitespace: True" meaning that 283 00:22:53,945 --> 00:22:58,715 all the white space in the HTML files would all be collapsed, 284 00:22:58,715 --> 00:23:04,670 such that the [inaudible] contain only the minimum HTML code there. 285 00:23:04,670 --> 00:23:08,095 The modification essentially removes 286 00:23:08,095 --> 00:23:12,390 all the extraneous characters from the "htmlmin" files. 287 00:23:12,390 --> 00:23:16,570 Now, we also specify that dictionary of files, 288 00:23:16,570 --> 00:23:18,880 those files that need to be configured. 289 00:23:18,880 --> 00:23:22,910 This is specified as destination, colon, source. 290 00:23:22,910 --> 00:23:28,835 So, we specify "dist/index.html" : "dist/index.html", 291 00:23:28,835 --> 00:23:32,335 meaning that the "index.html" in the distribution folder 292 00:23:32,335 --> 00:23:36,900 will be [inaudible] and then put back into the "index.html" file, 293 00:23:36,900 --> 00:23:39,025 also in the distribution folder. 294 00:23:39,025 --> 00:23:45,290 Similarly, the "contactus.html" specified there and then the 295 00:23:45,290 --> 00:23:51,965 "aboutus.html" also specified as shown in that list of files. 296 00:23:51,965 --> 00:23:56,760 The reason why we perform "htmlmin" after we finish "usemin" 297 00:23:56,760 --> 00:24:01,985 is because "usemin" will replace all the scripts 298 00:24:01,985 --> 00:24:06,925 with the main ".js" file and also all that CSS 299 00:24:06,925 --> 00:24:12,535 code concatenated and combined and replaced with the main ".css" file. 300 00:24:12,535 --> 00:24:15,490 So the "htmlmin" will be performed on 301 00:24:15,490 --> 00:24:20,840 the resulting HTML files after "usemin" has completed its work. 302 00:24:20,840 --> 00:24:24,605 This is how this works in Grunt. 303 00:24:24,605 --> 00:24:31,060 So the Grunt "htmlmin" has to be applied after the "usemin" has completed its work. 304 00:24:31,060 --> 00:24:34,080 So once all these are configured, 305 00:24:34,080 --> 00:24:40,185 then one little step that I need to do is to go back up here, 306 00:24:40,185 --> 00:24:45,285 and then where we specify for the "jit-grunt", 307 00:24:45,285 --> 00:24:50,005 we need to specify that this "jit-grunt", 308 00:24:50,005 --> 00:24:53,290 you recall that we introduced something called the 309 00:24:53,290 --> 00:24:57,500 "useminPrepare" [inaudible] so you need to inform the "jit-grunt" 310 00:24:57,500 --> 00:25:01,900 saying that the "useminPrepare" configuration that we introduced is going to be 311 00:25:01,900 --> 00:25:06,430 handled by that "grunt-usemin" plugin itself. 312 00:25:06,430 --> 00:25:08,575 So I need to explicitly specify, 313 00:25:08,575 --> 00:25:14,260 otherwise "jit-grunt" is going to look around for a "useminPrepare" Grunt plugin. 314 00:25:14,260 --> 00:25:16,480 So to specify to that, 315 00:25:16,480 --> 00:25:26,450 I would say "useminPrepare" and say "grunt-usemin", 316 00:25:26,450 --> 00:25:30,950 essentially informing "jit-grunt" saying the "useminPrepare" is going to be 317 00:25:30,950 --> 00:25:35,960 handled by the "grunt-usemin" plugin there. 318 00:25:35,960 --> 00:25:41,490 Finally, let's reconfigure the "build" task at the bottom. 319 00:25:41,490 --> 00:25:46,520 Going down to that "build" task after "imagemin." 320 00:25:46,520 --> 00:25:49,530 So we did "clean", "copy", "imagemin", 321 00:25:49,530 --> 00:25:55,920 then the next task that I should execute is "useminPrepare" and then after 322 00:25:55,920 --> 00:26:08,820 "useminPrepare" execute "contact," then I execute "cssmin", 323 00:26:08,820 --> 00:26:15,305 then I execute "uglify." 324 00:26:15,305 --> 00:26:20,285 So you see that we have to do them in a certain set of steps. 325 00:26:20,285 --> 00:26:22,395 Once the "cssmin" and "uglify" run, 326 00:26:22,395 --> 00:26:26,110 then the main ".css" and the main ".js" files would be created. 327 00:26:26,110 --> 00:26:28,610 So at this point, I'm going to run the 328 00:26:28,610 --> 00:26:37,290 "filerev" and then finally I run the "usemin" task. 329 00:26:37,290 --> 00:26:40,475 So you see the secrets: "clean", "copy", 330 00:26:40,475 --> 00:26:43,690 "imagemin", "useminPrepare", "concat", "cssmin", "uglify." 331 00:26:43,690 --> 00:26:47,210 At this point, the ".css" and ".js" files, 332 00:26:47,210 --> 00:26:49,815 the main ".css" and main ".js" files are ready. 333 00:26:49,815 --> 00:26:54,190 I can do the "filerev" on them and then finally run the "usemin." 334 00:26:54,190 --> 00:26:58,790 But this, let's save the changes and then go and 335 00:26:58,790 --> 00:27:03,960 see how the "build" task actually prepares the distribution. 336 00:27:03,960 --> 00:27:06,855 [inaudible] Going to our terminal, 337 00:27:06,855 --> 00:27:13,605 at the prompt I type "grunt build" and then wait for all the tasks to be executed. 338 00:27:13,605 --> 00:27:16,870 So you would see that it'll run through all the set of tasks, 339 00:27:16,870 --> 00:27:19,320 and then finally when it is done, 340 00:27:19,320 --> 00:27:24,950 it's going to simply specify that all the tasks are done. 341 00:27:24,950 --> 00:27:29,345 So if you want to go back and look at the sequence of the tasks that have been completed, 342 00:27:29,345 --> 00:27:31,760 you can just scroll back and see what it does. 343 00:27:31,760 --> 00:27:33,885 It first cleans up, 344 00:27:33,885 --> 00:27:36,765 then it copies the HTML files, 345 00:27:36,765 --> 00:27:38,400 then it copies the font files, 346 00:27:38,400 --> 00:27:40,455 then it does the "imagemin" task, 347 00:27:40,455 --> 00:27:42,550 then it does the "useminPrepare", 348 00:27:42,550 --> 00:27:45,810 then it does the "concat", 349 00:27:45,830 --> 00:27:49,645 then it does the "cssmin", 350 00:27:49,645 --> 00:27:52,010 both the distribution and generated, 351 00:27:52,010 --> 00:27:54,130 and then it does the "uglify", 352 00:27:54,130 --> 00:28:01,060 then "uglify" task, then it runs the "filerev" and then finally the "usemin" task. 353 00:28:01,060 --> 00:28:03,920 And then our distribution folder should now be ready. 354 00:28:03,920 --> 00:28:07,775 Going to our editor, 355 00:28:07,775 --> 00:28:11,070 you now see that the distribution folder has been prepared. 356 00:28:11,070 --> 00:28:19,415 Let's specifically look at the main ".css" and main ".js" files. 357 00:28:19,415 --> 00:28:22,060 Note the names of these files. 358 00:28:22,060 --> 00:28:23,590 Notice that after main, 359 00:28:23,590 --> 00:28:25,080 there is a dot and then there is 360 00:28:25,080 --> 00:28:30,500 a 20-character hash that has been added by "filerev" here. 361 00:28:30,500 --> 00:28:34,605 So what happens is if I prepare a new distribution folder, 362 00:28:34,605 --> 00:28:41,130 every time I prepare the new distribution folder, this hash changes, 363 00:28:41,130 --> 00:28:47,515 which means that every single time I deploy a new version of my website, 364 00:28:47,515 --> 00:28:54,130 if any browsers have previously viewed my web site then their cache entries, 365 00:28:54,130 --> 00:28:57,210 where they might have cached the main ".css" and main ".js" has become 366 00:28:57,210 --> 00:29:02,195 invalidated because we have a new version of the main ".css" and main ".js". 367 00:29:02,195 --> 00:29:06,805 So the browser will re-download these things. 368 00:29:06,805 --> 00:29:10,455 I didn't show the "filerev" with the NPM scripts, 369 00:29:10,455 --> 00:29:15,940 but I just added it in here just to show you how it is done with the Grunt. 370 00:29:15,940 --> 00:29:19,650 So with this, we complete this exercise. 371 00:29:19,650 --> 00:29:26,035 Let's take a quick look at the site in our browser. 372 00:29:26,035 --> 00:29:27,795 Going to your browser, 373 00:29:27,795 --> 00:29:32,035 you can see that I am now loading in "dist/index.html". 374 00:29:32,035 --> 00:29:34,200 So this is from the distribution folder, 375 00:29:34,200 --> 00:29:39,260 so I'm checking out and it looks just fine. 376 00:29:39,260 --> 00:29:44,440 The "aboutus.html" also looks just fine, just like before. 377 00:29:44,440 --> 00:29:51,060 And the contact page also looks well prepared for deployment. 378 00:29:51,060 --> 00:29:54,970 So with this, we complete this exercise. 379 00:29:54,970 --> 00:29:57,365 After all the grunting, 380 00:29:57,365 --> 00:30:00,560 I'm sure you need to catch your breath. 381 00:30:00,560 --> 00:30:09,400 Before you do that, make sure to do a good comment with the message "Grunt Part two."