de Simeon Bello

În prezent sunt intern la o firmă de tehnologie și acum câteva zile am primit o provocare de la șeful meu cu privire la scrierea unui articol. Așa că am decis să scriu ceva pe Gulp-sass.
Configurarea acestuia poate fi uneori frustrantă, mai ales atunci când sunteți nou la asta. Folosesc Windows și căutarea unui articol care să rezolve problema mea a fost ca și cum i-aș face pe Jack în Black-ish să scrie „scade”.

Ok cred că m-am lăsat un pic dus acolo … suficient despre mine, să începem!

PS acesta este primul meu articol publicat și sper să vă placă. 🙂

Instalarea nodului

Mai întâi, deschideți linia de comandă și instalați node.js pe calculatorul tau. Acesta vine cu un Node Package Manager (npm) pe care îl puteți utiliza pentru a instala Gulp. După instalare, puteți instala Gulp rulând npm install gulp -g. -g instruiește npm pentru a instala Gulp la nivel global pe computer (acest lucru înseamnă că puteți utiliza comenzi gulp oriunde pe computer).

Înainte de a continua, presupun că sunteți familiarizați cu linia de comandă!

Navigați la directorul de proiect și rulați npm init. Aceasta va crea un fișier package.json, apăsați Enter și va adăuga ceea ce aveți nevoie
fișierul package.json.

Da, s-ar putea să vă întrebați ce este corect un fișier package.json?
A fișier package.json deține diverse metadate relevante pentru proiectul dvs. Acest fișier oferă informații către npm și îi permite să identifice proiectul, precum și să gestioneze dependențele proiectului. De asemenea, facilitează instalarea tuturor sarcinilor utilizate într-un proiect Gulp.

Dacă tot nu o primești, probabil că ai nevoie de Diane pentru a o explica mai bine – care este problema / obsesia mea cu Black-ish ??

După alergare npm-init, tip npm install gulp --save-dev, aceasta instruiește npm pentru a instala Gulp în proiectul dvs. Prin utilizarea --save-dev stocăm Gulp ca o dependență de dev în package.json.

Crearea unui Gulpfile

Acum că ați instalat Gulp, sunteți gata să instalați prima sarcină. Trebuie să require Înghiţitură. Creați un fișier nou numit gulpfile.js în directorul de proiect – Puteți face acest lucru folosind orice editor de text. Începeți prin adăugarea codului de mai jos la fișierul dvs. gulpfile.

‘use strict’;
var gulp = require(‘gulp’);

Configurarea unei sarcini

Acum puteți instala un sarcină de înghițit – în acest caz am instala Gulp-sass. Această sarcină face posibilă conversia Sass la CSS. Folosind în continuare linia de comandă, puteți instala Gulp-sass rulând npm install gulp-sass --save-dev. După aceea, solicitați Gulp-sass în gulpfile.js.

A pune var sass = require(‘gulp-sass’);sub linia pe care ai cerut să o înghiți.

Structurarea proiectului

Înainte de a utiliza liniile de mai jos, presupun, de asemenea, că știți cum să structurați o aplicație web. Aici voi folosi structura aplicațiilor web comune.

Cum sa configurati Gulp sass folosind linia de comanda daca sunteti

Compilarea sass / scss

Ultimul lucru este apoi să instruiți gulp ce fișiere trebuie să convertească și unde ar trebui să fie destinația – unde va fi stocat fișierul de ieșire.

Foloseste urmatoarele;

//compile gulp.task(‘sass’, function () { gulp.src(‘app/scss/app.scss’) .pipe(sass().on(‘error’, sass.logError)) .pipe(gulp.dest(‘app/css’)); });

Fișierul din gulp.src va fi convertit, puteți selecta și toate fișierele .scss dintr-un director folosind “app/scss/*.scss”. Aceasta va selecta toate fișierele .scss din folderul scss.

gulp.dest este ieșirea. Ieșirea va fi stocată în folderul CSS din folderul aplicației.

Gulp-watch-sass

Gulp are o sintaxă de ceas care îi permite să monitorizeze fișierele sursă și apoi să „urmărească” modificările aduse codului dumneavoastră. Doar adăugați sintaxa în gulpfile.js tastând:

//compile and watch gulp.task(‘sass:watch’, function() { gulp.watch(‘app/scss/app.scss’, [‘sass’]);});

Cam asta trebuie să faci! Nu a fost atât de stresant sau nu?

Mulțumesc pentru lectură!