[MUSIC]

[APPLAUSE] >> Hi,

my name is Alex Newman, and I am from Philadelphia, I live in Philly.

And today I'm gonna talk to you about Grunt and

all of the great things that you can do to speed up and

create a static site process.

So, just a little bit about me.

I'm the co-owner of Copter Labs.

I have two cats.

That is Tim and that is Una.

And I work with awesome clients, startups, agencies, build really cool stuff.

Basically, I just like building things.

So, about Grunt.

Repetitive tasks, we do them every day while we're coding.

We go and we find some piece that we reuse, and there are so

many things that we have to do that are repetitive.

And it takes away the focus from the work that we have to do.

They take up a lot of time.

They're super annoying.

And I want this GIF to stop poking me.

So, what is a task runner?

Yeah, that's an automated Tinder machine that I built, actually.

>> [LAUGH] >> A task runner is a tool that allows you

to streamline your web development process.

Why?

Because automation.

It's all about saving time and making your life easier.

Because I'm lazy.

I'm not perfect, and I can't know everything.

Task automation can fill in those gaps.

And because I'm not perfect,

I tend to get lazy with the things I should do when developing and shipping.

I can set it up once and ship amazing code.

So what kind of things can we do with task automation?

We can live reload the browser when you save a file.

Compile Less or Sass.

Minify and compress JavaScript.

Compress images.

Set up vendor prefixes for our CSS.

Minify HTML and reduce file sizes for downloads.

Minify SVG files to reduce file sizes.

Wiredep is for wiring up project dependencies.

So if you use something like Bower to install jQuery or any type of front

end dependency, Wiredep will automatically put that into your source code.

You can find and replace text.

If you build something locally and you have to change the path of a link,

you can find and replace throughout your whole project as you build.

Jade is a template language, like,

basically kind of like a Haml-style HTML

template language that you can use to build your HTML files and

use JSON data and different things in it.

You can compile Markdown files as HTML files.

You can deploy to a staging server.

You can deploy to a production server.

You can lint your CSS and JavaScript.

If you can't find what's going on, you can automatically do that.

Build source maps.

When you go into Chrome, you can then go directly to where

your properties are in your JavaScript and your Less files.

Concatenate files, bring them together.

Basically, so many things.

There is a Grunt plugin for everything, and that's what's awesome.

So what is Grunt?

It is a task-based command line build tool for web development projects.

Basically, everything that I just said, you can find anything at all,

there's hundreds of plugins to choose from, installation is very easy, and

it's easy to keep with your project.

So as you create it, then it's reusable across your team.

Okay, so I'm gonna go through and

actually do some live demos of how this stuff works.

Some of the code can be fairly technical,

but it's simple once you get the hang of it.

So basically, setting up your Grunt project.

We're gonna create two files,

a package.json file and a Gruntfile.js.

The package is going to contain all of the plugins we're gonna install.

Packages get automatically added when we flag them with save or

save dev as we're creating them.

And the Gruntfile.js is your set of automation instructions.

Okay, so let's set up a simple Grunt HTTP server.

We're starting our project out and we want to be able to load everything up in

the browser, and have it automatically reload while we save our files.

So, here, let me go here.

So here is our Grunt file, and our initial configuration is for

a Grunt plugin called connect.

Connect allows you to create a web server on the fly.

So down here we're going to add two things.

We're going to add connect and watch.

Watch actually sits there and listens for file changes.

So no matter what file you're working with, you can set it to listen for

file changes and then run whatever tasks you want.

And then down here, I'm creating and

registering a task called serve that I'm then running as default.

So let me go here and just type grunt.

And, we have Hello World!

That basically showed up right here.

So that is just my basic server that's running.

For the files that we're gonna create.

Let me move this back here.

Okay.

Another thing that we're gonna do with our project is,

we are going to concatenate and minify our JavaScript.

So with that, we can use a, that's actually, there we go.

That's much better.

This way we can actually take our large JavaScript files,

merge them together, and serve them as a single file.

That's great for project speed and efficiency while it's loading.

You wanna try and load as least amount of files as possible

when you're loading a project, just to keep it efficient.

So again, here, we're gonna set up the properties.

And we're gonna set up the Grunt file.

Okay. So

In my head, this was all way more exciting.

>> [LAUGH] >> When I was doing it.

I just wanna let you know that.

