Skip to content

Latest commit

 

History

History
57 lines (47 loc) · 4.23 KB

README.md

File metadata and controls

57 lines (47 loc) · 4.23 KB
Raw

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

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.