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 pug
If you need to remove one or more default file types, use the -n
flag:
$ bem create header -n js
If you need to add another file type to your component folder, use the -t
flag:
$ bem create header -t md
You can also combine flags:
$ bem create menu -n js -t yml