Exercise (Video): Grunt Part 1

Loading...

En provenance du cours de The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

752 notes

The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

752 notes

Cours 1 sur 4 dans Specialization Full-Stack Web Development with React

This course will give you an overview of client-side web UI frameworks, in particular Bootstrap 4. You will learn about grids and responsive design, Bootstrap CSS and JavaScript components. You will learn about CSS preprocessors, Less and Sass. You will also learn the basics of Node.js and NPM and task runners like Grunt and Gulp. At the end of this course, you will be able to a)Set up, design and style a web page using Bootstrap 4 and its components, b) Create a responsive web page design, and c) Make use of web tools to setup and manage web sites. This course also includes an honors track that enables you to work on your own project developing a website using Bootstrap 4. Students enrolling in this course should have prior good working knowledge of HTML, CSS and JavaScript.

À partir de la leçon

Web Tools

This module rounds out our discussions on Bootstrap JavaScript components. Then we discuss CSS preprocessors, Less and Sass. Finally, we discuss building and deployment of our Web projects through task automation using NPM scripts, and task runners like Grunt and Gulp. The final assignment of this course needs to be completed at the end of this module.

Task Runners4:58

Exercise (Video): Grunt Part 119:57

Exercise (Video): Grunt Part 230:11

Exercise (Video): Gulp Part 116:07

Exercise (Video): Gulp Part 220:36

Rencontrer les enseignants

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

Time to start Grunting.

In this and the next exercise we're going to repeat

the same kind of setup as we did with the NPM scripts.

In the first part, we're going to set up the conversion from SCSS to CSS.

Then we'll set up a watch task and also serve up the code using browser sync.

In the second part of the exercise,

we'll make use of Usman and the various tasks to prepare the distribution fold.

These exercises are by no means the only way of

implementing Grunt configurations or call files.

This is just an illustration of how we can make use of these tools.

You may wish to come up with your own way of setting up

your Grunt file and your call file for your projects.

Our first step in making use of Grunt is to set up the Grunt CLI as a global NPM module.

To do that, add the prompt type: NPM -g install Grunt CLI.

This is the command line interface for Grunt.

Once this is set up,

then we will set up a local Grunt NPM module for use within our projects.

The Grunt CLI allows us to make use of Grunt.

We have set up the Grunt CLI.

Then the next step is to set up- Grunt locally,

so; NPM install Grunt minus minus save dev.

Then install the Grunt locally.

Once you have completed those two steps,

the next step is to go to our project and then create a new file,

and we'll name it as Gruntfile.js.

Inside this Gruntfile.js, we'll set up the code for configuring our Grunt tasks.

In this file, the first step is to add 'use strict' meaning,

'use strict' JavaScript code.

Then you say module.exports

= function (grunt).

Then inside here, we will set up the Grunt configuration for all the tasks.

As I mentioned earlier, Grunt is a configuration-based task runner.

So, we will install the various Grunt plug-ins for

the various tasks and then configure them in our Grunt file.

To do the configuration,

we will add in the code here,

saying: grunt.initConfig

and inside this initConfig,

we'll add in the configuration for the wheel's Grunt tasks.

Once you complete this,

let's save the changes.

In our next step,

we will set up a few Grunt plug-ins to enable us to convert SCSS code into CSS code.

To do that, I'll install a NPM module called

Grunt SASS -- Grunt SASS, save def.

In addition to this,

I will set up two more Grunt modules called,

NPM Install Time Grunt, and Jit Grunt.

These two modules -- Time Grunt and Jit grunt.

The Time Grunt module prints out the time statistics for running the various Grunt tasks.

The Jit Grunt module is used for loading in

those Grunt plug-ins whenever they are required within any application.

The other alternative is to load in

the various Grunt modules explicitly in your Grunt config file.

I prefer to use the Jit Grunt so that it'll take care of loading

in whatever Grunt plug-ins that I need as may be required,

as in when I make use of them in the code.

Install these two Time Grunt and Jit Grunt and once they are installed,

