Automatizacija u Front-end razvojnom procesu

@dalibor_gogic

Node.js

Node.js je platforma za izgradnju brzih i skalabilnih aplikacija izgradjena na osnovi

V8 JavaScript engine.

$ node -v

v4.4.5

https://nodejs.org/en/

Node Package Manager

https://www.npmjs.com/

$ npm -v3.5.2

npm je zvanicni centralni repozitorijum node modula kao i softver za upravljanje bibilotekama (modulima) od kojih vasa aplikacija zavisi (dependencies).

$ npm init -y

// package.json{ "name": "web-startit-kit", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC"}

$ npm help json

https://docs.npmjs.com/

Version Control

Sistem kontrole verzija dizajniran tako da cuva i nadgleda na podatke kao da su skup snimaka (snapshots) minijaturnog sistema od malih do veoma velikih projekata sa brzo i efikasno.

https://git-scm.com/

$ git --versionGit version 2.7.4

$ git initInitialized empty Git repository in /foo/.git/$ touch foo.txt$ git statusOn branch master

Initial commit

Untracked files: (use "git add <file>..." to include in what will be committed)

foo.txt

nothing added to commit but untracked files present (use "git add" to track)

$ git add foo.txt$ git commit -m "short description"$ git status

On branch masternothing to commit, working directory clean

$ git config --global user.name "Dalibor Gogic"$ git config --global user.email mail@daliborgogic.com

Dokumentacijahttps://git-scm.com/doc

tryGithttps://try.github.io

Syntactically Awesome Style Sheets

Olaksava upravljanje kompleksnim CSS fajlovima. Postize se upotrebom preprocesora [programa koji se izvrsavaju lokalno ili na serveru] i koji prevode Sass u CSS koji pretrazivaci razumeju.

Za razliku od regularnog CSS, Sass je pravi skriptni jezik sa izrazima, funkcijama, varijablama, uslovnom logikom i petljama.

Sass je CSS preprocesor – sloj izmedju stilova kojima upravljate i CSS fajlova koje prosledjujete serveru. Sass popunjava rupe u CSS-u kao jeziku, dozvoljavajuci vam da pisete kod koji ce biti brzi, efikasniji i laksi za odrzavanje.

Sass omogucava da dodate funkcionalnosti CSS-u, i prevodi [kompajlira] u CSS fajlove preko razlicitih programa ili web framework plugin-a.

http://sass-lang.com/

Instalacija1. Aplikacije2. Command Line

Pre nego sto pocnemo da koristimo Sass potrebno je da instalira Ruby. http://rubyinstaller.org/

http://sass-lang.com/install

$ gem install sass

$ sass -vSass 3.4.22 (Selective Steve)

$ sass --watch app/sass:public/stylesheets

// SCSS$font-stack: Helvetica, sans-serif;$primary-color: #333;

body { font: 100% $font-stack; color: $primary-color;}

// CSSbody { font: 100% Helvetica, sans-serif; color: #333;}

Variable

// SCSSnav { ul { margin: 0; padding: 0; list-style: none; }

li { display: inline-block; }

a { display: block; padding: 6px 12px; text-decoration: none; }}

// CSSnav ul { margin: 0; padding: 0; list-style: none;}

nav li { display: inline-block;}

nav a { display: block; padding: 6px 12px; text-decoration: none;}

Nesting

Omogucava kreiranje delimicnih Sass datoteka koje sadrze male delove CSS i koje je moguce uneti u druge Sass fajlove.

Ovo je odlican nacin za modularizovanje CSS-a i pomaze prilikom razvoja.

Partials je fajl sa ekstenzijom scss i imenom koji sadrzi prefix _

_partial.scss

_ oznacava da je fajl samo delimican i da ne bi trebalo da se generise u css.

Partials

CSS ima opciju za uvoz koji nam omogucava da podelimo CSS u manje delova.Jedina mana je sto svaki put kada koristimo @import u CSS to stvara jos jedan HTTP zahtev.

Sass @import se nalazi na pocetku ali umesto da trazi HTTP zahtev, Sass ce preuzeti scss fajl koji zelimo da uvezemo i spaja u jedan css.

Import

// _reset.scsshtml,body,ul,ol { margin: 0; padding: 0;}

// base.scss@import 'reset';