I mean, yeah.

Exactly.

So Let's just enable all this stuff.

And I'm going to run this again.

And I got an error, of course.

Because I didn't enable that or that.

Okay.

That's the trouble with making the screen size, the text size, so big.

So now

I'm excited that none of this is working.

That's why.

Okay.

There we go.

This text was written with JavaScript.

So basically what I did here, was I created just a simple script and

you can see what it now does after I ran Grunt, is it created this

main.min.js.

So what it did was it moved everything on one line and separated by commas.

Now, if you have more complex JavaScript,

it's going to do all of that compression and different things.

You can set it up to different compression levels.

You can set it up with rules for

how you want this file to be.

Additionally, you can create a source map with it.

So if you have 1,000 lines of JavaScript but

you want to debug it in the browser while you're developing it,

you can have Grunt automatically minify everything.

And then when you're going to inspect the source code,

you'll see a map to where it is in the original JavaScript file.

So you're not just presented with this minified,

giant application thing as you're working on it.

Okay.

We're gonna do.

Where did this go?

I'm doing real well today.

We're going to do the same thing with the CSS.

So here let me enable the CSS again.

So I'm personally using Less.

I know a lot of people like to use Sass.

I prefer Less because I use Bootstrap, and it was initially written in Bootstrap.

I find that it also kinda compiles a little bit faster for me then Sass does.

But argue amongst yourselves really.

That's one of those things.

Okay.

So Less.

Let me open this up.

So I just kind of did a simple stylesheet with some variables and things like that.

I want you to notice that I'm doing things like transition and transform.

So one of the things I'm gonna show you next is Autoprefixer.

And that will automatically do vendor prefixes on these properties in your CSS.

So you don't have to remember what's new, and

what needs to be prefixed, what doesn't need to be prefixed.

And when everybody decides that you no longer have to use the prefixes.

All of that stuff is handled automatically by Autoprefixer.

So now I have that.

Let's run this again.

There goes my stylesheet, and what's that?

>> [INAUDIBLE] >> No, I did.

Now it changed it to yellow, no?

I believe, here,

background blue.

Nope, I need to uncomment it like you said.

Fantastic.

No, it's uncommented.

>> [INAUDIBLE] >> Absolutely.

So far I feel like I'm doing great.

>> [LAUGH] At least we

have a really smart audience that can help me out.

I like that.

I like going to talks where I know what the speaker's talking about.

So that way I can be like, does he know more than me?

Do I know more than him?

Okay, let's try that one more time.

There we go.

Except did it show up blue here?

Okay, yeah, it looks white up here.

It looks blue on this screen.

That's exciting.

Okay so, next I'm gonna go into the Autoprefixer and

basically let me just enable it because I already explained it.

Okay.

So it didn't change much here.

But if we go to main.min.css.

We'll see now that it automatically prefixed those properties for you.

Okay, next up is.

The watch task.

So, the watch task is something you can set up to listen to any file changes and

at that point, once the files change,

you can then live reload those file changes in the browser.

So let's go back here to my wonderful code that's been working so

well so far, and I'm going to enable JavaScript.

And the CSS task, now.

Now, basically what you're doing here is you're kind of treeing out your options.

So, for JavaScript, I'm having it listen to main.js.

It's gonna listen for a file change.

It's going to run this task, and then it's gonna live reload.

Now, if you notice here on CSS, I'm actually running two tasks.

I'm running the less:style task In the main autoprefixer task,

that are both outlined up here.

It's gonna run less first, and

then it's gonna autoprefix inside main.min.css.

Okay, so now it's a bit more magical,

because I don't have to keep running Grunt over and over again.

So I have this.

Live reload is on.

And if I change.

The primary color, it automatically changes.

Okay now to get into a little bit more of the complex stuff.

So the name of this talk is how to roll your own static site generator with Grunt.

Now, there are plenty of static site generators available.

One of them is Hexo that I've used.

Another one is Jekyll that a lot of people are familiar with.

So why do your own?

And my reasoning is I'm not always building a blog.

I'm not always building

a project that's gonna conform to those other static site generators.

Maybe I wanna build something that just

builds a single long page with a bunch of pieces of data.

Maybe I want to include my own markdown files and not have to worry or

work within the constraints of another product.

So basically, what I like to do is use Jade Templates.

So again, Jade Templates are HTML-style templates,

