Како поставити Гулп-сасс помоћу командне линије ако сте почетник

Тренутно сам приправник у технолошкој фирми, а пре неколико дана добио сам изазов од шефа да напишем чланак. Зато сам одлучио да напишем нешто на Гулп-сасс.

Постављање може понекад бити фрустрирајуће, посебно када сте тек почетник. Користим Виндовс, а тражење чланка који би решио мој проблем било је попут наговарања Јацк-а у црно да пише „смањити“.

Ок, мислим да сам се мало занео тамо ... доста о мени, почнимо!

ПС ово је мој први објављени чланак и надам се да ће вам се свидети. :)

Инсталирање чвора

Прво отворите командну линију и инсталирајте ноде.јс на рачунар. Долази са Ноде Пацкаге Манагер (нпм) помоћу којег можете инсталирати Гулп. Након инсталирања, можете инсталирати Гулп покретањем npm install gulp -g. У -gналаже НПМ да се инсталира Гулп глобално на рачунару (то значи да можете било где користите гутљај команде на рачунару.)

Пре него што наставим, претпостављам да сте упознати са командном линијом!

Дођите до директорија вашег пројекта и покрените npm init. Ово ће створити датотеку пацкаге.јсон, притисните ентер и она ће додати оно у шта требате

датотеку пацкаге.јсон.

Да, можда се питате која је датотека пацкаге.јсон исправна?

Датотека пацкаге.јсон садржи разне метаподатке релевантне за ваш пројекат. Ова датотека даје информације занпми омогућава му да идентификује пројекат, као и да се носи са пројектним зависностима. Такође олакшава инсталирање свих задатака који се користе у пројекту Гулп.

Ако и даље не схватате, вероватно ће вам требати Диане да би то боље објаснила - који је мој проблем / опсесија са Блацк-исх ??

Након покретања npm-init, откуцајте npm install gulp --save-dev, ово упућује нпм да инсталира Гулп у ваш пројекат. Коришћењем--save-dev чувамо Гулп као зависност од програмера у пакету.јсон.

Прављење датотеке Гулп

Сада када сте инсталирали Гулп, спремни сте за инсталирање првог задатка. Морате requireгутати. Направите нову датотеку звану гулпфиле.јс у директоријуму свог пројекта - то можете учинити помоћу било ког уређивача текста. Започните додавањем доњег кода у свој гулпфиле.

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

Постављање задатка

Сада можете инсталирати гулп задатак - у овом случају ми бисмо инсталирали Гулп-сасс. Овај задатак омогућава претварање Сасс у ЦСС . И даље користећи командну линију, можете инсталирати Гулп-сасс покретањем npm install gulp-sass --save-dev. После тога, захтевајте Гулп-сасс у свом гулпфиле.јс.

Ставите var sass = require(‘gulp-sass’);испод црте која вам је требала гутљај.

Структурирање вашег пројекта

Пре него што употребите доње редове, претпостављам и да знате како да структуришете веб апликацију. Овде ћу користити структуру уобичајених веб апликација.

Састављање сасс / сцсс

Последња ствар је да гулпу упутите које датотеке треба претворити и где треба бити одредиште - где ће се излазна датотека чувати.

Користите следеће;

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

Датотека у гулп.срц ће бити конвертована, такође можете да изаберете све .сцсс датотеке у директоријуму помоћу “app/scss/*.scss”. Ово ће одабрати све ваше .сцсс датотеке у фасцикли сцсс.

Гулп.дест је излаз. Излаз ће бити ускладиштен у ЦСС директоријуму унутар директоријума апликације.

Гулп-ватцх-сасс

Гулп има синтаксу сата која му омогућава да надгледа изворне датотеке, а затим да „надгледа“ промене на вашем коду. Само додајте синтаксу у свој гулпфиле.јс тако што ћете откуцати:

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

То је отприлике све што морате учинити! Није било толико стресно, или је било?

Хвала за читање!