Join Ray Villalobos for an in-depth discussion in this video Using the exercise files, part of Web Project Workflows with Gulp.js, Git, and Browserify.
If you're a premium member of lynda.com you have access to the exercise files used throughout this title. In the exercise files folder, you'll find folders for each video in the series. Inside those folders you should see a finish folders as well as a start folder. The start folder has a copy of the project when I start one of the videos and the finish folder has a copy of the project at the end. I'll start each movie with the folder inside the start folder on the desktop, and usually open inside my text editor. If you're a monthly member or an annual member of lynda.com you don't have access to the exercise files, but you can follow along from scratch with your own assets.
In this course, the assets are also available in my GitHub page at this URL. To download the assets, click on this Download ZIP link. In the online version, I'm not included any of the photos that I've used in this project. You'll also have to issue an NPM install from the terminal. So, one note to PC users as of the date of this recording, there's an issue with the way that Windows handles extra long file names. Which unfortunately installing some node modules creates. Now, the plugin in the last video of the course creates some file names that are too big and for that reason I've removed the node modules folder from the finished version of this video.
You may want to consider not running the image compression plugin in this last video because you may end up with some folders that would be tough to delete. It may not be an issue by the time you watch this. But, just in case, if you end up with folders that are too long, make sure you take a look at this page. If you still want to try this, you can open up the finished version of the folder and then do a cd space and drag this folder over here, then hit Return. That will temporarily switch you to that folder. And then run the NPM install command.
This will recreate the node modules folder that I've deleted. Now, from here, if you want to you can set the node environment. And this is a little bit different on a PC. Let me see if I can make this window a little bigger. And I really can't, but its set space node_env equal to production. So you do that in one line, and then you can run the gulp command. Now, this will compress all the files, may run into some errors, but because of the file naming issues.
However, this will compress all the images and also create the production folder in the builds, which is right here.
- Why workflow management?
- Processing tasks with gulp-coffee
- Importing libraries with Browserify
- Processing Sass and Compass
- Issuing tasks in sequence
- Watching changes to files
- Adding static reloads
- Setting up environment variables
- Minifying HTML
- Compressing images