7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 1.1 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 File and Folder Preparation

Hello, and welcome to your lesson number three. Let's go ahead and make the necessary preparations for our workflow. Now, the very first thing we have to do is, install NPM. Or Node, actually. Because Grunt is based on node.js. The simplest way to do that is to go to their website and download the current version of the package. Now, I've heard some people say that this is not exactly the recommended method. Because, somehow, installing from the website doesn't create the correct permissions. Alternatively, to get past that, you can use Homebrew. Which is a package manager for Mac OS. And you install Homebrew. And then you install node.js using Homebrew. It's really up to you. I have it installed from the website, because it was a long time ago. But I would probably use Homebrew if I were to install it fresh. So once you install it, go ahead and open a terminal window. Now, this really depends on your operating system. If you're using Mac, then open it terminally. If you're using Windows, you have a different kind of terminal there. What I'm personally going to do is use the terminal in my code editor. And this is Visual Studio Code. It's a very, very good editor for a lot of different reasons. But one reason, in particular, for which I use it, is the built in terminal. So I can just toggle my terminal here. And you'll need to check the version of NPM. So go ahead and do npm -v. And in my case, it will give me version 3.10.9. Now, if it's bigger, then 2.1.8, then you're fine. Otherwise, you'll need to update it. And for that, you would do an npm install npm@latest -g. -g means install it globally. And that will update your NPM. Now, if you don't know what NPM is, I probably should have started with that. NPM is the package manager for Node. NPM equals node package manager. It's as simple as that. It's a way to handle all of the node.js packages. And Grunt is such a package. So, the next step is to install Grunt. And the easiest way is just to use the terminal. So you do would npm install grunt-g. And that will install Grunt, globally. Now, you might get an error if you installed Node from the website. This is what I was talking about with the permissions. You might get this error that says, please try running this command again as root administrator. In which case, you've got to do sudo npm install grunt-g, just like previously. But put sudo in front of it. Now, I'm not going to do that. I already have Grunt installed. So if I d grunt -v. Or actually, I think it's grunt --version, yeah. So I'm using version 1.2.0. And it's actually Grunt CLI here. Grunt Command Line Interface. That's what it stands for. You also need to install that. So you would do Grunt, sorry. Npm install grunt cli -g. Again, to install it globally. And if you get the same error, just put sudo in front of it. Now once you install Grunt globally, you will need to install it locally. That's the way it works with grunt projects. Fortunately, you only need to install it locally when you're initiating a new project, right? Once you install it globally, it's there. It's always at your disposal. We can use it whenever you want. So to install Grunt locally, you would simply do npm install grunt without the -g flag. So you do that, npm install grunt. This will download all the files you need. And this actually created a node_modules folder. And by default, I have it hidden here in my editor. But this is the folder that was installed. And it has a bunch of folders and files in here to make everything work. But for now, we're going to hide it. We don't need it. We can focus on our own files. Now you have Grunt installed. The next thing you have to do is create two files. One, package.json. This is for the NPM project. It's like a configuration file for your project. And then a gruntfile.js, which is for Grunt. And there, you will define tasks. And you're going to load all the NPM modules that you need. So for the package.json, you will simply do NPM in it. And this is a utility from NPM that will help you create this in your console. Or in your a terminal, sorry. So, name, Grunt workflow, that works. Version one. We'll keep it like this, description. I'm just going to type something here. So we'll start our web project template that uses Grunt, Bower and Browsersync to create an awesome workflow. So that's my description. Entry point, you can just leave it like this. Test command, get repository. We don't have one right now. But if you do, you would put the the link to that. Keywords, not right now. Author. Let's say Adi Purdila. Of course, you would type your own name here. License, yes. And hit Enter. Okay, and that created the package.json file. And this is what it currently looks like. Next up, let's create our gruntfile.js. So just create a new file, gruntfile.js. And inside, you're going to type something like this. Now, this is the minimum amount of code that you need to write. Basically, you will start the project configuration here. And you would load the settings from the package.json file, which is this. And this will handle all of the dependencies. It's going to allow us to load the proper NPM modules or the Grunt plugins. All that good stuff. All right, so once you did this, you have your Grunt file. You have your package.json. Let's start to think about our workflow, and how it's going to work. So we're going to have two main parts in the workflow. We're going to have a dev part. And we're going to have a distribution part or a build part. The dev part will contain all of the development files. It's going to contain our Sass files and JavaScript, and jQuery, and all the other stuff that's required for development. The distribution part is what we're going to give to clients in the end. And that's going to have minified CSS, minified JavaScript. We're going to concatenate all of the JavaScript files, all the CSS files, into a single file. We're going to do any kind of optimizations we need on images and other assets. So we first, of course we're going to start with the development part. And for that, I'm going to create a folder here. And I'm going to call it app. And the app folder will contain all of the development files. So inside, I'm going to create a new folder. I'm going to call it, source. And then a new folder inside source. That's going to be for SCSS. And another one that's going to be for JS. And then, in the app folder, we're going to create one called JS. And one that's called CSS. And maybe another one that's called Images, just so we can prepare everything in advance. And finally, in the app, we're going to create a new file. And we're going to call it index.html. Now, the content of this file is the very basic starting block for HTML. Where we're loading styles.css from the CSS folder. And scripts.js from the JS folder. Now, if you're wondering what's up with this SRC file. And why we have a JS folder here, another here. Well, the SRC folder will contain the Sass files. It's going to contain the JavaScript files. And it's going to contain any vendor files. That means JavaScript and any other external library. And the reason I'm putting this in the SRC folder is to keep everything separate. So I want the the JS folder to contain the final JS file. And that's going to happen after concatenation, after minification. Even the CSS, same thing. It's going to contain the compiled Sass file. Images here will contain the final images. And I'm going to put everything else. All the other files that I'm compiling stuff from inside the SRC. You will see how it comes in handy in a future lesson. And that's about it for the preparation for our workflow. Now that this is done, we need to cover a very important aspect of our workflow. And that is browser reloading. That's coming up in the next lesson.

Back to the top