1 00:00:03,550 --> 00:00:06,380 Time to start Grunting. 2 00:00:06,380 --> 00:00:10,280 In this and the next exercise we're going to repeat 3 00:00:10,280 --> 00:00:15,925 the same kind of setup as we did with the NPM scripts. 4 00:00:15,925 --> 00:00:22,405 In the first part, we're going to set up the conversion from SCSS to CSS. 5 00:00:22,405 --> 00:00:28,570 Then we'll set up a watch task and also serve up the code using browser sync. 6 00:00:28,570 --> 00:00:31,065 In the second part of the exercise, 7 00:00:31,065 --> 00:00:40,010 we'll make use of Usman and the various tasks to prepare the distribution fold. 8 00:00:40,010 --> 00:00:44,170 These exercises are by no means the only way of 9 00:00:44,170 --> 00:00:49,720 implementing Grunt configurations or call files. 10 00:00:49,720 --> 00:00:54,575 This is just an illustration of how we can make use of these tools. 11 00:00:54,575 --> 00:00:58,375 You may wish to come up with your own way of setting up 12 00:00:58,375 --> 00:01:03,320 your Grunt file and your call file for your projects. 13 00:01:03,320 --> 00:01:13,200 Our first step in making use of Grunt is to set up the Grunt CLI as a global NPM module. 14 00:01:13,200 --> 00:01:21,550 To do that, add the prompt type: NPM -g install Grunt CLI. 15 00:01:21,550 --> 00:01:25,190 This is the command line interface for Grunt. 16 00:01:25,190 --> 00:01:27,480 Once this is set up, 17 00:01:27,480 --> 00:01:34,690 then we will set up a local Grunt NPM module for use within our projects. 18 00:01:34,690 --> 00:01:38,370 The Grunt CLI allows us to make use of Grunt. 19 00:01:38,370 --> 00:01:40,050 We have set up the Grunt CLI. 20 00:01:40,050 --> 00:01:47,405 Then the next step is to set up- Grunt locally, 21 00:01:47,405 --> 00:01:52,655 so; NPM install Grunt minus minus save dev. 22 00:01:52,655 --> 00:01:56,365 Then install the Grunt locally. 23 00:01:56,365 --> 00:01:58,930 Once you have completed those two steps, 24 00:01:58,930 --> 00:02:04,850 the next step is to go to our project and then create a new file, 25 00:02:04,850 --> 00:02:10,165 and we'll name it as Gruntfile.js. 26 00:02:10,165 --> 00:02:19,034 Inside this Gruntfile.js, we'll set up the code for configuring our Grunt tasks. 27 00:02:19,034 --> 00:02:27,770 In this file, the first step is to add 'use strict' meaning, 28 00:02:27,770 --> 00:02:30,640 'use strict' JavaScript code. 29 00:02:30,640 --> 00:02:36,460 Then you say module.exports 30 00:02:37,050 --> 00:02:42,830 = function (grunt). 31 00:02:44,990 --> 00:02:53,005 Then inside here, we will set up the Grunt configuration for all the tasks. 32 00:02:53,005 --> 00:02:57,655 As I mentioned earlier, Grunt is a configuration-based task runner. 33 00:02:57,655 --> 00:03:02,200 So, we will install the various Grunt plug-ins for 34 00:03:02,200 --> 00:03:08,370 the various tasks and then configure them in our Grunt file. 35 00:03:08,370 --> 00:03:10,769 To do the configuration, 36 00:03:10,769 --> 00:03:12,605 we will add in the code here, 37 00:03:12,605 --> 00:03:19,290 saying: grunt.initConfig 38 00:03:19,410 --> 00:03:28,655 and inside this initConfig, 39 00:03:28,655 --> 00:03:32,805 we'll add in the configuration for the wheel's Grunt tasks. 40 00:03:32,805 --> 00:03:34,580 Once you complete this, 41 00:03:34,580 --> 00:03:37,145 let's save the changes. 42 00:03:37,145 --> 00:03:39,385 In our next step, 43 00:03:39,385 --> 00:03:47,610 we will set up a few Grunt plug-ins to enable us to convert SCSS code into CSS code. 44 00:03:47,610 --> 00:03:54,240 To do that, I'll install a NPM module called 45 00:03:54,240 --> 00:04:01,875 Grunt SASS -- Grunt SASS, save def. 46 00:04:01,875 --> 00:04:03,450 In addition to this, 47 00:04:03,450 --> 00:04:07,375 I will set up two more Grunt modules called, 48 00:04:07,375 --> 00:04:18,610 NPM Install Time Grunt, and Jit Grunt. 49 00:04:19,990 --> 00:04:23,430 These two modules -- Time Grunt and Jit grunt. 50 00:04:23,430 --> 00:04:31,190 The Time Grunt module prints out the time statistics for running the various Grunt tasks. 51 00:04:31,190 --> 00:04:35,150 The Jit Grunt module is used for loading in 52 00:04:35,150 --> 00:04:40,420 those Grunt plug-ins whenever they are required within any application. 53 00:04:40,420 --> 00:04:42,860 The other alternative is to load in 54 00:04:42,860 --> 00:04:49,475 the various Grunt modules explicitly in your Grunt config file. 55 00:04:49,475 --> 00:04:53,085 I prefer to use the Jit Grunt so that it'll take care of loading 56 00:04:53,085 --> 00:04:56,790 in whatever Grunt plug-ins that I need as may be required, 57 00:04:56,790 --> 00:04:59,955 as in when I make use of them in the code. 58 00:04:59,955 --> 00:05:04,785 Install these two Time Grunt and Jit Grunt and once they are installed, 59 00:05:04,785 --> 00:05:11,845 then it is time to configure our SASS conversion task. 60 00:05:11,845 --> 00:05:14,870 Now you obviously must be wondering why do we type this 61 00:05:14,870 --> 00:05:18,250 module.exports and then function and so on. 62 00:05:18,250 --> 00:05:21,485 This is how we define node modules. 63 00:05:21,485 --> 00:05:26,590 We will deal with the structure of node modules and why we use this approach 64 00:05:26,590 --> 00:05:33,375 in the server-side node modules course later on in the specialization. 65 00:05:33,375 --> 00:05:38,415 For the moment, just accept that that's how the code is written for Grunt, 66 00:05:38,415 --> 00:05:41,040 because the Grunt file is itself 67 00:05:41,040 --> 00:05:47,110 a node module that is going to load in various Grunt plug-ins. 68 00:05:47,110 --> 00:05:51,815 After we do that, we are going to require a couple of Grunt plugins here. 69 00:05:51,815 --> 00:05:59,080 To do that, we'll say require('time- grunt'), 70 00:05:59,080 --> 00:06:08,840 and we'll say grunt versus the configuration that we use for loading in the Time Grunt. 71 00:06:08,840 --> 00:06:12,555 To require, as you'll learn later when you learn about node modules, 72 00:06:12,555 --> 00:06:16,660 is a way of saying that load in the Time Grunt node module to 73 00:06:16,660 --> 00:06:20,815 be used within this particular node module. 74 00:06:20,815 --> 00:06:28,450 Similarly, I will require Jit Grunt node module. 75 00:06:32,190 --> 00:06:37,095 This Jit Grunt node module makes sure that it will load in 76 00:06:37,095 --> 00:06:42,540 any other node modules or any other Grunt plug-ins- which are node modules, 77 00:06:42,540 --> 00:06:50,925 basically, as in when they are actually implied within my Grunt for doing various tasks. 78 00:06:50,925 --> 00:06:55,295 The alternative would be to manually load in each and every one of 79 00:06:55,295 --> 00:07:00,600 those Grunt plug-ins explicitly by using the required statement. 80 00:07:00,600 --> 00:07:04,445 I'm saving myself a little bit of trouble by just using Jit Grunt, 81 00:07:04,445 --> 00:07:07,825 which takes care of loading those node modules when required. 82 00:07:07,825 --> 00:07:11,395 Now moving into the configuration, 83 00:07:11,395 --> 00:07:16,159 as we understood, Grunt works on configuration, 84 00:07:16,159 --> 00:07:21,935 so every Grunt plug-in that we wish to employ for performing a task, 85 00:07:21,935 --> 00:07:27,225 it needs to be configured inside this Grunt initConfig file. 86 00:07:27,225 --> 00:07:32,965 This configuration basically is a JavaScript object basically. 87 00:07:32,965 --> 00:07:36,145 If you are familiar with JavaScript objects, 88 00:07:36,145 --> 00:07:40,275 you begin to understand the syntax very, very quickly. 89 00:07:40,275 --> 00:07:47,330 The first task that I'm going to configure is SASS. 90 00:07:47,330 --> 00:07:49,855 So, I type in SASS here, 91 00:07:49,855 --> 00:07:55,200 and then inside SASS, I say dist. 92 00:07:55,920 --> 00:08:01,570 Now you have to believe that this is how the configuration is done. 93 00:08:01,570 --> 00:08:03,280 So, I say dist, 94 00:08:03,280 --> 00:08:05,295 and then inside there, 95 00:08:05,295 --> 00:08:10,980 I say files, and then in there, 96 00:08:10,980 --> 00:08:14,125 I specify the files that need to be converted. 97 00:08:14,125 --> 00:08:20,270 I say, CSS/styles.CSS, which 98 00:08:20,270 --> 00:08:28,815 is dependent on CSS/styles.SCSS. 99 00:08:28,815 --> 00:08:36,925 With this, we complete the configuraton of the SASS task here. 100 00:08:36,925 --> 00:08:40,620 Once we complete configuring the SASS task, 101 00:08:40,620 --> 00:08:43,485 if you really wish to execute the SASS task, 102 00:08:43,485 --> 00:08:52,950 then down below you would configure the SASS task by saying "grunt.registerTask", 103 00:08:54,770 --> 00:08:58,545 and then I will call this task CSS, 104 00:08:58,545 --> 00:09:00,280 and then I will, 105 00:09:00,280 --> 00:09:04,935 in scribe brackets, say "SASS." 106 00:09:04,935 --> 00:09:07,605 Now, to understand the syntax here, 107 00:09:07,605 --> 00:09:13,715 this as you can see it says "grunt.registerTask" and this task's name is CSS. 108 00:09:13,715 --> 00:09:15,340 And what does this task involve? 109 00:09:15,340 --> 00:09:21,685 This task involves executing the SASS task which has already been configured here. 110 00:09:21,685 --> 00:09:25,080 This is how we read this syntax here. 111 00:09:25,080 --> 00:09:27,950 If you don't wish to, you don't need to configure this, 112 00:09:27,950 --> 00:09:33,065 because we'll employ SASS together with the watch task for automatically 113 00:09:33,065 --> 00:09:38,460 running the SASS when our SCSS file is changed. 114 00:09:38,460 --> 00:09:40,840 With this, let's save the changes. 115 00:09:40,840 --> 00:09:45,570 Let me show you this particular task in action. 116 00:09:45,570 --> 00:09:48,990 If you configure the task with the name CSS there, 117 00:09:48,990 --> 00:09:50,650 then add the prompt, 118 00:09:50,650 --> 00:09:54,655 you can type "grunt.CSS" and then it will execute 119 00:09:54,655 --> 00:10:00,090 the task of converting the sass code to CSS code. 120 00:10:00,090 --> 00:10:04,005 Going to your command prompt, at the prompt, 121 00:10:04,005 --> 00:10:09,070 type in "grunt.CSS" and you'll see 122 00:10:09,070 --> 00:10:17,530 the SASS task executing and then converting styles.sess file to styles.CSS file. 123 00:10:17,530 --> 00:10:19,390 Also, as you can see, 124 00:10:19,390 --> 00:10:23,340 the Time Grunt will print out statistics like this 125 00:10:23,340 --> 00:10:27,800 to indicate how much time each of those tasks took. 126 00:10:27,800 --> 00:10:29,520 If that is of interest to you, 127 00:10:29,520 --> 00:10:32,880 then you can look at these details here. 128 00:10:32,890 --> 00:10:39,360 In our next step, we're going to configure the watch and the server, 129 00:10:39,360 --> 00:10:41,800 in order to keep a watch on 130 00:10:41,800 --> 00:10:45,960 the SASS files and automatically convert them when they are changed, 131 00:10:45,960 --> 00:10:48,625 and then we'll set up the server, 132 00:10:48,625 --> 00:10:54,045 using browserSync for serving up our website. 133 00:10:54,045 --> 00:10:56,700 To set up the Watch and Serve Tasks, 134 00:10:56,700 --> 00:10:59,740 I'm going to install a couple of more grunt plug-ins, 135 00:10:59,740 --> 00:11:03,990 so I will say npm install, 136 00:11:04,300 --> 00:11:12,465 grunt-contrib-watch minus minus save-dev. 137 00:11:12,465 --> 00:11:15,480 So this is the grunt-contrib-watch. 138 00:11:15,480 --> 00:11:21,450 Grunt plug-in which is a node module, so install that. 139 00:11:21,670 --> 00:11:32,030 So the Watch plugin-in enables you to keep a watch on your various files. 140 00:11:32,030 --> 00:11:33,550 The next plug-in that I'm going 141 00:11:33,550 --> 00:11:43,750 to install is grunt-browser-sync. 142 00:11:44,770 --> 00:11:50,515 The browserSync module is the one that I'm going to make use of, 143 00:11:50,515 --> 00:11:54,230 for saving up the files from my project folder, 144 00:11:54,230 --> 00:12:00,090 so that I can see the website in a browser. 145 00:12:00,090 --> 00:12:04,845 Once I've installed those two modules, 146 00:12:04,845 --> 00:12:08,295 it's time to go into my grunt.initconfig, 147 00:12:08,295 --> 00:12:11,635 and then configure the two tasks. 148 00:12:11,635 --> 00:12:13,300 One for keeping a watch, 149 00:12:13,300 --> 00:12:18,125 the second one for serving up the files using browserSync. 150 00:12:18,125 --> 00:12:20,680 So, going back to my initconfig, 151 00:12:20,680 --> 00:12:23,710 put a comma there after the SASS, 152 00:12:23,710 --> 00:12:26,460 and then move onto the next line. 153 00:12:27,050 --> 00:12:32,650 Always remember to put this comma there. 154 00:12:32,650 --> 00:12:40,990 A missing comma causes a lot of headache when you're trying to run your grunt tasks. 155 00:12:40,990 --> 00:12:44,635 It's very difficult to identify that you've missed a comma. 156 00:12:44,635 --> 00:12:46,950 So it is important to pay attention to 157 00:12:46,950 --> 00:12:52,290 the syntax and make sure that you don't miss any of those commas. 158 00:12:52,290 --> 00:12:55,425 It'll come back to bite you at the wrong time. 159 00:12:55,425 --> 00:12:57,105 So the next task, 160 00:12:57,105 --> 00:13:00,190 that I'm going to configure is the watchTask. 161 00:13:00,190 --> 00:13:03,605 So I say Watch and what do I want to watch? 162 00:13:03,605 --> 00:13:10,070 I want to watch these files, which is CSS/*.SCSS. 163 00:13:10,120 --> 00:13:17,680 So this is the SCSS file that I want to watch. 164 00:13:17,680 --> 00:13:22,445 All the SCSS files in my CSS folder. 165 00:13:22,445 --> 00:13:26,670 If any of them are modified, 166 00:13:26,670 --> 00:13:32,865 then the corresponding task that I'm going to execute is, SASS. 167 00:13:32,865 --> 00:13:36,180 The SASS task which I've already configured earlier. 168 00:13:36,180 --> 00:13:39,710 So with this, I've configured my watchTask, 169 00:13:39,710 --> 00:13:42,820 to keep a watch on the SCSS files and then 170 00:13:42,820 --> 00:13:46,075 automatically convert them by invoking the SASS. 171 00:13:46,075 --> 00:13:50,475 Now with the watchTask I can actually keep a watch on several files, 172 00:13:50,475 --> 00:13:55,650 and then automatically invoke the corresponding tasks for those files. 173 00:13:55,650 --> 00:13:57,895 So for example I can keep a watch on 174 00:13:57,895 --> 00:14:01,660 my JavaScript files and then automatically do JS hinting, 175 00:14:01,660 --> 00:14:04,465 when my files change. 176 00:14:04,465 --> 00:14:07,770 Or to do identification and so on. 177 00:14:07,770 --> 00:14:12,100 Now, the next one that I'm going to configure is browserSync. 178 00:14:12,100 --> 00:14:15,345 Again don't forget the comma after the watchTask, 179 00:14:15,345 --> 00:14:19,070 and then type in browserSync. 180 00:14:20,500 --> 00:14:26,369 I would say browserSync here and then for the browserSync, 181 00:14:26,369 --> 00:14:30,570 I would say configure a task inside. 182 00:14:30,570 --> 00:14:35,090 Now, this is the syntax that we use for putting in 183 00:14:35,090 --> 00:14:40,410 the configuration inside our grunt file. 184 00:14:40,410 --> 00:14:42,840 So it says browserSync dev. 185 00:14:42,840 --> 00:14:44,940 Now, if you ask me why, 186 00:14:44,940 --> 00:14:46,895 we just need to read the documentation, 187 00:14:46,895 --> 00:14:52,275 for each one of those plug-ins and then figure out how to configure those plug-ins. 188 00:14:52,275 --> 00:14:56,000 So, I have already read the documentation and I have figured out 189 00:14:56,000 --> 00:15:00,885 some basic setup for each of these tasks so that's why I'm just typing them in. 190 00:15:00,885 --> 00:15:03,525 Obviously if you want more flexibility, 191 00:15:03,525 --> 00:15:07,350 you may wish to read the corresponding documentation and then figure out 192 00:15:07,350 --> 00:15:11,655 other ways of configuring these tasks. 193 00:15:11,655 --> 00:15:18,010 My configuration here is just one way of addressing or solving the problems. 194 00:15:18,010 --> 00:15:22,850 So here I specify the bsFiles, 195 00:15:22,850 --> 00:15:28,685 so this file specify which files need to be watched for 196 00:15:28,685 --> 00:15:36,715 by my browserSync and then when any of these files change, 197 00:15:36,715 --> 00:15:44,805 then my browserSync will cause the browser to be reloaded. 198 00:15:44,805 --> 00:15:50,185 So I'm going to watch all the files in my CSS folder, 199 00:15:50,185 --> 00:15:53,220 HTML files in my project folder, 200 00:15:53,220 --> 00:15:57,945 and then all my JavaScript files in the JS folder. 201 00:15:57,945 --> 00:16:03,835 So, with this I have configured all those files on which I'm going to keep a watch, 202 00:16:03,835 --> 00:16:10,335 and then automatically cause a reload of my page when required. 203 00:16:10,335 --> 00:16:14,180 And then, the next configuration that I need to 204 00:16:14,180 --> 00:16:19,100 do is some more options, for my browserSync. 205 00:16:19,100 --> 00:16:23,230 So the options that I'm going to specify is, 206 00:16:23,510 --> 00:16:29,190 watchTask true, meaning that there is a watchTask running, 207 00:16:29,190 --> 00:16:33,130 and the base directory for my server. 208 00:16:33,130 --> 00:16:35,605 So I say baseDir, 209 00:16:35,605 --> 00:16:41,960 and then I specify, dot slash. 210 00:16:41,960 --> 00:16:43,720 So the current directory, 211 00:16:43,720 --> 00:16:45,880 as my base directory. 212 00:16:45,880 --> 00:16:47,740 So with these changes, 213 00:16:47,740 --> 00:16:51,815 let me save the changes to my grunt file, 214 00:16:51,815 --> 00:17:01,085 and then I'll go down below and then configure another grunt task, here called default. 215 00:17:01,085 --> 00:17:05,145 So, I would specify the task as default. 216 00:17:05,145 --> 00:17:08,720 For this default task, what do I need to do? 217 00:17:08,720 --> 00:17:12,060 I need to execute 218 00:17:12,160 --> 00:17:20,055 browserSync and also second task that I'm going to do is watch. 219 00:17:20,055 --> 00:17:24,590 I will have to do the browserSync task first and then the watchTask later. 220 00:17:24,590 --> 00:17:27,310 Because the browserSync task will start serving up my server. 221 00:17:27,310 --> 00:17:30,605 If I do the watchTask first and the browserSync task later, 222 00:17:30,605 --> 00:17:32,495 the watchTask will basically, 223 00:17:32,495 --> 00:17:38,260 stop everything and then all the remaining tasks behind that will not execute. 224 00:17:38,260 --> 00:17:40,525 So if you are using the watchTask, 225 00:17:40,525 --> 00:17:45,624 do that as a last one in the sequence that you specify in this square brackets. 226 00:17:45,624 --> 00:17:50,415 With this, my project is now configured, 227 00:17:50,415 --> 00:17:57,100 to both keep a watch on my SASS files and serve it up whenever required. 228 00:17:57,100 --> 00:17:59,670 So, this completes my grunt file, 229 00:17:59,670 --> 00:18:02,795 let's go back to our terminal. 230 00:18:02,795 --> 00:18:04,740 Going back to my terminal, 231 00:18:04,740 --> 00:18:07,670 I've opened another tab and then in this tab, 232 00:18:07,670 --> 00:18:11,335 I'm going to run the grunt task, 233 00:18:11,335 --> 00:18:17,010 which will also be keeping my browserSync running and will serve up 234 00:18:17,010 --> 00:18:22,965 files and automatically reload the web page, 235 00:18:22,965 --> 00:18:25,055 if any of those files change. 236 00:18:25,055 --> 00:18:30,790 So if you configure a task as a default task as we did in the exercise, 237 00:18:30,790 --> 00:18:32,125 then at the prompt, 238 00:18:32,125 --> 00:18:37,725 I just need to type grunt and then it'll automatically execute the default task. 239 00:18:37,725 --> 00:18:40,680 Once my grunt tasks starts running, 240 00:18:40,680 --> 00:18:44,015 you can see that it has started the browserSync and it is serving up 241 00:18:44,015 --> 00:18:48,600 the files and also it is running the watchTask, 242 00:18:48,600 --> 00:18:54,825 which is waiting for any changes to automatically run the SCSS task. 243 00:18:54,825 --> 00:19:01,460 To demonstrate to you how the SCSS task will be triggered, 244 00:19:01,460 --> 00:19:05,120 whenever I make any changes to my styles.SCSS file, 245 00:19:05,120 --> 00:19:07,725 so I brought up the styles.SCSS file, 246 00:19:07,725 --> 00:19:11,845 and I'm just simply going to save this file. 247 00:19:11,845 --> 00:19:14,175 And then you will notice that immediately, 248 00:19:14,175 --> 00:19:22,285 on the left side the SASS task is invoked and runs and then re-compiles and this 249 00:19:22,285 --> 00:19:30,705 also will cause the styles.SCSS file to be changed, after being recompiled. 250 00:19:30,705 --> 00:19:38,045 Then this will trigger the browserSync to automatically reload my web page. 251 00:19:38,045 --> 00:19:43,750 With this, we complete our grunt part one exercise. 252 00:19:43,750 --> 00:19:48,659 This is a good time to save your files, 253 00:19:48,659 --> 00:19:54,960 to the Git Repository with the message Grunt part one.