Gulpfile Setup

[MUSIC] 0:00 Hey, what's up? 0:09 My name is Dustin and I'm a developer and technical evangelist here at Treehouse. 0:09 Today I wanna take you through setting up a gulp file for your project or app. 0:14 But what exactly is Gulp? 0:19 Well, Gulp is a JavaScript tool kit to automate and enhance your workflow. 0:20 But what exactly does that even mean? 0:25 Have you ever taken a look at someone else's code and 0:28 notice that everything was minified? 0:30 Or maybe you just took a look at their style sheet and 0:33 saw a ton of prefixes in there? 0:36 Surely the developer didn't write that themselves, right? 0:38 More than likely they use something like Gulp to automate that stuff for them. 0:42 Gulp is pretty powerful and 0:47 today I wanna take you through setting up your first gulp file. 0:48 It's actually pretty simple. 0:51 Take a look at the teacher's notes or 0:53 description of this video to get a link to our GitHub repo for this project. 0:54 While this will be a step by step guide, if you get stuck at any time along 0:58 the way, you can refer back to this repo, to look at the code. 1:02 Additionally, you can check out teamtreehouse.com/blog/gulpfile-setup for 1:06 a written version of this tutorial, which is also a step-by-step guide. 1:13 I would like to note that in order to understand this content comfortably, 1:20 it's recommended that you have a basic understanding of JavaScript, 1:25 as well as node.js and NPM. 1:31 Links to these resources can be found below in the teachers' notes or 1:33 description of the video. 1:36 So let's get started. 1:37 The first thing I'll do is set up a folder on my desktop. 1:40 You can create this folder anywhere you'd like. 1:43 I'll name it gulp file dash setup, and then drag it to my text editor. 1:45 The first thing we wanna do is download all of our dependencies for 1:51 this project via NPM. 1:56 And the easiest way we can do that is by opening up a terminal and 1:57 creating a package.json file for us. 2:01 You can do this by running npm init dash y. 2:04 And it will basically spin up a boilerplate package.json file for 2:08 us with everything we'll need to get started. 2:11 Next we wanna install our dependencies. 2:16 But doing so will create a node modules folder, 2:18 which is going to be full of many, many files and folders. 2:22 So we'd wanna ignore this. 2:26 We can create a .gitignore file and inside just write node_modules. 2:28 And should we track this project with Git in the future, 2:34 it'll ignore this folder for us. 2:37 We can close out of that file and head back to our terminal and 2:41 we can begin installing our packages. 2:44 We can write npm install, followed by our package names. 2:46 For this project, we'll use Gulp ,Gulp sass, sass, 2:51 Gulp-clean-css, gulp-autoprefixer and gulp-terser. 2:58 Once you have that typed out, just press enter and 3:05 your terminal will begin installing these packages for you. 3:08 This process shouldn't take very long and as soon as it's finished, 3:12 your package.json file should update with a list of all your new dependencies and 3:16 their version numbers. 3:20 Don't worry if your version numbers are different from mine, that is totally okay. 3:28 So let's go over these packages briefly. 3:32 The gulp package will give us access to all the things we need with Gulp. 3:35 Gulp sass as well as sass will compile our SCSS to CSS. 3:39 Our gulp clean CSS will minify our CSS and 3:45 gulp autoprefixer will automatically add our prefixers to our code. 3:47 And lastly, gulp terser will minify our JavaScript. 3:52 Next let's close out of our terminal. 3:58 We won't need that for now. 4:00 And the next thing we'll wanna do is create our actual gulp file and 4:02 we can call this gulpfile.js, and then press enter. 4:07 And I'm gonna move my gulp file to the right of my text editor so 4:12 that I can see my package.json file. 4:15 And I'll also close my explorer window so 4:18 that I have a little bit more space to work with. 4:20 The first thing we'll wanna do inside of our gulp file is destructure some things 4:23 from the gulp package itself. 4:26 So we'll destructure the source, which I'll spell src, 4:29 the destination, dest, series, and watch, and these will require gulp. 4:33 Next, let's set up our variables for 4:41 our SCSS autoprefixers and minifying our CSS. 4:44 We can name these variables anything we'd like, but if you're following along and 4:49 haven't used gulp before, it's probably a good idea to use what I'm using here so 4:53 that you're not confused along the way. 4:56 Our first variable we'll call scss, and 4:59 it will require the gulp sass package, which requires the sass package. 5:02 And this will compile our scsss into css for us. 5:09 Next we'll wanna set up a variable for our autoprefixer. 5:14 So we can call that autoprefixer. 5:17 And it will require Gulp autoprefixer. 5:20 And this will automatically add prefixers to all of our compiled css. 5:24 And lastly, we'll wanna minify our css. 5:29 So we can set up a variable for 5:31 css minify that will require gulp clean css. 5:34 And now we have all of our variables we'll need for our styles. 5:39 So let's work on our scripts next. 5:43 Scripts will be easy. 5:46 We're just going to minify our JavaScript. 5:47 So we can set up a variable for jsMinify, and it requires gulp terser. 5:50 And now we have all the variables we need. 5:56 We have scss, autoprefixer, cssMinify and jsMinify. 5:58 So now we can set up a function for our styles as well as a function for 6:05 our scripts. 6:08 We'll do function styles and we'll leave it empty for now. 6:11 And then we'll write function scripts. 6:15 And we'll also leave that one empty for now. 6:17 I'm going to close out of my package.json file because we don't need this anymore. 6:22 But next we should set up our directory structure. 6:27 So in the root of our project, I'll set up a new folder and I'll call it front end. 6:31 And inside of front end I will set up another folder and 6:35 I will name that one src which is short for source. 6:39 And then I'll set up one more folder inside the front end called dist, 6:43 D-I-S-T, which is short for distribution. 6:48 Inside of the source folder I'll create a folder for 6:51 our styles, as well as a folder for our scripts. 6:55 And now we have our basic folder structure that we'll need to get started with gulp. 6:59 Now we can begin to work inside of the functions that we created. 7:05 Inside the styles function we'll want to return and 7:09 what we're returning is the source. 7:12 Basically the source is going to be a path to where we want to look for 7:16 these changes so that we can apply our compiler, 7:21 our autoprefixer, and our minifier. 7:24 So inside of the source, 7:28 we'll type in frontend/src/styles. 7:32 And we wanna grab every folder or file in this path that has a .scss file inside. 7:37 And we can do that by writing asterisk, asterisk slash asterisk .scss. 7:44 Now that we have a path to our styles, 7:51 what we wanna do now is call those variables that we set up as methods. 7:54 And we can chain this on to our source by typing .pipe as a method and 7:59 inside of that, writing out our variable as a method. 8:03 So scss will compile our scss to css, then we can .pipe autoprefixer 8:07 which will take that compiled css and add prefixers to it. 8:13 And then lastly, we can pipe on cssMinify to 8:19 minify the compiled css with autoprefixers in them. 8:22 And we used our scss variable, autoprefixer variable, and 8:28 our cssMinify variable. 8:32 The last thing we'll wanna do is once we grab our source and 8:36 make all those changes, where do we wanna put the file? 8:39 So now we'll use the destination package that we grabbed from gulp earlier. 8:43 And we can chain that on by doing another .pipe and 8:48 the first method in there will be dest and 8:52 inside of that, we just give it a path to where we wanna place the file. 8:54 So we can do frontend/dist/styles. 8:59 Now this styles folder inside dest is not created yet, but it will do that for us. 9:05 Before we move on to our scripts, I wanna mention that inside of 9:11 the autoprefixer method in our styles function, we will need to write last two 9:15 versions as a string in order to get this package to work. 9:20 Once that's finished, we can start working on our scripts function, 9:26 which will behave pretty similarly to the styles one that we just set up. 9:30 So we'll return the source which 9:33 will be frontend/src/scripts/**/*.js. 9:39 And then we can pipe on our jsMinify. 9:47 And since that's the only thing that we're doing with the JavaScript, 9:54 we can go ahead and just pipe on our destination. 9:58 The destination for our JavaScript will be frontend/dist/scripts. 10:07 And that is it for our scripts and styles functions. 10:14 If you're used to JavaScript, you'll know by now that these functions don't actually 10:18 do anything until we call them. 10:22 So we'll need to set up a watch function to watch for 10:25 these changes in these files and then run these functions. 10:27 So we can call this watch task. 10:31 And next we can call our watch method that we grabbed from gulp earlier. 10:34 And this method will take two parameters. 10:39 The first is a path to the files that we wanna watch and 10:41 then what we wanna do when a change is detected. 10:45 Since we're watching the styles and the scripts, 10:48 we can set these file paths up in an array. 10:51 So the first item in the array will be the source to our styles. 10:54 And the second item will be a source to our scripts. 10:59 So I'll copy and paste those there, I'll add a comma and our second parameter 11:03 will be running the styles and scripts functions and the way that we can run both 11:08 of these is by using the series package that we got from gulp earlier. 11:13 Series is just a method that can run multiple functions at once. 11:17 So we can write series and then call our styles and scripts functions inside. 11:22 And we don't have to include the parentheses on these. 11:31 So just make sure that you write series and then the name of the functions inside. 11:33 And that's gonna be it for our gulp file. 11:39 The only thing left to do now is to export it. 11:41 So we can do that by writing exports.default = and we'll do series 11:44 again to call all of the functions that we created, styles, scripts, and watchTask. 11:49 And now our file is complete. 11:56 We call the watchTask function, the scripts function, and the styles function, 12:00 which use all the variables we set up. 12:04 Now that our gulp file is complete, you can save it, and 12:07 we can open up our package.json file. 12:10 We'll need to be able to call the gulp file somehow. 12:13 So this is how we can do that. 12:15 Under scripts, you can erase that test that is in there and 12:18 we can replace it with start. 12:21 And inside the start command, we can run npm install and gulp. 12:23 Npm install will just install all the dependencies should you clone this project 12:28 from a repository. 12:32 Gulp is the command that will actually run our gulp file. 12:35 So once that's saved, you can close out of everything and open up your terminal. 12:39 Inside your terminal, you want to run npm start, 12:45 which is the name of the command that we just set up. 12:49 And then your terminal will begin running your gulp file, and 12:52 it should look pretty similar to what I have here. 12:56 Where it calls the styles, scripts and watchTask functions. 12:59 Inside of front end, source, and then styles, let's create a new file. 13:05 We can call this app.scss. 13:10 And we could write some standard css in here. 13:14 Let's do margin 0, padding 0. 13:18 And we can set box-sizing to border box. 13:23 We can hit save, and you'll notice the terminal update. 13:27 And now inside of frontend and dist, we have a new folder called styles with 13:30 an app.css file in there, and everything's minified. 13:35 And if you look closely, you'll see some prefixes in there that were handled for 13:39 us automatically. 13:43 Pretty neat, right? 13:44 Let's test our JavaScript and see if that minifies for us. 13:46 So back inside of frontend and source, 13:51 we'll set up a new file inside of our scripts folder and we'll name this app.js. 13:54 In here, we can set up a variable that's equal to an object. 13:59 Let's call this user. 14:04 We'll give it a name of John Smith. 14:05 And we'll set his age to 50. 14:08 We can hit save, and we'll notice our terminal updating again. 14:11 So now inside of our dist folder, we have a scripts folder. 14:15 And in there, we should have app.js and everything's minified. 14:19 Pretty neat. It did all that for 14:24 us with just a few bits of code in our gulp file. 14:25 And there you go. 14:31 We just set up our first gulp file from scratch. 14:32 And it wasn't that hard. 14:36 Don't be afraid to check out the gulp js documentation for 14:39 a list of other packages that they offer. 14:42 The types of gulp files you create for your projects and apps can be endless. 14:44 You can create something pretty powerful. 14:49 If you create something awesome, 14:51 don't be afraid to share your link to your repository to GitHub. 14:53 Or if you are a tech degree student you could share your projects through 14:57 our private Slack channels. 15:00 If anything that we discussed in this video is a little far outside of your 15:04 scope of knowledge currently, make sure to check out the teachers' notes or 15:08 description to link to helpful resources from Treehouse to learn some of these 15:12 topics. 15:16 I hope this tutorial helped and 15:19 you can start building out your projects much faster than you used to. 15:20 Until next time, happy coding 15:24

You need to sign up for Treehouse in order to set up Workspace

Sign up