- Baseplate utilizes BrowserSync to allow for live reloading of files on multiple devices
- Baseplate includes both development and production tasks.
- The development tasks include:
- SASS - SCSS files are compiled into CSS and copied into the target folder
- Images - Images are optimized and copied to the target folder.
- Includes - Includes are compiled to saved as HTML files in the target folder.
- Any updates to files in the assets folder will trigger a reload of the browser.
- Errors in JS and CSS will output to the command line.
- The production tasks include:
- CSS - CSS files are minified, concatenated, and copied to the target folder.
- HTML - HTML files are copied to the target folder.
- Images - Images are copied to the target folder.
You'll need Node.js,
gulp to work with Baseplate. If you don't already have Node.s installed, I recommend you install it via Node Version Manager. Even better, install brew and use that to install NVM!
NVM will also install
npm for you.
Once you've got Node and
npm, you'll need gulp:
$ npm install -g gulp
Now grab a copy of Baseplate and set it up.
$ git clone firstname.lastname@example.org:demersdesigns/baseplate.git $ cd baseplate $ npm install // install additional dependencies
Now you're ready to get going.
IMPORTANT: New files and edits to existing files should take place only within the assets folder. Files in the development and production folders are autmatically generated and will be overwritten when the gulp tasks are run. New HTML files and edits to existing HTML files should be done in the html folder inside the assets directory.
There are two tasks that can be run. One is for local development purposes and the other is for production. The
dev task will run the development processes listed in the product capabilities section above and will continue to watch for changes and refresh the browser accordingly. The
prod task cleans the target folder, runs the
dev tasks and then runs a few other tasks to get the code production-ready including minification and concatenation. This process attempts to get your code to a place where you can then layer in any CI and deployment tasks that you may need on a per-project basis.
Local Development Instructions:
$ gulp dev
This process should create a target folder with the development files for your project and open up a new browser window with your project in it. In the console, you will see both a local and an external URL that your site is available for viewing from.
All file edits you make are automatically reflected in any of the browsers that have your project open.
Production Build Instructions:
- When you are ready to create project files that are ready for a production environment, run the
prodtask. This will complete all tasks listed above in the usage section.
- Once this process completes, the target folder will contain production-ready files.