Plately - v 3.0.0
This project has a few basic global dependencies to make it.
- Gulp.js, a node task runner for automating common tasks
- NPM (node package manager)
- Basic understanding of Nunjucks, Sass, jQuery, etc.
Folders that are already there:
- app: Where the production version of your project is built
- data: Where all JSON files go that contain needed data for other files
- dist: Where the version of your project built to be shared or distributed goes
- img: Where all image files go, which are converted into a sprite map for quicker reference
- pages: Nunjucks code that creates the main content for each page. Will need to reference a templates file
- sass: Where all the Sass files go, separated by a folder structure for better organization
- templates: Nunjucks templates that create the HTML code around every page
Folders that are created:
These are created with the commands in the "How to Set Up" section below.
- components: All the external dependencies for the project, such as libraries and frameworks. Can be installed and managed with Bower.
- node_modules: All the npm dependencies that put the project together. Take a long time to install but are vital to creating anything at all with Plately.
- Bourbon: A lightweight library of Sass mixins for extra functionality.
- Susy: A flexible grid tool for responsive layouts
How to Set Up
There are several terminal commands to get all the needed dependencies installed and ready to view.
- This install all the node dependencies in the newly created node_modules folder.
- This creates the "components" folder and installs all the components controlled with Bower.
- This is the basic command that refreshes the project in either the app or build folder. The project will automatically run on your local server and open a tab in your default browser.
Creating the App and Dist projects
Plately is set up so Gulp build the project into the app folder. To have it go into the dist folder with optimized assets, change the
prod variable on line 23 on
gulpfile.js to false before running the
gulp command again. Simply change it back to true to go back to the app folder.