solhanfrontendboilerplate

.. Design

Usage no npm install needed!

<script type="module">
  import solhanfrontendboilerplate from 'https://cdn.skypack.dev/solhanfrontendboilerplate';
</script>

README

Table of Contents

  1. Dependencies
  2. Build
  3. Server
    1. Local URLs
    2. Options
  4. Assets
    1. Fonts
    2. Images
    3. Media
  5. Scripts
  6. Styles
  7. Views
    1. Pug Structure

Dependencies

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

Note: Before you can install Web Start Kit dependencies, you will need to install Gulp, Node, NPM, and Bower.

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

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

Fonts

Copy font files to ./build/fonts.

Run: gulp fonts

Images

Copy images to ./build/images. As a personal preference Web Starter 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

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

Views

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

Run: gulp views

Pug Structure

Web Starter Kit follows an opinionated directory structure. To learn more about Pug go to https://pugjs.org/api/getting-started.html/.