glivera-team-template's Introduction

Welcome to glivera-team-template

Get started

Install node.js,python(2 version),Microsoft Visual Studio C++ 2013

Install npm packages. If you have problems in browser-sync install on Windows look here

npm i

If you use link of global packages:

npm install gulp rimraf gulp-pug [email protected] gulp-inline-image gulp-autoprefixer gulp-plumber gulp-directory-sync browser-sync gulp-concat gulp-cssfont64 gulp-purifycss gulp-terser gulp-image imagemin-pngquant gulp-csso gulp-sourcemaps postcss gulp-postcss postcss-assets postcss-reporter stylelint postcss-scss gulp-sequence gulp-svg-sprite gulp-svgmin gulp-cheerio gulp-replace gulp-notify gulp-webp -g

npm link gulp rimraf gulp-pug gulp-sass gulp-inline-image gulp-autoprefixer gulp-plumber gulp-directory-sync browser-sync gulp-concat gulp-cssfont64 gulp-purifycss gulp-terser gulp-image imagemin-pngquant gulp-csso gulp-sourcemaps gulp-postcss postcss-assets postcss-reporter stylelint postcss-scss gulp-sequence gulp-svg-sprite gulp-svgmin gulp-cheerio gulp-replace gulp-notify gulp-webp

Let's code!
```
gulp
```
Edit files in assets folder, see result in dist folder. If you want to build optimized version of project run :
```
gulp build
```
Command for html validation
```
gulp validation
```
Lint your styles
```
gulp cssLint
```

How to work with js

Create all your main scripts in /assets/js. Create all your additional scripts (jquery,plugins, и т.д) in /assets/js/all. Gulp will concat all your additional scripts into all.js

How to make iconfont

Install packages

npm install [email protected] gulp-iconfont-css -D

Put your icons to /assets/i/icons folder
Change variable 'fontName' in gulpfile.js ('iconfont' by default).
Uncomment iconfont task and run
```
gulp iconfont
```
Pic your font in /assets/fonts/icons and font extends(%placeholders) in /assets/sass/_icons.scss
Edit your font on iconmoon

How to make svg-sprite

Install packages

npm install gulp-svg-sprite gulp-svgmin gulp-cheerio gulp-replace -g

npm link gulp-svg-sprite gulp-svgmin gulp-cheerio gulp-replace

Put your icons into /assets/i/icons folder
Uncomment task svgSpriteBuild
Run task svgSpriteBuild
Now you have sprite.svg in /assets/i/sprite folder. By default you have svg4everybody script in your js. Also you have scss file _sprite.scss for styling sprite.
Add svg4everybody in your main.js file. For including icons use pug mixin "icon"

$(document).ready(function () {
	svg4everybody({});
});

Working with images with PostCSS:

.test_block {
        width: width('rub.png');
        height:  height('rub.png');
        background: resolve('rub.png') no-repeat;
        background-size: size('rub.png');
}

How to test

Install packages

npm i chrome-launcher fs http node-static path pixelmatch pngjs puppeteer -g

npm link chrome-launcher fs http node-static path pixelmatch pngjs puppeteer

Open gulpfile.js. Add all names of tested pages to array pageList
Run task gulp test-init to create reference screenshots from your pages or put your images manually into test/before/ folder
Run task gulp test-compare to compare current state of the pages with the reference

glivera-team-template's Issues

Setup multiple pages

Hi, thanks for the awesome template. A small thing. I couldn't able to find out how to setup the project in-order to work with multiple pages. If you could help me this that would be helpful.