This code contains a collection of dev tools and underlying processes that allow for quick prototyping of UI components.
Using browsersync, css streaming, watch, and other build processes, any change made to the code will be automatically built on save (assuming the file is targeted in the watch process) and refreshed in the browser automatically.
Run npm install in the project root. (If you're using VS Code, Ctrl + ~ will open a terminal for you)
Then, npm start to start the dev environment.
Optionally install gulp with npm install -g gulp-cli. There are several tasks defined in gulpfile.babel.js
that can be run via command line after installing gulp-cli globally.
For general use, you shouldn't need to run these directly.
gulp data - generate a new dataset
gulp watch - start gulp in watch mode
gulp build - build production assets
gulp default - what you get when you just run gulp
gulp serve - starts express with the output of gulp build
npm start - startup script for hosting the site on a node server
npm test - starts up the jest testing environment and watch to continually run tests as you code
npm test:snapshots - runs puppeteer for image based snapshot tests.
Here's a breakdown of where things are:
dist - production bundle output directory
(automatically generated by gulp)
lib - contains template dependencies and mixins
src - all the working code
-- data - json-server data generator
-- img - image assets
-- js - application javascript
-- markup - pug markup for static html
-- styles - SCSS styles
- pug - A high-performance template engine that allows developers to write HTML in a concise and easy-to-read format.
- jest - A JavaScript testing framework that focuses on simplicity and ease of use, and is widely used for testing React applications.
- babel - A toolchain that enables developers to write modern JavaScript code and transpile it to a format that is compatible with older browsers.
- browserify - A tool that allows developers to use the CommonJS module system in the browser, by bundling modules into a single JavaScript file.
- gulp - A task runner that allows developers to automate repetitive tasks in their development workflow, such as compiling Sass to CSS, concatenating and minifying JavaScript files, and more.
- json-server - A mock service layer that allows developers to quickly and easily create a fake REST API for prototyping and testing their UI components.
- faker - A data generator library that allows developers to easily create realistic test data, such as names, addresses, and phone numbers, for use in their Pug templates and JSON Server API responses.