Template for our projects.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

Welcome to glivera-team-template

Get started

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

     npm install gulp -g
    
  2. 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 gulp-sass gulp-inline-image gulp-autoprefixer gulp-plumber gulp-directory-sync browser-sync gulp-concat gulp-cssfont64 gulp-html5-lint gulp-purifycss gulp-uglify gulp-imagemin 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 -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-html5-lint gulp-purifycss gulp-uglify gulp-imagemin 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
    
  3. Let's code!

     gulp
    
  4. Edit files in assets folder, see result in dist folder. If you want to build optimized version of project run :

     gulp build
    
  5. Command for html validation

     gulp validation
    
  6. 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

  1. Install packages

     npm install gulp-iconfont@4.0.0 gulp-iconfont-css -D
    
  2. Put your icons to /assets/i/icons folder

  3. Change variable 'fontName' in gulpfile.js ('iconfont' by default).

  4. Uncomment iconfont task and run

     gulp iconfont
    
  5. Pic your font in /assets/fonts/icons and font extends(%placeholders) in /assets/sass/_icons.scss

  6. Edit your font on iconmoon

How to make svg-sprite

  1. 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
    
  2. Put your icons into /assets/i/icons folder

  3. Uncomment task svgSpriteBuild

  4. Run task svgSpriteBuild

  5. 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.

  6. 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');
}