then it is time to configure our SASS conversion task.

Now you obviously must be wondering why do we type this

module.exports and then function and so on.

This is how we define node modules.

We will deal with the structure of node modules and why we use this approach

in the server-side node modules course later on in the specialization.

For the moment, just accept that that's how the code is written for Grunt,

because the Grunt file is itself

a node module that is going to load in various Grunt plug-ins.

After we do that, we are going to require a couple of Grunt plugins here.

To do that, we'll say require('time- grunt'),

and we'll say grunt versus the configuration that we use for loading in the Time Grunt.

To require, as you'll learn later when you learn about node modules,

is a way of saying that load in the Time Grunt node module to

be used within this particular node module.

Similarly, I will require Jit Grunt node module.

This Jit Grunt node module makes sure that it will load in

any other node modules or any other Grunt plug-ins- which are node modules,

basically, as in when they are actually implied within my Grunt for doing various tasks.

The alternative would be to manually load in each and every one of

those Grunt plug-ins explicitly by using the required statement.

I'm saving myself a little bit of trouble by just using Jit Grunt,

which takes care of loading those node modules when required.

Now moving into the configuration,

as we understood, Grunt works on configuration,

so every Grunt plug-in that we wish to employ for performing a task,

it needs to be configured inside this Grunt initConfig file.

This configuration basically is a JavaScript object basically.

If you are familiar with JavaScript objects,

you begin to understand the syntax very, very quickly.

The first task that I'm going to configure is SASS.

So, I type in SASS here,

and then inside SASS, I say dist.

Now you have to believe that this is how the configuration is done.

So, I say dist,

and then inside there,

I say files, and then in there,

I specify the files that need to be converted.

I say, CSS/styles.CSS, which

is dependent on CSS/styles.SCSS.

With this, we complete the configuraton of the SASS task here.

Once we complete configuring the SASS task,

if you really wish to execute the SASS task,

then down below you would configure the SASS task by saying "grunt.registerTask",

and then I will call this task CSS,

and then I will,

in scribe brackets, say "SASS."

Now, to understand the syntax here,

this as you can see it says "grunt.registerTask" and this task's name is CSS.

And what does this task involve?

This task involves executing the SASS task which has already been configured here.

This is how we read this syntax here.

If you don't wish to, you don't need to configure this,

because we'll employ SASS together with the watch task for automatically

running the SASS when our SCSS file is changed.

With this, let's save the changes.

Let me show you this particular task in action.

If you configure the task with the name CSS there,

then add the prompt,

you can type "grunt.CSS" and then it will execute

the task of converting the sass code to CSS code.

Going to your command prompt, at the prompt,

type in "grunt.CSS" and you'll see

the SASS task executing and then converting styles.sess file to styles.CSS file.

Also, as you can see,

the Time Grunt will print out statistics like this

to indicate how much time each of those tasks took.

If that is of interest to you,

then you can look at these details here.

In our next step, we're going to configure the watch and the server,

in order to keep a watch on

the SASS files and automatically convert them when they are changed,

and then we'll set up the server,

using browserSync for serving up our website.

To set up the Watch and Serve Tasks,

I'm going to install a couple of more grunt plug-ins,

so I will say npm install,

grunt-contrib-watch minus minus save-dev.

So this is the grunt-contrib-watch.

Grunt plug-in which is a node module, so install that.

So the Watch plugin-in enables you to keep a watch on your various files.

The next plug-in that I'm going

to install is grunt-browser-sync.

The browserSync module is the one that I'm going to make use of,

for saving up the files from my project folder,

so that I can see the website in a browser.

Once I've installed those two modules,

it's time to go into my grunt.initconfig,

and then configure the two tasks.

One for keeping a watch,

the second one for serving up the files using browserSync.

So, going back to my initconfig,

put a comma there after the SASS,

and then move onto the next line.

Always remember to put this comma there.

A missing comma causes a lot of headache when you're trying to run your grunt tasks.

