A Gulp-sass beállítása a parancssor használatával, ha Ön kezdő

Jelenleg egy technológiai cégnél gyakornok vagyok, és néhány napja kaptam egy kihívást a főnökömtől egy cikk megírásával kapcsolatban. Ezért úgy döntöttem, hogy írok valamit a Gulp-sass-ra.

Beállítása néha frusztráló lehet, különösen, ha még nem ismeri. A Windows rendszert használom, és olyan cikk keresése, amely megoldja a problémámat, olyan volt, mintha Jack-et írnám a „csökkent” kifejezésre.

Ok, azt hiszem, egy kicsit elhurcoltam ott ... elég rólam, kezdjük!

PS ez az első publikált cikkem, és remélem, hogy szereted. :)

Csomópont telepítése

Először nyissa meg a parancssort, és telepítse a node.js fájlt a számítógépére. Jön egy Node Package Manager (npm), amelyet a Gulp telepítésére használhat. A telepítés után futtatással telepítheti a Gulpot npm install gulp -g. A -gutasítja NPM telepíteni Culp globálisan számítógépén (ez azt jelenti, hogy tudod használni korty parancsokat bárhol a számítógépen.)

Mielőtt folytatom, feltételezem, hogy ismeri a parancssort!

Keresse meg a projekt könyvtárát, és futtassa npm init. Ez létrehoz egy package.json fájlt, nyomja meg az Enter billentyűt, és hozzáadja azt, amire szüksége van

a package.json fájlt.

Igen, lehet, hogy kíváncsi arra, hogy mi a helyes a package.json fájl?

A package.json fájl különféle metaadatokat tartalmaz a projekt szempontjából. Ez a fájl információkat ad anpmés lehetővé teszi a projekt azonosítását, valamint a projekt függőségeinek kezelését. Ez megkönnyíti a Gulp projektben használt összes feladat telepítését is.

Ha még mindig nem érted meg, valószínűleg Diane-re van szükséged, hogy jobban megmagyarázza - mi a problémám / rögeszmém a fekete-ish-val szemben ??

Futtatás npm-initután írja be npm install gulp --save-dev, ez utasítja az npm-t, hogy telepítse a Gulp-ot a projektjébe. Használva--save-dev a Gulp-ot dev-függőségként tároljuk a csomagban.json.

Gulpfile létrehozása

Most, hogy telepítette a Gulp-ot, készen áll az első feladat telepítésére. requireGulpnak kell lenned. Hozzon létre egy új fájlt gulpfile.js néven a projektkönyvtárában - Ezt bármely szövegszerkesztővel megteheti. Kezdje azzal, hogy hozzáadja az alábbi kódot a gulpfile-hoz.

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

Feladat beállítása

Most telepíthet egy nagyszerű feladatot - ebben az esetben a Gulp-sass-t telepítenénk. Ez a feladat lehetővé teszi a Sass konvertálását CSS-be . A parancssor továbbra is használva futtatásával telepítheti a Gulp-sass programot npm install gulp-sass --save-dev. Ezután igényeljen Gulp-sass-t a gulpfile.js fájlba.

Tegye var sass = require(‘gulp-sass’);a vonal alá, amire szüksége van.

A projekt felépítése

Az alábbi sorok használata előtt feltételezem, hogy tudja, hogyan kell felépíteni egy webalkalmazást. Itt a közös webalkalmazások felépítését fogom használni.

Sass / scss összeállítása

Az utolsó dolog az, hogy utasítsa a falatot, hogy milyen fájlokra van szüksége az átalakításhoz, és hol legyen a rendeltetési hely - hol lesz a kimeneti fájl tárolva.

Használja a következőket;

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

A gulp.src fájl konvertálása megtörténik, a használatával kiválaszthatja az összes .scss fájlt is egy könyvtárban “app/scss/*.scss”. Ez kiválasztja az összes .scss fájlt az scss mappában.

A gulp.dest a kimenet. A kimenetet az alkalmazásmappa CSS mappájában tároljuk.

Gulp-watch-sass

A Gulp rendelkezik egy figyelő szintaxissal, amely lehetővé teszi a forrásfájlok megfigyelését, majd a kódon végrehajtott változtatások „figyelését”. Csak írja be a szintaxist a gulpfile.js fájlba a következő gépeléssel:

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

Nagyjából ennyit kell tennie! Nem volt annyira stresszes, vagy nem?

Köszönöm, hogy elolvasta!