gulp pug starter Download - gulp pug starter Source code download

gulp pug starter

Website data

1.0.0

Download

GULP-Pug-STARTER

Peculiarities

BEM classes
BEM structure is used
Pug and SCSS transients are used
The Babel transpower is used to support modern JavaScript (ES6) in browsers
Webpack is used to assemble JavaScript modules
The hard code is used
Code check for errors is used in front of the Committee

Installation

Install nodejs
Install globally:
- Yarn: npm i -g yarn
- Gulp: npm i -g gulp
- Bem Tools: npm i -g bem-tools-core
Download the assembly using Git: git clone https://github.com/andreyalexeich/gulp-pug-starter.git
Go to the downloaded assembly folder: cd gulp-pug-starter
Enter yarn set version berry
Download the necessary dependencies: yarn
To start work, enter the command: yarn run dev (development mode)
To collect the project, enter the yarn run build command (assembly mode)

If you did everything right, you should open a browser with a local server. The assembly mode involves the optimization of the project: image compression, minification of CSS and JS files for downloading to the server.

File structure

 gulp-pug-starter
├── dist
├── gulp-tasks
├── src
│   ├── blocks
│   ├── fonts
│   ├── img
│   ├── js
│   ├── styles
│   ├── views
│   └── .htaccess
├── gulpfile.babel.js
├── webpack.config.js
├── package.json
├── .yarnrc.yml
├── .babelrc.js
├── .bemrc.js
├── .eslintrc.json
├── .stylelintrc
├── .stylelintignore
└── .gitignore

The root of the folder:
- .babelrc.js - Babel settings
- .bemrc.js - BEM settings
- .eslintrc.json - ESLINT settings
- .gitignore - ban on tracking Git files
- .stylelintrc - StyleLint settings
- .stylelintignore - ban on tracking STYLELINT files
- .yarnrc.yml - Setting Yarn
- gulpfile.babel.js - GULP settings
- webpack.config.js - Webpack settings
- package.json - List of Dependencies
src folder - used during development:
- BEM blocks and components: src/blocks
- Fonts: src/fonts
- Images: src/img
- JS files: src/js
- Site Pages: src/views/pages
- SCSS files: src/styles
- Office PUG files: src/views
- Apache web server configuration file with GZIP settings: src/.htaccess
dist folder is a folder from which a local server is launched for development (when starting yarn run dev )
gulp-tasks folder-a folder with GULP Tasks

⌨️ Teams

yarn run lint:styles - Check SCSS files. For VSCODE, you need to install a plugin. For Webstorm or Phpstorm, you need to enable StyleLint in Languages & Frameworks - Style Sheets - Stylelint (errors will be automatically fixed while saving the file)
yarn run dev - Starting a server for project development
yarn run build - Collect a project with optimization without starting the server
yarn run build:views - compile pug files
yarn run build:styles - compile SCSS files
yarn run build:scripts - Collect JS Failes
yarn run build:images - collect images
yarn run build:webp - to adjust the images to the .webp format
yarn run build:sprites - Collect sprouts
yarn run build:fonts - collect fonts
yarn run build:favicons - Collect Favikonki
yarn run build:gzip - Collect Apache configuration
yarn run bem-m -Add BEM Block
yarn run bem-c - Add the component
yarn run lint:styles --fix -Fix errors in SCSS files according to StyleLint settings
yarn run lint:scripts - Check JS Fail
yarn run lint:scripts --fix -Fix errors in JS files according to ESLINT settings

Recommendations for use

Component approach to website development

Each BEM block has its own folder inside src/blocks/modules
The folder of one BEM block contains one Pug file, one SCSS file and one JS file (if the block uses a script)
- The block pug-file is imported into the src/views/index.pug file (or to the necessary page file where the block will be called)
- SCSS-file of the block is imported into the src/blocks/modules/_modules.scss file
- The Block JS file is imported into src/js/import/modules.js

An example of the structure of the folder with a BEM block:

 blocks
├── modules
│   ├── header
│   │   ├── header.pug
│   │   ├── header.js
│   │   ├── header.scss

In order not to manually create the corresponding folder and files, it is enough to prescribe the following commands in the console:

yarn run bem-m my-block -to create a BEM block in src/block/modules (for the main BEM blocks), where my-block is the name of the BEM block (after the creation you need to delete the contents of the BAM block jS file);
yarn run bem-с my-component -to create a component in src/blocks/components (for components), where my-component is the name of the component (after creating you need to delete the contents of the BEM component JS file);

Components

Components (for example, icons, buttons) are issued in PUG using impurities
Each component has its own folder inside src/blocks/components
The folder of one component contains one PUG file, one SCSS file and one JS file (if the component uses a script)
- The component pug file is imported to src/views/index.pug (or to the necessary page file from where the component will be called)
- The component SCSS file is imported into the src/blocks/components/_components.scss file
- The component JS file is imported into the src/js/import/components.js file

Pages of the project

The project pages are in src/views/pages folder
- Each page (including the main one) inherits src/views/layouts/default.pug template template
- Main page: src/views/index.pug

Fonts

Fonts are in the src/fonts folder
- Use .woff formats and .woff2
- Fonts are connected to the src/styles/base/_fonts.scss file
- You can adjust local fonts using this service

Images

Images are in the src/img folder
- Images are automatically converted into the .webp format. Detailed information on use here
- The image for the generation of Favikonok should be in the src/img/favicon folder and have a size of at least 1024px x 1024px

SVG

To create sprites .svg image should be in the src/img/sprites folder. For example, we have icon-1.svg , icon-2.svg and icon-3.svg files, and we must contact icon-2.svg . To do this, in HTML you need to use the use tag:

svg
    use ( xlink:href = "img/sprites/sprite.svg#logo" )

Change the styles of SVG-icons from the sprite in CSS:

 svg use {
    fill : red;
}

There is a situation when the styles of the icons cannot be changed. This is due to the fact that when exporting from FIGMA to SVG, an extra code is added. For example:

 < svg width =" 18 " height =" 19 " viewBox =" 0 0 18 19 " fill =" none " xmlns =" http://www.w3.org/2000/svg " >
  < path d =" M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z " fill =" #1B1B1D " />
</ svg >

It is necessary to remove fill="none" and fill="#1B1B1D" . It should turn out like this:

 < svg width =" 18 " height =" 19 " viewBox =" 0 0 18 19 " xmlns =" http://www.w3.org/2000/svg " >
  < path d =" M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z " />
</ svg >

Forter libraries

All third -party libraries are installed in node_modules folder
- To download them, use yarn add package_name command
- To connect the library jS files, import them at the very beginning of the BEM block jS file (that is, the BEM block that uses the script), for example:
```
 import $ from "jquery" ;
```
- To connect the styling files of libraries, import them to the src/styles/vendor/_libs.scss file
- Js files and stylistic files of libraries cannot be changed on your own