Sådan opsættes Gulp-sass ved hjælp af kommandolinjen, hvis du er nybegynder

Jeg praktiserer i øjeblikket på et teknologisk firma, og for få dage siden fik jeg en udfordring fra min chef om at skrive en artikel. Så jeg besluttede at skrive noget på Gulp-sass.

At opsætte det kan være frustrerende nogle gange, især når du er ny på det. Jeg bruger Windows, og at søge efter en artikel, der ville løse mit problem, var som at få Jack in Black-ish til at stave "mindske".

Ok, jeg tror, ​​jeg blev lidt båret væk der… nok om mig, lad os komme i gang!

PS dette er min første offentliggjorte artikel, og jeg håber du elsker det. :)

Installerer knude

Åbn først kommandolinjen og installer node.js på din computer. Den leveres med en Node Package Manager (npm), som du kan bruge til at installere Gulp. Efter installationen kan du installere Gulp ved at køre npm install gulp -g. De -ginstruerer NPM at installere Gulp globalt på din computer (det betyder, at du kan bruge Gulp kommandoer hvor som helst på din computer.)

Før jeg fortsætter, antager jeg, at du er bekendt med kommandolinjen!

Naviger til din projektmappe, og kør npm init. Dette opretter en package.json-fil, tryk på enter, og den tilføjer det, du har brug for

filen package.json.

Ja, du undrer dig måske over, hvad en package.json-fil er rigtig?

En package.json-fil indeholder forskellige metadata, der er relevante for dit projekt. Denne fil giver information tilnpmog giver det mulighed for at identificere projektet samt håndtere projektets afhængighed. Det gør det også lettere at installere alle de opgaver, der bruges i et Gulp-projekt.

Hvis du stadig ikke får det, har du sandsynligvis brug for Diane til at forklare det bedre - hvad er mit problem / besættelse af sort-ish ??

Efter kørsel npm-init, skriv npm install gulp --save-dev, instruerer dette npm om at installere Gulp i dit projekt. Ved hjælp af--save-dev vi gemmer Gulp som en dev-afhængighed i pakken.json.

Oprettelse af en affaldsfil

Nu hvor du har installeret Gulp, er du klar til at installere den første opgave. Du er nødt til at requiresluge. Opret en ny fil kaldet gulpfile.js i dit projektmappe - Du kan gøre dette ved hjælp af en hvilken som helst teksteditor. Start med at tilføje koden nedenfor til din gulpfile.

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

Opsætning af en opgave

Nu kan du installere en gulp-opgave - i dette tilfælde installerer vi Gulp-sass. Denne opgave gør det muligt at konvertere Sass til CSS . Stadig ved hjælp af kommandolinjen kan du installere Gulp-sass ved at køre npm install gulp-sass --save-dev. Efter det skal du kræve Gulp-sass i dit gulpfile.js.

Sæt var sass = require(‘gulp-sass’);under den linje, du krævede gulp.

Strukturere dit projekt

Før du bruger linjerne nedenfor, antager jeg også, at du ved, hvordan du strukturerer en webapp. Her skal jeg bruge strukturen i almindelige webapps.

Kompilering af sass / scss

Den sidste ting er derefter at instruere gulp, hvilke filer den skal konvertere, og hvor destinationen skal være - hvor outputfilen gemmes.

Brug følgende:

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

Filen i gulp.src konverteres, du kan også vælge alle .scss-filer i et bibliotek ved hjælp af “app/scss/*.scss”. Dette vælger alle dine .scss filer i mappen scss.

Den gulp.dest er outputtet. Outputtet gemmes i CSS-mappen inde i app-mappen.

Gulp-watch-sass

Gulp har en ursyntaks, der gør det muligt at overvåge kildefiler og derefter "holde øje med ændringer foretaget i din kode. Bare tilføj syntaksen til din gulpfile.js ved at skrive:

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

Det er stort set alt, hvad du skal gøre! Det var ikke så stressende, eller var det?

Tak for læsningen!