What is in the starting project

• SCSS preprocessor
• Autoprefixer
• Simple [template engine] (https://www.npmjs.com/package/gulp-file-include) for HTML
• [Browser Sync] (https://www.browsersync.io) (Livereload)
• Sprite generator
• Resource minification
• Compression graphics

What is needed for this

Install [NodeJS] (https://nodejs.org/en/) Plugin for editor [Editorconfig] (http://editorconfig.org)

Project start

Clone project In the console, go to the project folder and install the dependencies

npm install
npm install -g gulp-cli (if not installed)

Available Commands

gulp - Launch a development project, server and file tracking gulp build - build a project for uploading to production gulp sprite - sprite assembly

Project structure

start-frontend-project /
    ├── / build / # The result of the assembly. (Never edited).
    ├── / node_modules / # Node modules. (Never edited).
    ├── / src / # Source files.
    │ ├── / _include / # HTML markup that is inserted into other files.
    │ ├── / fonts / # Fonts.
    │ ├── / images / # Original images.
    │ │ └── / sprite / # Images for sprites.
    │ ├── / scripts / # Project scripts.
    │ ├── / sass / # See the folder structure below.
    └── .editorconfig # Configuring the editor.
    └── .gitignore
    └── gulpfile.js # Configuration for Gulp.
    └── package.json # Packages for NPM.
    └── projectConfig.json # Settings and dependencies of the project.

sass folder structure

sass /
    ├── / block / # Styles for blocks.
    ├── / elements / # Styles for elements.
    ├── / pages / # Styles for pages.
    └── _base.scss # Basic styles. (Box sizing).
    └── _mixins.scss # Mixins.
    └── _sprite.scss # Sprites. (Generated by a sprite generator).
    └── _typography.scss # Typography of the project.
    └── _variables.scss # Variables.
    └── main.scss # Compiled file.

projectConfig.json

In this file, you can add JS and CSS files to the project installed through NPM and not only. ATTENTION! This is JSON. This is strict syntax; the last element in any context should not have a comma at the end of the line.

Useful links

[Collection of links] (https://github.com/redwon/developer-links)