they're like Hammel style.

Let me show you.

So basically what it is is, it's treed out with tabs and

you can use CSS names for your mark up elements and

different things like that, so what I'm doing in this j

template is I am reading from a JSON file that I created so

that I can create three separate blog posts on my page.

If I go back here to.

To my Jade property.

I'm gonna make this a little bit smaller so you can all see it better.

Okay, so.

What I'm doing here is I'm loading in the data that I want,

and you can load it from an API as well.

I am loading in this blog-post.json.

And I just made a simple post right here,

simple file that has Blog Post Title 1, Post Title 2, and Post Title 3.

And I'm building two files out.

One is index html and then one is a template for my blogpost.html.

So let me run it one more time, now that I have that enabled,

but I don't actually have enabled.

I'm about to have it enabled.

Okay.

So now I have my blog.

I like using filler images.

I'm a big fan of Nick Cage.

He's a good guy.

And obviously Vanilla Ice because I'm from Miami.

So I kind of have a soft spot for the baby of Ice Ice's.

So, I generated these blog posts out of that JSON file.

Now you see right here it says content.

That's actually a demarcation for my mark down data which I'm gonna go into next.

So if I enable markdown,

I'm doing two things here.

One, I'm going into index.html and I'm using this content.md markdown file.

So that's just that first top part, so that file is being loaded by markdown.

Additionally, I'm creating multiple blog posts based on

all the markdown files that are in my data blog post so.

Just to show you a simple mark down file.

And now I'm gonna flip on watch, so that it listens for

my changes to the JSON files and the markdown files.

Let's go here.

Again, I did this again.

There we go.

So now it loaded up that mark down data from that file that I created.

And now I'm linked to my blog posts.

So basically it's very simple.

It's not as robust as Jekyll or something like that.

But it can be.

You can add more to it.

And kind of do whatever you want with it.

I like the freedom to not have to work within those constraints,

because my projects always vary since I'm working for different clients.

So, let's go back here.

Okay, so Grunt solves problems, and I figured it would be a cool

way to kind of introduce to you guys some great plug-ins.

Through the power and majesty that is animated GIF, or GIF.

I like to say GIF because I like peanut butter.

That's not true.

Long boring JavaScript files.

Oh no.

What are we gonna do?

Those can be solved by uglifying the JavaScript.

So that will take the JavaScript and compact it into a single file.

You can find that and easily install it like so.

Dirty files and folders.

This always happens when you're creating stuff.

You have a bunch of different pieces of the puzzle.

And then when you're building our your project you don't want all of this extra

mess, so Grunt has a plug in called clean that will allow you to remove

extraneous pieces and files from your project.

Why is my code broken?

I know you all are probably wondering why my code is broken.

Well, it's because we're not perfect.

But we can hint our files and

then it'll tell you exactly what the problem is with all of your stuff.

I have to copy everything.

Solved with copy, which allows you to copy files to your build folder.

I have too many files!

That always happens.

We can concatenate them and turn them into one awesome JavaScript file.

Awesome.

My pictures download slowsies.

Imagemin.

So, you save a file, listen to the changes for your images, and

then it'll automatically compress PNG files,

basically any type of image file, and get it ready for production.

Too many dependencies.

She is dependent upon alcohol.

Solved with wiredep.

So, again, wiredep is a great tool that will automatically

wire in your Bower dependencies.

So all you have to do is type,

Bower install so-and-so and this handles the rest for you.

You don't have to go to various different files in your project.

And you can even customize it to go into anything.

I do a lot of WordPress development.

And I have wiredep customized so they it actually puts my

scripts into the functions.php file for WordPress,

and does it the WordPress way so I can still use it and

do everything the standard method for developing WordPress.

Why does my site look weird?

Because I made a huge mistake.

CSSLint, similar to JSLint.

It'll go through and tell you if any of your CSS has issues.

If you're not using the right syntax, or whatever the case may be.

All my links are wrong, solved with replace.

Working locally and then working remotely or working on two different servers.

You can set up to replace automatically change the text,

the URL or whatever you want within your entire project.

So, basically to recap

if you're not automating your development process you're gonna have a bad time.

And it's real easy to automate things with Grunt.

Web designers are people too, with real problems and real feelings.

Let Grunt help you find your happy place.

The end.

>> [APPLAUSE]

[MUSIC]