by Simeon Bello
Olen tällä hetkellä harjoittelijana eräässä teknologiayrityksessä, ja muutama päivä sitten sain pomoltani haasteen artikkelin kirjoittamisesta. Niinpä päätin kirjoittaa jotain Gulp-sassista.
Sen käyttöönotto voi joskus olla turhauttavaa, varsinkin kun olet uusi siinä. Käytän Windowsia, ja sellaisen artikkelin etsiminen, joka ratkaisisi ongelmani, oli kuin saisi Jack in Black-ishin kirjoittamaan ”decrease”.
Okei, taisin hieman innostua…riittää minusta, aloitetaan!
P.S. tämä on ensimmäinen julkaistu artikkelini ja toivottavasti pidät siitä 
Noden asentaminen
Avaa ensin komentorivi ja asenna node.js tietokoneellesi. Sen mukana tulee Node Package Manager(npm), jonka avulla voit asentaa Gulpin. Asennuksen jälkeen voit asentaa Gulpin ajamalla npm install gulp -g. -g ohjeistaa npm:ää asentamaan Gulpin globaalisti tietokoneellesi (tämä tarkoittaa, että voit käyttää gulp-komentoja missä tahansa tietokoneellasi.)
Ennen kuin jatkan, oletan, että tunnet komentorivin!
Navigoi projektihakemistoosi ja suorita npm init. Tämä luo package.json-tiedoston, paina enteriä ja se lisää tarvitsemasi asiat
package.json-tiedostoon.
Joo, saatat ihmetellä, mikä on package.json-tiedosto, eikö niin?
Package.json-tiedostossa on erilaisia metatietoja, jotka liittyvät projektiisi. Tämä tiedosto antaa tietoa npm:lle ja antaa sen tunnistaa projektin sekä käsitellä projektin riippuvuuksia. Se myös helpottaa kaikkien Gulp-projektissa käytettävien tehtävien asentamista.
Jos et vieläkään ymmärrä, tarvitset luultavasti Dianen selittämään sen paremmin – mikä on ongelmani/pakkomielteeni Black-ishin suhteen?
Käynnistettyäsi npm-init, kirjoita npm install gulp --save-dev, tämä ohjeistaa npm:ää asentamaan Gulpin projektiisi. Käyttämällä --save-dev tallennamme Gulpin dev-riippuvuutena package.jsoniin.
Creating a Gulpfile
Nyt kun olet asentanut Gulpin, olet valmis asentamaan ensimmäisen tehtävän. Sinun täytyy require Gulp. Luo uusi tiedosto nimeltä gulpfile.js projektihakemistoosi – Voit tehdä tämän millä tahansa tekstieditorilla. Aloita lisäämällä alla oleva koodi gulpfile-tiedostoosi.
'use strict';var gulp = require('gulp');Tehtävän asettaminen
Nyt voit asentaa gulp-tehtävän – tässä tapauksessa asentaisimme Gulp-sassin. Tämä tehtävä mahdollistaa Sassin muuntamisen CSS:ksi. Käyttämällä edelleen komentoriviä voit asentaa Gulp-sassin ajamalla npm install gulp-sass --save-dev. Tämän jälkeen vaadi Gulp-sassia gulpfile.js:ssäsi.
Kirjoita var sass = require('gulp-sass'); sen rivin alle, jolla vaadit gulpia.
Projektin jäsentäminen
Ennen kuin käytät alla olevia rivejä, oletan myös, että osaat jäsentää verkkosovelluksen. Tässä käytän tavallisten web-sovellusten rakennetta.
Sass/scss:n kääntäminen
Viimeiseksi sitten on ohjeistettava gulpia siitä, mitä tiedostoja sen on muunnettava ja missä määränpäänä on oltava – minne tulostiedosto tallennetaan.
Käytä seuraavaa;
//compile gulp.task('sass', function () { gulp.src('app/scss/app.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('app/css')); });Tiedosto gulp.src muunnetaan, voit myös valita kaikki .scss-tiedostot hakemistossa käyttämällä "app/scss/*.scss". Tämä valitsee kaikki .scss-tiedostot kansiossa scss.
Tuloste on gulp.dest. Tuotos tallennetaan sovelluskansion sisällä olevaan CSS-kansioon.