It's very difficult to identify that you've missed a comma.

So it is important to pay attention to

the syntax and make sure that you don't miss any of those commas.

It'll come back to bite you at the wrong time.

So the next task,

that I'm going to configure is the watchTask.

So I say Watch and what do I want to watch?

I want to watch these files, which is CSS/*.SCSS.

So this is the SCSS file that I want to watch.

All the SCSS files in my CSS folder.

If any of them are modified,

then the corresponding task that I'm going to execute is, SASS.

The SASS task which I've already configured earlier.

So with this, I've configured my watchTask,

to keep a watch on the SCSS files and then

automatically convert them by invoking the SASS.

Now with the watchTask I can actually keep a watch on several files,

and then automatically invoke the corresponding tasks for those files.

So for example I can keep a watch on

my JavaScript files and then automatically do JS hinting,

when my files change.

Or to do identification and so on.

Now, the next one that I'm going to configure is browserSync.

Again don't forget the comma after the watchTask,

and then type in browserSync.

I would say browserSync here and then for the browserSync,

I would say configure a task inside.

Now, this is the syntax that we use for putting in

the configuration inside our grunt file.

So it says browserSync dev.

Now, if you ask me why,

we just need to read the documentation,

for each one of those plug-ins and then figure out how to configure those plug-ins.

So, I have already read the documentation and I have figured out

some basic setup for each of these tasks so that's why I'm just typing them in.

Obviously if you want more flexibility,

you may wish to read the corresponding documentation and then figure out

other ways of configuring these tasks.

My configuration here is just one way of addressing or solving the problems.

So here I specify the bsFiles,

so this file specify which files need to be watched for

by my browserSync and then when any of these files change,

then my browserSync will cause the browser to be reloaded.

So I'm going to watch all the files in my CSS folder,

HTML files in my project folder,

and then all my JavaScript files in the JS folder.

So, with this I have configured all those files on which I'm going to keep a watch,

and then automatically cause a reload of my page when required.

And then, the next configuration that I need to

do is some more options, for my browserSync.

So the options that I'm going to specify is,

watchTask true, meaning that there is a watchTask running,

and the base directory for my server.

So I say baseDir,

and then I specify, dot slash.

So the current directory,

as my base directory.

So with these changes,

let me save the changes to my grunt file,

and then I'll go down below and then configure another grunt task, here called default.

So, I would specify the task as default.

For this default task, what do I need to do?

I need to execute

browserSync and also second task that I'm going to do is watch.

I will have to do the browserSync task first and then the watchTask later.

Because the browserSync task will start serving up my server.

If I do the watchTask first and the browserSync task later,

the watchTask will basically,

stop everything and then all the remaining tasks behind that will not execute.

So if you are using the watchTask,

do that as a last one in the sequence that you specify in this square brackets.

With this, my project is now configured,

to both keep a watch on my SASS files and serve it up whenever required.

So, this completes my grunt file,

let's go back to our terminal.

Going back to my terminal,

I've opened another tab and then in this tab,

I'm going to run the grunt task,

which will also be keeping my browserSync running and will serve up

files and automatically reload the web page,

if any of those files change.

So if you configure a task as a default task as we did in the exercise,

then at the prompt,

I just need to type grunt and then it'll automatically execute the default task.

Once my grunt tasks starts running,

you can see that it has started the browserSync and it is serving up

the files and also it is running the watchTask,

which is waiting for any changes to automatically run the SCSS task.

To demonstrate to you how the SCSS task will be triggered,

whenever I make any changes to my styles.SCSS file,

so I brought up the styles.SCSS file,

and I'm just simply going to save this file.

And then you will notice that immediately,

on the left side the SASS task is invoked and runs and then re-compiles and this

also will cause the styles.SCSS file to be changed, after being recompiled.

Then this will trigger the browserSync to automatically reload my web page.

With this, we complete our grunt part one exercise.

This is a good time to save your files,

to the Git Repository with the message Grunt part one.

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2018 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play