Automatizacija u Front-end razvojnom procesu

Automatizacija
u Front-end razvojnom procesu
@dalibor_gogic

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/

https://www.npmjs.com/
$ npm -v
3.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/

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 --version
Git version 2.7.4

$ git init
Initialized empty Git repository in /foo/.git/
$ touch foo.txt
$ git status
On 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 master
nothing to commit, working directory clean
$ git config --global user.name "Dalibor Gogic"
$ git config --global user.email mail@daliborgogic.com

Dokumentacija
https://git-scm.com/doc
tryGit
https://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/

Instalacija
1. Aplikacije
2. 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 -v
Sass 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;
}
// CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
Variable

// SCSS
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
// CSS
nav 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.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
// base.scss
@import 'reset';
body {
background-color: #efefef;
}
Npr imamo Sass fajlove, _reset.scss i base.scss i zelimo da uvezemo reset.scss
u base.scss
// base.css
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
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%;
}

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 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.scss
body {
background-color: $brand-color;
}
// main.css
body{background-color: #89ABE3;}
/*# sourceMappingURL=data:application/json;base64,
eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9iYXNlLnNjc3MiLCJfdmFyaWFi
bGUuc2NzcyJdLCJuYW1...= */

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'
gulp.task('default')
// gulpfile.js
'use strict'
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

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

SSH
$ git clone git@github.com:daliborgogic/web-startit-kit.git
HTTPS
$ git clone https://github.com/daliborgogic/web-startit-kit.git
DOWNLOAD
https://github.com/daliborgogic/web-startit-kit/archive/master.zip

// 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 Kit
https://github.com/daliborgogic/web-startit-kit
Gulp ✓
Bower ✓
Sass ✓
Autoprefixer ✓
Source Maps ✓
HTTP Server ✓
Browsersync ✓

Automatizacija u Front-end razvojnom procesu

Recommended

Recommended

More Related Content

Similar to Automatizacija u Front-end razvojnom procesu

Similar to Automatizacija u Front-end razvojnom procesu (20)

Recently uploaded

Recently uploaded (14)

Automatizacija u Front-end razvojnom procesu