This project have some requirements you need to meet in order to compile it. First of all, you need NodeJS in order to run JavaScript on the console, you can go to the NodeJS site and follow trough the installation process. After you get the node command on the console, you need to install Gulp and Bower globally with the following command.
npm install -g gulp
Gulp is the one that will run all the compilation, watchers and others tasks.
To get started, open the console and change the directory to the project folder. Execute the following command in the console to install all of the necessary npm modules:
npm install
After the process finishes you will have all you need to start coding.
Go to the project folder in the console and run gulp start. It will compile the project and start a server that will refresh every time you change something in the code. Gulp will be watching for changes and will tell you how to access the project from a local and public url. Every browser that points to that URL will be auto refreshed. As an extra feature for testing purposes any interaction on one browser will be reflected on any others. Try it on a phone, tablet and pc at the same time by connecting your devices to the external URL provided by the server.
Here are the commands available with this build process. You can also set up specific commands to do individual tasks in gulpfile.js.
- gulp start: Compile and watch for changes
- gulp clean: Removes all the compiled files in
/build
The project has a very simple and flexible structure. If the default place for any file or directory needs to be moved, be sure to update to the new position in the config.js file.
├───build -> All the compiled files will be placed here (Distribution)
│ ├───assets -> Compiled Assets
| | ├───css -> Compiled CSS files
| | ├───js -> Compiled JS files
| | ├───img -> Image files
| | └───downloads -> Files that can be linked to/downloaded
│ ├───index.html -> Compiled Pug files
├───source -> Source files for the project
│ ├───assets -> Assets for the project
│ │ ├───img -> Images
│ │ ├───js -> Scripts
| | └───downloads -> Files that can be linked to/downloaded
│ ├───sass -> Sass styles
│ │ └───main.sass -> Main file in where all other SASS files should be included.
│ └───views -> Templates directory for Pug files
│ │ └───index.pug
├───package.json -> NodeJS configuration file for managing Node dependencies
├───gulpfile.js -> Gulp Tasks
All the files in the build folder will be auto-generated by the different tasks when the project compiles. Be sure to not modify any file manually in the build folder because changes will be overwritten during the compile process.
A service worker has been added that allows you to offer users offline browsing of your website and file caching. To use the service worker, simply copy (or move) sw.js and manifest.json to the root of the /build folder. Learn more about configuration of the service worker used in this build system by watching this video on YouTube or you can view Google's service worker documentation.
Author: Brian Haferkamp