Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Start a free Basic trial
to watch this video
Create Your Own Static Site Generator with Grunt
29:21 with Alex NewmanAre you tired of learning how to use other people's content management systems? Do you get frustrated with slow databases and even slower site deployments? Does the thought of knowing how to properly vendor prefix your CSS make you a sad panda? Let's talk Grunt, folks! Grunt is a super easy-to-configure task automator written in JavaScript. In this talk you will learn how to set up a Grunt project that will compile CSS from your favourite pre-processor, automatically add vendor-prefixes, create source maps to go along with it, compress your PNG files, concatenate and minify your JavaScript, compile a simple HTML template language called Jade using JSON data and Markdown files to easily generate static content, and automatically deploy your site to a remote server all in one fell swoop! Alex will guide you through a step-by-step process that will save you a ton of time and effort and revolutionise your front-end development workflow.
-
0:00
[MUSIC]
-
0:12
[APPLAUSE] >> Hi,
-
0:17
my name is Alex Newman, and I am from Philadelphia, I live in Philly.
-
0:23
And today I'm gonna talk to you about Grunt and
-
0:28
all of the great things that you can do to speed up and
-
0:34
create a static site process.
-
0:38
So, just a little bit about me.
-
0:41
I'm the co-owner of Copter Labs.
-
0:44
I have two cats.
-
0:47
That is Tim and that is Una.
-
0:49
And I work with awesome clients, startups, agencies, build really cool stuff.
-
0:55
Basically, I just like building things.
-
0:59
So, about Grunt.
-
1:01
Repetitive tasks, we do them every day while we're coding.
-
1:06
We go and we find some piece that we reuse, and there are so
-
1:12
many things that we have to do that are repetitive.
-
1:17
And it takes away the focus from the work that we have to do.
-
1:21
They take up a lot of time.
-
1:24
They're super annoying.
-
1:26
And I want this GIF to stop poking me.
-
1:30
So, what is a task runner?
-
1:34
Yeah, that's an automated Tinder machine that I built, actually.
-
1:37
>> [LAUGH] >> A task runner is a tool that allows you
-
1:42
to streamline your web development process.
-
1:46
Why?
-
1:47
Because automation.
-
1:48
It's all about saving time and making your life easier.
-
1:53
Because I'm lazy.
-
1:55
I'm not perfect, and I can't know everything.
-
2:00
Task automation can fill in those gaps.
-
2:04
And because I'm not perfect,
-
2:06
I tend to get lazy with the things I should do when developing and shipping.
-
2:11
I can set it up once and ship amazing code.
-
2:16
So what kind of things can we do with task automation?
-
2:22
We can live reload the browser when you save a file.
-
2:27
Compile Less or Sass.
-
2:30
Minify and compress JavaScript.
-
2:34
Compress images.
-
2:37
Set up vendor prefixes for our CSS.
-
2:42
Minify HTML and reduce file sizes for downloads.
-
2:47
Minify SVG files to reduce file sizes.
-
2:51
Wiredep is for wiring up project dependencies.
-
2:56
So if you use something like Bower to install jQuery or any type of front
-
3:02
end dependency, Wiredep will automatically put that into your source code.
-
3:08
You can find and replace text.
-
3:11
If you build something locally and you have to change the path of a link,
-
3:18
you can find and replace throughout your whole project as you build.
-
3:21
Jade is a template language, like,
-
3:26
basically kind of like a Haml-style HTML
-
3:32
template language that you can use to build your HTML files and
-
3:41
use JSON data and different things in it.
-
3:47
You can compile Markdown files as HTML files.
-
3:51
You can deploy to a staging server.
-
3:54
You can deploy to a production server.
-
3:57
You can lint your CSS and JavaScript.
-
4:00
If you can't find what's going on, you can automatically do that.
-
4:04
Build source maps.
-
4:06
When you go into Chrome, you can then go directly to where
-
4:11
your properties are in your JavaScript and your Less files.
-
4:15
Concatenate files, bring them together.
-
4:18
Basically, so many things.
-
4:22
There is a Grunt plugin for everything, and that's what's awesome.
-
4:27
So what is Grunt?
-
4:28
It is a task-based command line build tool for web development projects.
-
4:35
Basically, everything that I just said, you can find anything at all,
-
4:40
there's hundreds of plugins to choose from, installation is very easy, and
-
4:44
it's easy to keep with your project.
-
4:48
So as you create it, then it's reusable across your team.
-
4:55
Okay, so I'm gonna go through and
-
4:58
actually do some live demos of how this stuff works.
-
5:02
Some of the code can be fairly technical,
-
5:06
but it's simple once you get the hang of it.
-
5:09
So basically, setting up your Grunt project.
-
5:12
We're gonna create two files,
-
5:16
a package.json file and a Gruntfile.js.
-
5:21
The package is going to contain all of the plugins we're gonna install.
-
5:25
Packages get automatically added when we flag them with save or
-
5:30
save dev as we're creating them.
-
5:32
And the Gruntfile.js is your set of automation instructions.
-
5:41
Okay, so let's set up a simple Grunt HTTP server.
-
5:48
We're starting our project out and we want to be able to load everything up in
-
5:53
the browser, and have it automatically reload while we save our files.
-
6:00
So, here, let me go here.
-
6:06
So here is our Grunt file, and our initial configuration is for
-
6:13
a Grunt plugin called connect.
-
6:17
Connect allows you to create a web server on the fly.
-
6:22
So down here we're going to add two things.
-
6:27
We're going to add connect and watch.
-
6:29
Watch actually sits there and listens for file changes.
-
6:33
So no matter what file you're working with, you can set it to listen for
-
6:37
file changes and then run whatever tasks you want.
-
6:41
And then down here, I'm creating and
-
6:44
registering a task called serve that I'm then running as default.
-
6:50
So let me go here and just type grunt.
-
6:57
And, we have Hello World!
-
7:08
That basically showed up right here.
-
7:11
So that is just my basic server that's running.
-
7:16
For the files that we're gonna create.
-
7:20
Let me move this back here.
-
7:23
Okay.
-
7:32
Another thing that we're gonna do with our project is,
-
7:36
we are going to concatenate and minify our JavaScript.
-
7:41
So with that, we can use a, that's actually, there we go.
-
7:47
That's much better.
-
7:51
This way we can actually take our large JavaScript files,
-
7:55
merge them together, and serve them as a single file.
-
8:01
That's great for project speed and efficiency while it's loading.
-
8:07
You wanna try and load as least amount of files as possible
-
8:11
when you're loading a project, just to keep it efficient.
-
8:15
So again, here, we're gonna set up the properties.
-
8:22
And we're gonna set up the Grunt file.
-
8:30
Okay. So
-
8:51
In my head, this was all way more exciting.
-
8:54
>> [LAUGH] >> When I was doing it.
-
8:57
I just wanna let you know that.
-
8:59
I mean, yeah.
-
9:02
Exactly.
-
9:04
So Let's just enable all this stuff.
-
9:12
And I'm going to run this again.
-
9:15
And I got an error, of course.
-
9:23
Because I didn't enable that or that.
-
9:27
Okay.
-
9:30
That's the trouble with making the screen size, the text size, so big.
-
9:39
So now
-
9:58
I'm excited that none of this is working.
-
10:04
That's why.
-
10:05
Okay.
-
10:25
There we go.
-
10:26
This text was written with JavaScript.
-
10:28
So basically what I did here, was I created just a simple script and
-
10:34
you can see what it now does after I ran Grunt, is it created this
-
10:41
main.min.js.
-
10:47
So what it did was it moved everything on one line and separated by commas.
-
10:51
Now, if you have more complex JavaScript,
-
10:53
it's going to do all of that compression and different things.
-
10:58
You can set it up to different compression levels.
-
11:01
You can set it up with rules for
-
11:08
how you want this file to be.
-
11:10
Additionally, you can create a source map with it.
-
11:13
So if you have 1,000 lines of JavaScript but
-
11:17
you want to debug it in the browser while you're developing it,
-
11:22
you can have Grunt automatically minify everything.
-
11:27
And then when you're going to inspect the source code,
-
11:31
you'll see a map to where it is in the original JavaScript file.
-
11:36
So you're not just presented with this minified,
-
11:39
giant application thing as you're working on it.
-
11:45
Okay.
-
11:49
We're gonna do.
-
11:55
Where did this go?
-
11:57
I'm doing real well today.
-
11:58
We're going to do the same thing with the CSS.
-
12:05
So here let me enable the CSS again.
-
12:18
So I'm personally using Less.
-
12:20
I know a lot of people like to use Sass.
-
12:23
I prefer Less because I use Bootstrap, and it was initially written in Bootstrap.
-
12:28
I find that it also kinda compiles a little bit faster for me then Sass does.
-
12:34
But argue amongst yourselves really.
-
12:39
That's one of those things.
-
12:43
Okay.
-
12:47
So Less.
-
12:52
Let me open this up.
-
13:00
So I just kind of did a simple stylesheet with some variables and things like that.
-
13:09
I want you to notice that I'm doing things like transition and transform.
-
13:16
So one of the things I'm gonna show you next is Autoprefixer.
-
13:20
And that will automatically do vendor prefixes on these properties in your CSS.
-
13:26
So you don't have to remember what's new, and
-
13:31
what needs to be prefixed, what doesn't need to be prefixed.
-
13:34
And when everybody decides that you no longer have to use the prefixes.
-
13:38
All of that stuff is handled automatically by Autoprefixer.
-
13:42
So now I have that.
-
13:52
Let's run this again.
-
14:00
There goes my stylesheet, and what's that?
-
14:07
>> [INAUDIBLE] >> No, I did.
-
14:09
Now it changed it to yellow, no?
-
14:12
I believe, here,
-
14:16
background blue.
-
14:28
Nope, I need to uncomment it like you said.
-
14:32
Fantastic.
-
14:33
No, it's uncommented.
-
14:34
>> [INAUDIBLE] >> Absolutely.
-
14:45
So far I feel like I'm doing great.
-
14:47
>> [LAUGH] At least we
-
14:52
have a really smart audience that can help me out.
-
14:58
I like that.
-
14:58
I like going to talks where I know what the speaker's talking about.
-
15:03
So that way I can be like, does he know more than me?
-
15:06
Do I know more than him?
-
15:10
Okay, let's try that one more time.
-
15:17
There we go.
-
15:22
Except did it show up blue here?
-
15:25
Okay, yeah, it looks white up here.
-
15:29
It looks blue on this screen.
-
15:29
That's exciting.
-
15:31
Okay so, next I'm gonna go into the Autoprefixer and
-
15:38
basically let me just enable it because I already explained it.
-
15:59
Okay.
-
16:00
So it didn't change much here.
-
16:02
But if we go to main.min.css.
-
16:06
We'll see now that it automatically prefixed those properties for you.
-
16:12
Okay, next up is.
-
16:27
The watch task.
-
16:27
So, the watch task is something you can set up to listen to any file changes and
-
16:33
at that point, once the files change,
-
16:36
you can then live reload those file changes in the browser.
-
16:42
So let's go back here to my wonderful code that's been working so
-
16:49
well so far, and I'm going to enable JavaScript.
-
16:57
And the CSS task, now.
-
17:06
Now, basically what you're doing here is you're kind of treeing out your options.
-
17:12
So, for JavaScript, I'm having it listen to main.js.
-
17:16
It's gonna listen for a file change.
-
17:20
It's going to run this task, and then it's gonna live reload.
-
17:25
Now, if you notice here on CSS, I'm actually running two tasks.
-
17:29
I'm running the less:style task In the main autoprefixer task,
-
17:35
that are both outlined up here.
-
17:37
It's gonna run less first, and
-
17:41
then it's gonna autoprefix inside main.min.css.
-
17:49
Okay, so now it's a bit more magical,
-
17:52
because I don't have to keep running Grunt over and over again.
-
18:01
So I have this.
-
18:04
Live reload is on.
-
18:07
And if I change.
-
18:11
The primary color, it automatically changes.
-
18:26
Okay now to get into a little bit more of the complex stuff.
-
18:31
So the name of this talk is how to roll your own static site generator with Grunt.
-
18:39
Now, there are plenty of static site generators available.
-
18:47
One of them is Hexo that I've used.
-
18:52
Another one is Jekyll that a lot of people are familiar with.
-
18:56
So why do your own?
-
19:01
And my reasoning is I'm not always building a blog.
-
19:05
I'm not always building
-
19:09
a project that's gonna conform to those other static site generators.
-
19:13
Maybe I wanna build something that just
-
19:16
builds a single long page with a bunch of pieces of data.
-
19:20
Maybe I want to include my own markdown files and not have to worry or
-
19:27
work within the constraints of another product.
-
19:32
So basically, what I like to do is use Jade Templates.
-
19:38
So again, Jade Templates are HTML-style templates,
-
19:43
they're like Hammel style.
-
19:46
Let me show you.
-
19:51
So basically what it is is, it's treed out with tabs and
-
19:57
you can use CSS names for your mark up elements and
-
20:02
different things like that, so what I'm doing in this j
-
20:08
template is I am reading from a JSON file that I created so
-
20:14
that I can create three separate blog posts on my page.
-
20:21
If I go back here to.
-
20:28
To my Jade property.
-
20:29
I'm gonna make this a little bit smaller so you can all see it better.
-
20:35
Okay, so.
-
20:39
What I'm doing here is I'm loading in the data that I want,
-
20:43
and you can load it from an API as well.
-
20:46
I am loading in this blog-post.json.
-
20:53
And I just made a simple post right here,
-
20:56
simple file that has Blog Post Title 1, Post Title 2, and Post Title 3.
-
21:03
And I'm building two files out.
-
21:08
One is index html and then one is a template for my blogpost.html.
-
21:14
So let me run it one more time, now that I have that enabled,
-
21:21
but I don't actually have enabled.
-
21:25
I'm about to have it enabled.
-
21:42
Okay.
-
21:42
So now I have my blog.
-
21:45
I like using filler images.
-
21:49
I'm a big fan of Nick Cage.
-
21:51
He's a good guy.
-
21:52
And obviously Vanilla Ice because I'm from Miami.
-
21:56
So I kind of have a soft spot for the baby of Ice Ice's.
-
22:02
So, I generated these blog posts out of that JSON file.
-
22:09
Now you see right here it says content.
-
22:12
That's actually a demarcation for my mark down data which I'm gonna go into next.
-
22:20
So if I enable markdown,
-
22:25
I'm doing two things here.
-
22:28
One, I'm going into index.html and I'm using this content.md markdown file.
-
22:37
So that's just that first top part, so that file is being loaded by markdown.
-
22:44
Additionally, I'm creating multiple blog posts based on
-
22:50
all the markdown files that are in my data blog post so.
-
22:59
Just to show you a simple mark down file.
-
23:04
And now I'm gonna flip on watch, so that it listens for
-
23:09
my changes to the JSON files and the markdown files.
-
23:16
Let's go here.
-
23:27
Again, I did this again.
-
23:45
There we go.
-
23:46
So now it loaded up that mark down data from that file that I created.
-
23:51
And now I'm linked to my blog posts.
-
23:58
So basically it's very simple.
-
24:01
It's not as robust as Jekyll or something like that.
-
24:08
But it can be.
-
24:09
You can add more to it.
-
24:12
And kind of do whatever you want with it.
-
24:15
I like the freedom to not have to work within those constraints,
-
24:20
because my projects always vary since I'm working for different clients.
-
24:24
So, let's go back here.
-
24:37
Okay, so Grunt solves problems, and I figured it would be a cool
-
24:42
way to kind of introduce to you guys some great plug-ins.
-
24:48
Through the power and majesty that is animated GIF, or GIF.
-
24:54
I like to say GIF because I like peanut butter.
-
24:58
That's not true.
-
25:02
Long boring JavaScript files.
-
25:04
Oh no.
-
25:05
What are we gonna do?
-
25:08
Those can be solved by uglifying the JavaScript.
-
25:12
So that will take the JavaScript and compact it into a single file.
-
25:17
You can find that and easily install it like so.
-
25:22
Dirty files and folders.
-
25:24
This always happens when you're creating stuff.
-
25:28
You have a bunch of different pieces of the puzzle.
-
25:30
And then when you're building our your project you don't want all of this extra
-
25:35
mess, so Grunt has a plug in called clean that will allow you to remove
-
25:42
extraneous pieces and files from your project.
-
25:49
Why is my code broken?
-
25:50
I know you all are probably wondering why my code is broken.
-
25:56
Well, it's because we're not perfect.
-
25:59
But we can hint our files and
-
26:02
then it'll tell you exactly what the problem is with all of your stuff.
-
26:09
I have to copy everything.
-
26:16
Solved with copy, which allows you to copy files to your build folder.
-
26:25
I have too many files!
-
26:27
That always happens.
-
26:29
We can concatenate them and turn them into one awesome JavaScript file.
-
26:37
Awesome.
-
26:40
My pictures download slowsies.
-
26:45
Imagemin.
-
26:46
So, you save a file, listen to the changes for your images, and
-
26:51
then it'll automatically compress PNG files,
-
26:55
basically any type of image file, and get it ready for production.
-
27:03
Too many dependencies.
-
27:04
She is dependent upon alcohol.
-
27:08
Solved with wiredep.
-
27:11
So, again, wiredep is a great tool that will automatically
-
27:16
wire in your Bower dependencies.
-
27:19
So all you have to do is type,
-
27:22
Bower install so-and-so and this handles the rest for you.
-
27:26
You don't have to go to various different files in your project.
-
27:31
And you can even customize it to go into anything.
-
27:35
I do a lot of WordPress development.
-
27:38
And I have wiredep customized so they it actually puts my
-
27:43
scripts into the functions.php file for WordPress,
-
27:48
and does it the WordPress way so I can still use it and
-
27:53
do everything the standard method for developing WordPress.
-
28:01
Why does my site look weird?
-
28:03
Because I made a huge mistake.
-
28:06
CSSLint, similar to JSLint.
-
28:10
It'll go through and tell you if any of your CSS has issues.
-
28:17
If you're not using the right syntax, or whatever the case may be.
-
28:23
All my links are wrong, solved with replace.
-
28:28
Working locally and then working remotely or working on two different servers.
-
28:32
You can set up to replace automatically change the text,
-
28:37
the URL or whatever you want within your entire project.
-
28:45
So, basically to recap
-
28:48
if you're not automating your development process you're gonna have a bad time.
-
28:54
And it's real easy to automate things with Grunt.
-
28:57
Web designers are people too, with real problems and real feelings.
-
29:03
Let Grunt help you find your happy place.
-
29:08
The end.
-
29:09
>> [APPLAUSE]
-
29:14
[MUSIC]
You need to sign up for Treehouse in order to download course files.
Sign up