Jak nastavit Gulp-sass pomocí příkazového řádku, pokud jste začátečník

Obrazový kredit

V současné době jsem stážistkou v technické firmě a před několika dny jsem dostal od svého šéfa výzvu ohledně psaní článku. Rozhodl jsem se tedy něco napsat na Gulp-sass.
Jeho nastavení může být někdy frustrující, zejména pokud jste v něm nový. Používám Windows a hledání článku, který by vyřešil můj problém, bylo jako přimět Jacka v Black-ishu k hláskování „snížení“.

Ok, myslím, že jsem se tam trochu unesl ... dost o mně, pojďme začít!

P.S. toto je můj první publikovaný článek a doufám, že se vám bude líbit. :)

Instalace uzlu

Nejprve otevřete příkazový řádek a nainstalujte do počítače soubor node.js. Je dodáván s Node Package Manager (npm), který můžete použít k instalaci Gulp. Po instalaci můžete Gulp nainstalovat spuštěním npm install gulp -g. -G přikazuje npm nainstalovat Gulp globálně do vašeho počítače (to znamená, že můžete gulp příkazy používat kdekoli na vašem počítači.)

Než budu pokračovat, předpokládám, že znáte příkazový řádek!

Přejděte do adresáře projektu a spusťte npm init. Tím vytvoříte soubor package.json, stisknete enter a přidá se to, co potřebujete
soubor package.json.

Jo, možná vás zajímá, co je soubor package.json v pořádku?
Soubor package.json obsahuje různá metadata relevantní pro váš projekt. Tento soubor poskytuje informace npm a umožňuje mu identifikovat projekt a řešit jeho závislosti. Usnadňuje také instalaci všech úkolů, které se používají v projektu Gulp.

Pokud to stále ještě nechápete, pravděpodobně budete potřebovat Diane, aby to lépe vysvětlila - jaký je můj problém / posedlost Black-ish ??

Po spuštění programu npm-init zadejte příkaz npm install gulp --save-dev, což nese pokyn npm nainstalovat Gulp do vašeho projektu. Použitím --save-dev uložíme Gulp jako závislost dev v balíčku.json.

Vytvoření Gulpfile

Nyní, když jste nainstalovali Gulp, jste připraveni nainstalovat první úkol. Musíte vyžadovat Gulp. Vytvořte nový soubor s názvem gulpfile.js v adresáři projektu - můžete to provést pomocí libovolného textového editoru. Začněte přidáním níže uvedeného kódu do gulpfile.

„Používejte přísně“;
var gulp = vyžadovat („gulp“);

Nastavení úkolu

Nyní můžete nainstalovat úkol gulp - v tomto případě bychom nainstalovali Gulp-sass. Tento úkol umožňuje převést Sass na CSS. Stále pomocí příkazového řádku můžete Gulp-sass nainstalovat spuštěním npm install gulp-sass --save-dev. Poté vyžadujte Gulp-sass ve svém gulpfile.js.

Dejte var sass = vyžadovat ("gulp-sass"); pod řádek, který jste potřebovali gulp.

Struktura projektu

Než použijete níže uvedené řádky, předpokládám také, že víte, jak strukturovat webovou aplikaci. Zde budu používat strukturu běžných webových aplikací.

Kompilace sass / scss

Poslední věcí je potom poučit, jaké soubory potřebuje převést a kde by měl být cíl - kde bude výstupní soubor uložen.

Použijte následující;

//sestavit
 gulp.task ('sass', function () {
 gulp.src („app / scss / app.scss“)
 .pipe (sass (). on ('error', sass.logError))
 .pipe (gulp.dest („app / css“));
 });

Soubor v gulp.src bude převeden, můžete také vybrat všechny soubory .scss v adresáři pomocí „app / scss / *. Scss“. Tím vyberete všechny vaše soubory .scss ve složce scss.

Výstup gulp.dest je výstup. Výstup bude uložen do složky CSS uvnitř složky aplikace.

Gulp-watch-sass

Gulp má syntaxi hodinek, která umožňuje sledovat zdrojové soubory a poté „sledovat“ změny provedené v kódu. Stačí přidat syntaxi do souboru gulpfile.js zadáním:

// kompilace a sledování
 gulp.task ('sass: watch', function () {
 gulp.watch ('app / scss / app.scss', ['sass' ']);
});

To je skoro všechno, co musíte udělat! Nebylo to stresující, nebo ne?

Děkuji za přečtení!