Gulp-based starter template for better front-end coding with Pug and SCSS preprocessors
More information see in docs folder
- Component approach with BEM based.
- Automatic creation of component directories with files using the bem-tools-create tool.
- Automatic compilation of fonts to woff/woff2 and file creation with @font-face.
- Automatic icon system based on SVG Symbols.
- Checking for errors on commit.
- Using a hard code guide.
Make sure you have Node.js installed.
- Install the Yarn globally:
$ npm i -g yarn$ yarn global add gulp bem-tools-core bem-tools-create
# or
$ npm i -g gulp bem-tools-core bem-tools-create- Clone the project:
$ git clone https://github.com/joseffie/gulp-joseffie-settings.git my-project- Go to the project and install needed dependencies:
$ yarn- After installing the dependencies, you may start the dev server:
$ yarn run dev| Command | Description |
|---|---|
| dev | runs the build in development mode |
| build | optimizes source files, converts preprocessor files into browser-understandable files, and sends to dist folder |
| zip | runs build and archives the project |
| build:pug | optimizes page files and pushs to dist |
| build:styles | optimizes style files and pushs to dist |
| build:scripts | optimizes JS files and pushs to dist |
| build:images | optimizes images and pushs to dist |
| build:fonts | converts local fonts to woff/woff2 formats, automatically generate SCSS file with @font-face declarations |
| build:sprites | converts SVG icons to SVG sprite |
| deploy | runs build, then pushs the build to GitHub Pages (gh-pages branch) |
| publish | pushs the build to GitHub pages without run build |
| lint:pug | checks Pug code for errors |
| lint:styles | checks SCSS code for errors. If you specify the --fix flag, then the errors will be automatically fixed by the linter |
| lint:scripts | checks JS code for errors. If you specify the --fix flag, then the errors will be automatically fixed by the linter |
Create empty component by name in src/components folder.
By default generates only *.pug, *.scss and *.js files.
Syntax:
$ bem create <component-name> <args>If you need to create only one file type, use the -T flag:
$ bem create header -T pugIf you need to remove one or more default file types, use the -n flag:
$ bem create header -n jsIf you need to add another file type to your component folder, use the -t flag:
$ bem create header -t mdYou can also combine flags:
$ bem create menu -n js -t yml