This was made in 2015, it will need to be updated soon.
This is the project template I use everytime I am learning something new, or working on a project. Speeds up my workflow by a ton, and proofchecks everything I do!
This project assumes that you already know:
- How to use Sass
- The basic understanding of navigating a CLI. (command line interface)
In order to use this template, you will need three things installed on your device:
- Node.js, a very powerful JavaScript runtime.
- Node Package Manager, popularly known as npm.
- Grunt CLI The command line interface for Grunt, a popular automated task runner.
The package.json file as of right now comes with five dev dependencies/modules:
- grunt v1.0.1
- grunt-contrib-jshint v1.0.0
- grunt-contrib-watch v1.0.0
- grunt-sass v1.2.1
- node-bourbon v4.2.8
Please note that this is for development purposes, this template will not minify your files for you!
In order to install these modules in your project follow these steps:
- Traverse to the root of your project in your CLI.
- If you're not sure which one that is, it's the folder with package.json in it.
- Type in the following into your CLI
npm install -g grunt-cli
- This will install Grunt globally on your computer, allowing you to call Grunt from any directory on your system.
- Type in the following into your CLI. Node will take care of the rest:
npm install
- Finally type in this last line of code. This will make sure that all the modules
If you didn't check out the link above, Grunt is a task manager that allows developers to automate their workflow to their max potential. The gruntfile.js file I provided comes with three tasks programmed in:
- JSHint - JavaScript File Checker
- Sass Compiler, C++ version - Popular CSS Precompiler
- Grunt Watch - Run tasks whenever file patterns are added, changed or deleted. ..* Watch has livereload! Livereload is a feature that automatically refreshes your browser when a change is detected in your files. To learn more about LiveReload, look at the LiveReload section below.
This is the awesome part, since the gruntfile.js is already created, all you have to do is type in:
grunt
Grunt Watch will be triggered, and it will now wait for any changes you make showing you the following output:
Running "watch" task
Waiting...
Livereload is currently available and functional on the following browsers:
- Google Chrome
- Firefox
- Safari
The only thing we need to do to get LiveReload to work, is to download the extension on the browser of your choice. Once it's downloaded, all you have to do is:
- Open up your index.html file (or navigate to it if you're using a server)
- Click the button right next to your address bar.
I will place the links for each browser below:
- You can fork this repository into as many projects as you want and just rename it! Then you can just clone it onto your computer. It works for me, and I hope you can get some use out of it as well.
- You do not need to install npm for every project you create.
- You do not need to install Node for every project you create.
- The node_modules folder is big. A good practice is to add it to your .gitignore, so that you have it on your machine, but not up on Github.
I will fill these out as people have questions on why I chose certain things over others! If you have a question, feel free to drop an issue on this repo!
- Malik Browne - Current freelance web developer, and creator of this template.
This project is licensed under the MIT License - see the LICENSE.md file for details
- Thanks to a bunch of my friends for helping me see why this was so important. I thought it was awesome so I thought I'd share it with everyone. If it helps one person learn web development, it's worth it for me. Cheers!