V prvom rade, pozri si moje instagram hajlajty* tuto ak ti chýba dôležité umenie.
* tu sú tamtie kruhové ikonky v profile, ak si starý jak ja

To bolo dôležité, teraz si môžeš pozrieť videá o tom, jak NPM použiť ako build tool/task runner. Čiže namiesto Grunt/Gulp alebo namiesto Webpacku, ak sa nasereš nadurdíš.

task runners
:: https://gulpjs.com
:: https://gruntjs.com
:: https://www.npmjs.com

build tools, frontend tools
:: https://gulpjs.com
:: https://survivejs.com/webpack/appendices/comparison
:: https://medium.freecodecamp.org/making-sense-of-front-end-build-tools-3a1b3a87043b

vybúchanec
:: https://www.google.com/maps/place/071+01+Nacina+Ves-Vyb%C3%BAchanec...

 

NPM ti dovolí spúštať veškeré konzolové príkazy. Jedna otravnosť - ak si unixák a pracuješ v tíme s windowsákmi, u nich nemusí "rm" napr. fungovať. Preto tu mám rimraf v príklade.

{
  "name": "haha",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "balls": "echo 'masívne vajčiaky'",
    "clean": "rimraf ihateyou.txt",
    "file:make": "touch ihateyou.txt",
    "file:write": "echo 'a lot' >> ihateyou.txt",
    "gimme": "npm run clean && npm run file:make && npm run file:write",
    "pregimme": "echo 'im doing it'",
    "postgimme": "echo 'i did it'"
  },
  "devDependencies": {
    "rimraf": "^2.6.2"
  }
}

Ak v konzole zadelíš npm run gimme, clean vymaže súbor, file:make vytvorí nový a file:write doň uloží hodnotu. Ale automaticky sa spustia aj pre a post príkazy pre gimme. Zrejme si vieš tipnúť kedy. Ale nemusíš tipovať, stačí kuknúť video, kde všetko ukážem.

 

Pár špeciálnych znakov, čo môžeš pri konzolovaní používať:

    &&     spusti tasky po sebe
    &      susti tasky naraz
    <      posle obsah suboru do prikazu
    >      vysledok prikazu posle do suboru
    |      posle vysledok jedneho prikazu DO druheho prikazu

 

Realistickejší príklad:

{
  "name": "bubu",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "clean": "rimraf css/* & rimraf js/*",
    "build:css": "node-sass sass/base.scss css/style.css",
    "build:js": "babel src/app.js --out-file js/app.js",
    "build": "npm run build:css & npm run build:js",
    "prebuild": "npm run clean",
    "postbuild": "uglifyjs js/app.js -o js/app.js & uglifycss css/style.css --output css/style.css"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "node-sass": "^4.9.2",
    "rimraf": "^2.6.2",
    "uglify-js": "^3.4.6",
    "uglifycss": "0.0.29"
  }
}

Tu sa Sass zmastí na CSS, babel zláme nový JS na ES5 a uglify minifikne kód a všetky tieto veci. Ak do toho prihodíš browserify, máš aj moduly.

 

npm task run && build tool
:: https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool
:: https://gablaxian.com/blog/using-npm-as-a-build-tool
:: https://scotch.io/tutorials/using-npm-as-a-build-tool

 

Občas treba Webpack

Nastavovať Webpack je čo? Nie. Jedno veľké nie. Na menšie veci ti postačí aj takýto NPM setup, ak v tom ale začneš mať bordel, Parcel alebo Webpack sú tu pre teba a vieš čo?

Vieš čo je šťastie? V mojom JavaScript a ES6 kurze je cez 35 videí o nich;)
A dokopy cez 170 videí, ktoré ťa naučia veci... (šimaj túto reklamu) ...veci ako:

- syntax a pravidlá jazyka JavaScript
- JavaScript v prehliadači
- moderný ES6/ES7/ES8+ JavaScript
- npm / yarn
- skrotiť Document Object Model
- zvládnuť Event Loop
- SVG animácie
- Webpack / Parcel / Babel
- ES6 moduly
- asynchrónne programovanie, async/await, promises
- Grunt/Gulp/NPM task runner
- vyrobiť vlastný NPM package

Väčšinu roka 2018 som strávil tvorbou tohoto kurzu. A som staromódny v tom, že robiť si promo a reklamu na svoje veci je mi neprirodzené. A nepríjemné. A fuj. Avšak. Avšak! Väčšinu roka som strávil tvorbou tohoto kurzu. A má v sebe kopu dobrých vecí. Tu dole nižšie si môžeš pozrieť pár z nich. Sú z úvodu kurzu, v ňom postupne prejdem aj k pokročilým veciam o optimalizácii kódu atď. Každopádne zapotil som sa a tak si spravím trocha reklamy a hotovo!

pozri si pár drobných ukážok z úvodu, ňach máš predstavu

? 170 javascript videí ?
:: https://www.learn2code.sk/kurzy/online-kurz-javascript-es6 viac https://bit.ly/JavascriptKurz

Ak chceš nové info o všetkom, choď na facebook.com/yablko.smrdi.
Ak chceš ďalšie moje videá, choď na youtube.com/yablko.
Ak chceš kvalitný™ kontent™ instagram.com/yablko.
Ak chceš všetky kurz na rok, skús predplatné.
Ak sa ti kurz páči, povedz každému:)