PROJECT FOUNDATION

A bootstrap repository containing an infrastructure of files, folders, dependencies and build scripts for the development of JavaScript, Sass, and HTML based projects.

1 – Install Node.js

An installation of Node.js is required: Download Here

2 – Download or Clone Repository

Download the Project Foundation zip file or clone the repository by entering the following CLI command at the desired project location:

git clone https://github.com/gmattie/Project-Foundation.git

3 – Install Development Dependencies

Installation of development dependencies ( Node Modules ) are required. Install them by entering the following CLI command at the project root folder:

npm install

4 – Build Scripts

The following build scripts can be executed by entering their CLI commands at the project root folder:

Development

npm run dev

• Transpiles JavaScript code and bundles modules to a single JavaScript file in the /build/js/ directory using Babel and Webpack.
• Transpiles Sass code, adds required polyfills and vendor prefixes and bundles modules to a single CSS file in the /build/css/ directory using Node Sass, PostCSS and Webpack.
• Generates inline sourcemaps for JavaScript and CSS files using Webpack Devtool.
• Copies index.html from the /source directory and pastes it to the /build directory using HTML Webpack Plugin.
• Opens the project in the default web browser, creates a local server and facilitates live reloading using Browsersync.

Production

npm run prod

• Transpiles JavaScript code and bundles modules to a single, minified JavaScript file in the /build/js/ directory using Babel, Webpack and UgfifyJS Webpack Plugin.
• Transpiles Sass code, adds required polyfills and vendor prefixes and bundles modules to a single, minified CSS file in the /build/css/ directory using Node Sass, PostCSS and the Optimize CSS Assets Webpack Plugin.
• Copies index.html from the /source directory and pastes a minified version to the /build directory using HTML Webpack Plugin.

Development & Production

npm run dev-prod

• Transpiles JavaScript code and bundles modules to a single, minified JavaScript file in the /build/js/ directory using Babel, Webpack and UgfifyJS Webpack Plugin.
• Transpiles Sass code, adds required polyfills and vendor prefixes and bundles modules to a single, minified CSS file in the /build/css/ directory using Node Sass, PostCSS and the Optimize CSS Assets Webpack Plugin.
• Generates inline sourcemaps for JavaScript and CSS files using Webpack Devtool.
• Copies index.html from the /source directory and pastes a minified version to the /build directory using HTML Webpack Plugin.
• Opens the project in the default web browser, creates a local server and facilitates live reloading using Browsersync.

NOTE: Build processes can be terminated by pressing Ctrl+C on the CLI of the project root folder.

---