body { font: 100% Helvetica, sans-serif; background-color: #efefef;}

Npr imamo Sass fajlove, _reset.scss i base.scss i zelimo da uvezemo reset.scss u base.scss

// base.csshtml, body, ul, ol { margin: 0; padding: 0;}

body { font: 100% Helvetica, sans-serif; background-color: #efefef;}

Pojedine stvari u css-u su malo dosadne da se pisu, posebno u css verziji 3 i mnogim vendor prefixima koje postoje. Mixins nam omogucava da napravimo grupe deklaracija css-a koje zelimo da koristimo.

Mozemo proci i kroz vrednosti kako bi mixin bio fleksibilniji.

Mixins

// scss@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius;}

.box { @include border-radius(10px); }

// css.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;}

Ovo je jedna od najkorisnijih odlika Sass-a. @extend nam omogucava da delimo set css osobina iz jednog selektora u drugi.

Extend

// scss.message { border: 1px solid #ccc; padding: 10px; color: #333;}

.success { @extend .message; border-color: green;}

.error { @extend .message; border-color: red;}

.warning { @extend .message; border-color: yellow;}

// css.message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333;}

.success { border-color: green;}

.error { border-color: red;}

.warning { border-color: yellow;}

+, -, *, / i %

Operators

// scss.container { width: 100%; }

article[role="main"] { float: left; width: 600px / 960px * 100%;}

aside[role="complementary"] { float: right; width: 300px / 960px * 100%;}

// css.container { width: 100%;}

article[role="main"] { float: left; width: 62.5%;}

aside[role="complementary"] { float: right; width: 31.25%;}

Autoprefixer

PostCSS dodatak da analizira CSS i dodaje vendor prefikse koristeci podatke sa Can I Use

http://caniuse.com/

Rad sa Autoprefixer je jednostavan, zaboravite na vendor prefixe i pisite normalno CSS prema najnovijim WC3 specifikacijama.

Autoprefixer podrzava selektore kao sto su :fullscreen , ::selection, calc(), @supports, @keyframes.

Autoprefixer je postprocessor i mozete ga koristiti sa preprocessors kao sto su Sass, Stylus ili Less

https://github.com/postcss/autoprefixer

Flexbox, Filters …

.foo { display: flex;}

// kompajlira u.foo { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex}

Autoprefixer takodje uklanja zastarele prefikse

Source Maps

Source Maps obezbedjuju nacin mapiranja kod-a u kompresovanom fajlu nazad u prvobitnu poziciju izvorne datoteke.

Uz malu pomoc softvera mozemo lako debagovati aplikacije.

Brauzeri Chrome i Firefox u sebi vec imaju implementiranu podrsku za Source Maps.

// main.scss@include "variable"@include "base"

// _variable.scss$brand-color: #f2f2f2;

// _base.scssbody { background-color: $brand-color;}

// main.cssbody{background-color: #89ABE3;}

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9iYXNlLnNjc3MiLCJfdmFyaWFibGUuc2NzcyJdLCJuYW1...= */

Streaming build system

Gulp sluzi za automatizaciju procesa. Omogucava nam da se usresredimo na pisanje kod-a. Automatizacija procesa poput minifikacije javaskripta, optimizacije slika, unit testova moze ustedeti dosta vremena.

Za svoj rad koristi strimove [streams]. Oni sluze da obrade podatke i proslede rezultat za dalju obradu.

http://gulpjs.com/

Instalacija gulp globalno

Ako ste prethodno instalirali verziju gulp globalno, potrebno je proveriti da li se prethodna verzija ne podudara sa gulp-cli

$ npm rm -g gulp

$ npm install -g gulp-cli

$ gulp -v

CLI version 1.2.1

// gulpfile.js

'use strict'

var gulp = require('gulp')

gulp.task('default')

Pokretanje$ gulp

Default zadatak ce se pokrenuti i nece uraditi nista.

http://gulpjs.com/plugins/

Search 2429 plugins..

Plugins

https://www.npmjs.com/package/gulp-sass/

gulp-sass

$ npm i -D gulp-sass

// gulpfile.js

'use strict'

var gulp = require('gulp')

gulp.task('default')

// gulpfile.js

'use strict'

var gulp = require('gulp')

var sass = require('gulp-sass')

gulp.task('sass', function () {

return gulp.src('./sass/**/*.scss')

.pipe(sass().on('error', sass.logError))

.pipe(gulp.dest('./css'))

})

gulp.task('sass:watch', function () {

gulp.watch('./sass/**/*.scss', ['sass'])

})

$ gulp sass:watch

A package manager for the web

Instalacija

http://bower.io/

$ npm i bower -g

$ bower -v

1.7.9

$ bower init

# instalira listu paketa iz bower.json

$ bower i

# registrovan paket

$ bower i <package>

# GitHub shorthand

$ bower i daliborgogic/foo

# Git endpoint

$ bower i git://github.com/daliborgogic/foo.git

# URL

$ bower i https://daliborgogic.com/script.js

Bower instalira pakete u folder bower_components/

Pretraga paketa

http://bower.io/search/

$ bower search <package>

$ bower search jquery

Search results:

jQuery https://github.com/jquery/jquery.git

jquery https://github.com/jquery/jquery-dist.git

...

$ bower i https://github.com/jquery/jquery-dist.git -D

Web Startit Kit

SSH$ git clone git@github.com:daliborgogic/web-startit-kit.git

HTTPS$ git clone https://github.com/daliborgogic/web-startit-kit.git

DOWNLOADhttps://github.com/daliborgogic/web-startit-kit/archive/master.zip

web-startit-kit |-- .git |-- app |-- img |-- js |-- css |-- favicon.ico |-- index.html |-- .bowerrc |-- .editorconfig |-- .gitignore |-- README.md |-- bower.json |-- gulpfile.js |-- package.json

// package.json

...

"scripts": {

"init": "npm i && bower i && gulp",

"start": "gulp",

"test": "echo \"Error: no test specified\" && exit 1"

}

...

Inicijalno$ npm run init

Development$ npm run start

Web Startit Kithttps://github.com/daliborgogic/web-startit-kit

Gulp ✓Bower ✓Sass ✓Autoprefixer ✓Source Maps ✓HTTP Server ✓Browsersync ✓

Hvala na paznji