Front-end development boilerplate using Gulp 4
Clone the repo and run
$ git clone https://github.com/yutaroishiwata/gulp4-boilerplate
$ npm install
$ gulp watch
dist
├── base
│ └── _config.html
├── css
│ └── style.css
├── img
├── index.html
└── js
├── lib.min.js
└── maps
└── lib.min.js.map
_src
├── img
├── js
│ ├── core
│ │ └── jquery-3.3.1.js
│ └── module
│ └── function_scroll.js
├── pug
│ ├── base
│ │ └── _config.pug
│ ├── index.pug
│ └── module
│ ├── common
│ │ ├── _footer.pug
│ │ ├── _head.pug
│ │ └── _header.pug
│ ├── page
│ │ └── _top.pug
│ └── parts
└── sass
├── foundation
│ ├── _config.scss
│ ├── _mixin.scss
│ └── _reset.scss
├── layout
│ ├── _common.scss
│ ├── _footer.scss
│ ├── _header.scss
│ └── _sidebar.scss
├── object
│ ├── component
│ │ ├── _breadcrumb.scss
│ │ ├── _button.scss
│ │ ├── _form.scss
│ │ └── _nav.scss
│ └── utility
│ ├── _clearfix.scss
│ └── _utility.scss
└── style.scss
| Plugin name | Description |
|---|---|
| gulp-plumber | Prevent pipe breaking caused by errors from gulp plugins |
| gulp-pug | Gulp plugin for compiling Pug templates |
| gulp-sass | compile your Sass files |
| autoprefixer | Prefix CSS with Autoprefixer |
| csscomb | coding style formatter for CSS |
| gulp-order | reorder a stream of files |
| gulp-babel | JS transpiler |
| gulp-concat | combine multiple files into one |
| gulp-uglify | JS Minifier |
| gulp-rename | simple file renaming |
| gulp-imagemin | Minify PNG, JPEG, GIF and SVG images |
| imagemin-mozjpeg | Imagemin plugin for all mozjpeg binaries |
| imagemin-pngquant | html5 linter and validator. |
| HTML Lint | |
| gulp-htmlint | |
| SASS Lint | |
| gulp-scsslint | |
| JS Lint | |
| ES lint | |
| browser-sync |
BEM & Atomic design.
BEM (Block Element Modifier)
The standard syntax for BEM:
block-name__element-name--modifier-name
Atomic design (Atoms, Molecules, Organisms, templates, Pages)