Join Ray Villalobos for an in-depth discussion in this video Exploring our workflow, part of Web Project Workflows with Gulp.js, Git, and Browserify.
Now, here's a version of how this project is going to look like on GitHub. Now, this particular version resides on one of my private repositories, which requires a paid GitHub account. We'll be setting up the real project in a public repository. I'll show you how to use a gitignore file to control how much of the project you share. Just in case there are some sensitive files like copyright images or a set of documents that you don't need to share with everyone else. We won't be diving deep into Git or GitHub. If you want to learn more, make sure you check out Git Essential Training with Kevin Skoglund.
Then, we're going to work with node.js to create our project structure and to work with the node package manager, or NPM. NPM will let us create a package.json file to document our project settings, which will include things like the version number, a link to our GitHub repository and the list of plugins that we'll be adding to our workflow. When working with real projects, you'll often want to be able to control how your files look depending on whether you're coding or are ready to publish your files to the web.
Now, we'll also be using Sass and Compass on this project. So you'll be able to split up your CSS into logical modules. So, for example, we'll be able to keep our variables all in a single file and all of our mixins, which are like Sass functions, in separate files. I'll also install and show you how to process Compass. So that we can have access to built in mixins that will be able to do things like resetting our CSS for different browsers with a single line of code. Plus you'll also be able to use CSS 3 features like border-radius without having to use prefixes.
Finally, we'll set up outer reloading, so that when you make a change to any of these files, the workflow will process changes in the background and automatically notify and reload our browser. Not only that, but because we're setting up a live server, we won't have any problems with JSON files not loading because of same domain policy issues. So, notice that this is going to work whether you or any of you teammates are on Macs or PCs. And it won't require licenses to commercial software, since all these modules are open-source.
I can even make changes into my Sass or Compass, so I'll change one of my variables here to a color called yellow, and I'll save this, and my CSS will be processed and sent to the browser immediately. Now, once this is all set up, things are going to work like magic. Our workflow is also going to be a great starting point for your future projects. So now that we've peeked into the structure of what we'll be building, you can appreciate how awesome working like this is going to be. I know you're probably eager to get started, so we'll get going by doing some installations in the next video.
- 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