MarynaHapon / WebInterface

Web Interface / Test task

WEB Interface

WEB Interface based on Gulp, Node, NPM, Bower, Babel, Sass, and Pug.

Table of Contents

1. Dependencies
2. Build
   1. Environments
      1. Development
      2. Stage
      3. Production
3. Server
   1. Local URLs
   2. Options
4. Assets
   1. Data
   2. Fonts
   3. Images
   4. Media
   5. Miscellaneous
   6. Vendors
5. Scripts
6. Styles
   1. BEM Structure
7. Views
   1. Pug Structure
   2. Environment Variables

Dependencies

Run: npm cache clear && npm i && bower cache clean && bower install

back to top

Build

Generate a fresh build of your project. Task will run several individual tasks on files within ./src and then output them to ./build.

Run: gulp build

Environments

You can specify which environment you want to build. If you do not pass env as an option, then dev will be used by default.

Development

Run: gulp build --env=dev

Stage

Run: gulp build --env=stage

Production

Run: gulp build --env=prod

back to top

Server

Start a local dev server. Additionally, gulp will watch for any changes to files and reload browser while server is running.

Run: gulp server

Local URLs

• Local - http://localhost:3000
• UI - Set to false by default

Options

You can modify port, proxy, and many other settings in ./gulpfile.babel.js. For more information about BrowserSync go to http://www.browsersync.io/.

back to top

Assets

Run several individual tasks to copy static files from ./src to ./build.

Run: gulp assets

Data

Copy data files to ./build/data.

Run: gulp data

Fonts

Copy font files to ./build/fonts.

Run: gulp fonts

Images

Copy images to ./build/images. As a personal preference Kit doesn't use automated image optimization. It is strongly recommended to use services like TinyPNG and TinyJPG to optimize images manually.

Run: gulp images

Media

Copy media files to ./build/media.

Run: gulp media

Miscellaneous

Copy miscellaneous files, such as .htaccess or robots.txt, to the root of ./build. If your project require custom settings per environment, then you can save individual files into appropriate directory within ./src/misc.

Run: gulp misc

Vendors

Bundle vendor files to ./build/vendors. You can install new client-side vendors using Bower, then reference appropriate files in ./src/vendors/bundle.js and ./src/vendors/bundle.min.js.

Run: gulp vendors

back to top

Scripts

Run a series of sub-tasks to generate final JavaScript files. See ./gulpfile.babel.js for reference.

Note: Each file on the root of ./src/scripts will be compiled to its own file in ./build/scripts. Each file can have own includes, just like Sass with @import functionality. See ./src/scripts/main.js as an example.

Run: gulp scripts

back to top

Styles

Run a series of sub-tasks to generate final CSS files. See ./gulpfile.babel.js for reference.

Note: Each file on the root of ./src/styles will be compiled to its own file in ./build/styles.

Run: gulp styles

BEM Structure

Follows a strict naming convention using BEM methodology.

Views

Run a series of sub-tasks to generate final HTML files. See ./gulpfile.babel.js for reference.

Run: gulp views

Environment Variables

Every Pug file has access to global env variable. You can use it to conditionally load unminified/minified assets.

back to top