7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Setting Up a Gulpfile

The first step in building this application is to create our project directory, and add some of the basic requirements to that project. So, I'll go ahead and start by making a directory, and I'm going to call it chirper. And, let's just CD into chirper. And, now we're ready to create some basic parts of our project. The first thing I want to do is create a package.json file. So we can do this by doing npm init. And npm is going to ask us a series of questions, which it will use to prepopulate our package.json file. So the first thing it's asking us, is the name of our application and chirper is just fine. Let's go with version one. For the description we can say a very simple twitter clone, built with react and flux. The entry point is going to be, I guess, server.js. We won't have a test command. Right now we won't have a git repository. No keywords, no author. Let's use the MIT license. And yes this looks good, so I'll say yes. And now you can see we have our basic package.json file. Now if you're not familiar with the package.json file, we use it to keep track of a few of the properties of our application. The primary reason for including it in this project, is we can have a list of the dependencies that this project is based on. And most importantly we can ask for specific versions of those dependencies. I am doing this mainly because your watching these videos sometime in the future, and it's possible that a lot of the components that we're going to use will have newer versions than the ones I'm using right now. And those versions may have deprications or other inconsistencies, which will make it hard to follow along with these lessons. So I'm going to tell you which versions of each library and component you need to install, so that you can follow along with the fewest problems possible. Before we start installing any packages, let me tell you that in this course we're going to be using browserify. Browserify is basically a module management system for front end projects. And it allows you to write your front end code as if it was backend JavaScript, or JavaScript that you would write with node. If you've written much node code, you're familiar with the idea of creating modules and then requiring those modules from other files. Well, that's exactly what browserify allows us to do. We can write our code in that, quote node style using modules and require statements. And then before we publish it, we run it through browserify and it will compile all that into a single JavaScript file that we can then use on the front end. In fact, browserify even lets you use the native node API on the front end. So we can use things like event emitter or the utils module, and it will create front end versions of those that we can use in our web applications. The reason we're using browserify, is that the two main libraries of our application, React and Facebook's own implementation of Flux, are built to be used by browserify and other tools like it. They are actually published primarily as npm packages, and while there are versions that allow you to use them in a more, quote traditional front end system, it will be much easier if we just use them as they're expected to be used and use browserify. So I think you'll find out once you get the hang of it, browserify is pretty simple. However, if we want to use browserify, this means we're going to need a gulp file to run a few tasks, which will do some of our compiling for us. So the first thing we're going to do is install gulp itself. So i'm going to do npm install gulp. And, as I said, for all of these packages that we're going to install, I'm gonna tell you what version to install. And with npm, whenever you want to choose a specific version of a package, you have the package name. So in our case that's gulp. And then you have the @ sign, and then you put the version number after that. So in our case, all we need to do is say gulp @3. And then I'm going to include the tag -- save-dev, which tells npm to add gulp version three to our package.json file as a development dependency. So I'll go ahead and install that. And now that that's installed, our package.json file. You can see that right at the bottom here, we have a dev dependency for gulp version 3.9. Basically what this version number means is that any three point something will be acceptable. As long as we use version three of gulp, any point releases will be acceptable. Okay so that's a start. Now that we've installed the gulp library itself, we're going to need to install a couple of the modules that we can use to actually perform gulp tasks. So let's do npm install gulp-browserify, and this is the gulp version of browserify, which we can use to create a task that will run browserify on our code. And so this is version zero, and again we're gonna do save-dev. Now because we're using React, we're going to be using the JSX syntax. So this browserify task will need its helper module reactify to convert that JSX syntax into the proper react method calls. So lets do npm install reactify, and this is version one. and once again we'll do save-dev. Now once we use browserify to convert our JavaScript modules into code that the browser will understand, were going to need to concatenate all of those into a single front end file. So for this we'll use the gulp package, gulp-concat and for this we will install version two. And of course again, we'll include the save-dev flag. And finally, we'll install one more plugin. And this is going to be gulp-plumber and this will be version one. The purpose of gulp-plumber is to prevent pipes from breaking within our gulp tasks. If you're familiar with gulp, you know that it uses streams to send data through the different tasks. And it's possible that if one of those streams has an error, the rest of the task won't complete. This was a problem for me when developing, because I would use gulp's watch feature to automatically rerun tasks. However, if it was re-running a task when there was some typo in the JavaScript, the task would just end, because the pipe would break. However, if we include gulp-plumber, the task will just stop if there's an error and then it will retry again later when the file is resaved. So this will save you the trouble of continually checking your terminal to make sure that your watch task is still running. So now that we have all of our gulp modules installed, we're ready to create our actual gulp file. So I'm going to go ahead and open up my editor, and we're going to create a file called gulpfile.js. So the first thing we're going to do in our gulp file is require our packages, so the first one is gulp then we're going to want browserify. Next we want concat, and finally we have plumber. And now we're ready to create our first gulp task. So we can say gulp.task, and we can call this task whatever we want. I'm gonna call it browserify. However, we don't need to call it that. Then gulp.task takes a callback function and in here we perform our task. So, we can start by using gulp.src to get the file that we want to perform this task on. And this is going to be within the source directory, src/main.js. And this is going to be our starting point for all of our JavaScript. And we're going to pipe this stream, and we're gonna start by piping it to plumber. So I'll pass it to plumber, and this way we can be sure that this task won't break if we have any errors. And then let's pipe that to browserify, and this is gonna take some options here. The first one is we're gonna set a transform. And the way we want to transform it is with the reactify plugin, and let's also set debug equal to true. And we're setting debug to true, so that browserify will generate source maps as well, and this way, if we have any errors or debugging that we need to do, we can look at the terminal, and get accurate file names and line numbers. Now this browserify task will not work only with the main.js file. Because main.js will have require statements to other files, and those files may have require statements to other files, and so all of those different files are going to be processed by browserify. And so once we have all those different files transformed, we're gonna pipe all of that to the concat task. And we're gonna concatenate them all into a file called main.js. And then finally we're going to pipe that single file and we're gonna say gulp.destination and we're gonna give it to public folder. There we go. So what will happen is we'll start with the main .js file in the source directory, compile it and all of its dependencies, and any dependencies that those dependencies have, etc etc. And then we're gonna concatenate all of those into a single main.js file that will be saved into the public directory. So you're starting to get an idea of how our system is gonna work. All of the JavaScript that we write, will be within this source directory, and primarily referenced from the main .js file. Those will all be compiled into a single main .js file which will be then stored in the public directory, which is where our website will actually be served from. Now, this is actually the only task we're going to need for this project, but let's create a default task as well. So I'll create a task called default. And this is the task that will be run if we just call gulp without any task name after it. And we'll pass it an array, and we're just gonna say, if someone asks for the default task to be run, just run the browserify task. Finally, let's create one more task that we're gonna call watch. And this will just run our browserifiy task if any of the files in the source directory are changed in any way. So what we can do is say gulp.watch, and it's going to watch src/**/*.*, and if any of those files are changed, we'll pass it an array of tasks to run, and in our case that's just the browserify task. Excellent. And actually, if we create any other task, why don't we just change this to default, so that if we were to add tasks in the future then we could just add them to this default tasks, so that they would all be run automatically. And watch here, we'll just run all the default tasks, and I think that's a little bit more future proof. All right, so that's all we have to do to set up our gulp file. In our next lesson, we'll look at setting up a basic index page for our web application.

Back to the top