codexysoft / gulp-start

Gulp 4 boilerplate for CSS/HTML/JavaScript development

gulp-start

Gulp 4 boilerplate for CSS/HTML/JavaScript development by Codexy Software team.

What is included

• Bootstrap 4 components
• Bourbon for SASS
• PUG
• Assets minification
• Sourcemaps
• PostCSS plugins
• SVG sprites tasks
• Images optimization
• Fonts conversion(from ttf to woff2, woff etc.)
• Copy assets into your dist directory
• Watch for all files changes and automatically recompile build using BrowserSync

Start Guide

You should install:

• Node.js
• Gulp CLI npm install gulp-cli -g

After:

1. Download from GitHub
2. Unzip archive and in command line make cd into project folder
3. Run npm install
4. When it's done installing, run gulp

Documentation

Structure

/src/ - here your source code.

/dist/ - here compiled code. Do not edit this folder.

Tasks

gulp - default task

gulp clean - clean task for dist folder

gulp convertFonts - task for fonts conversion

SASS

Sass files are located in the src/assets/stylesheets/ directory.

We use BEM methodology and structure the files into the blocks src/assets/stylesheets/blocks/.

All blocks and other styles should be imported in the src/assets/stylesheets/style.sass manifest file.

It will be compiled in the dist/css/style.css directory.

node_modules path is included for importing vendor files.

PUG

Pug files are located in the src/views/ directory.

New pages should be here src/views/pages/.

Partials, like footer or header should be here src/views/partials/.

Pages will be converted into dist directory.

Javascript

Put your JavaScript files in the src/assets/js directory.

All js files should be imported in the manifest file src/assets/js/scripts.js.

For importing use import statement. For example:

import 'bootstrap/js/dist/dropdown.js';
import "./blocks/block-name.js";

node_modules path is included for importing vendor files.

SVG sprites

We use 2 types of svg sprites:

• SVG Symbols
• SVG Fragments

Symbols

1. For symbols sprites put your files in the src/assets/img/sprites/svg-symbols/ directory.
2. In your pug file use mixin for sprite +icon('icon-name', 'class-name').

Fragments

1. For fragments sprites put your files in the src/assets/img/sprites/svg-fragments/ directory.
2. Use your sprite in the css background-image: url('../img/svg-fragments.svg#icon-name').

Sourcemaps

We use sourcemaps for Javascript and Sass files. It will be automaticly added to compiled js and css files via base64.

If you need to remove sourcemaps for production build, just run gulp --production.

Bootstrap

We use only the necessary components like: reboot, grid, utilities from the source files. For example:

@import bootstrap/scss/functions
@import bootstrap/scss/variables
@import bootstrap/scss/mixins
@import bootstrap/scss/reboot
@import bootstrap/scss/grid
@import bootstrap/scss/utilities/display
@import bootstrap/scss/utilities/flex

If you need some other components, just import them from the source files. Documentation

Bourbon for SASS

Bourbon is included in the boilerplate. It's the first-class library of Sass Mixins. For example we use font-face mixin for custom fonts declaration:

+font-face("#{$general-font}", "../fonts/#{$general-font}", ("woff2", "woff", "ttf"))
  font-style: normal
  font-weight: 400

Fonts conversion

For covertation fonts into the web formats put your ttf fonts in the src/assets/fonts/ directory and then run gulp convertFonts. It will be converted into woff2, woff and eot formats in the same directory.

PostCSS Plugins

Some included plugins:

• autoprefixer
• postcss-svg
• postcss-assets
• postcss-flexbugs-fixes

Support

If you have any questions or suggestions, feel free to contact [email protected]