Зараз я стажуюсь у технічній фірмі і кілька днів тому отримав від шефа запитання щодо написання статті. Тож я вирішив написати щось на Gulp-sass.
Налаштування може часом викликати розчарування, особливо коли ви новачок у цьому. Я використовую Windows, і пошук статті, яка б вирішила мою проблему, був схожий на те, щоб примусити Джека по-чорному писати «зменшення».
Добре, я думаю, я трохи захопився там ... досить про мене, давайте почнемо!
PS Це моя перша опублікована стаття, і я сподіваюся, вам сподобалась. :)
Встановлення вузла
Спочатку відкрийте командний рядок та встановіть node.js на свій комп’ютер. Він поставляється з менеджером пакетів вузлів (npm), який ви можете використовувати для встановлення Gulp. Після встановлення ви можете встановити Gulp, запустивши npm install gulp -g. У -gінструктує НПЙ встановити Gulp глобально на вашому комп'ютері (це означає , що ви можете використовувати команди глотка в будь-якому місці на вашому комп'ютері.)
Перш ніж продовжити, я припускаю, що ви знайомі з командним рядком!
Перейдіть до каталогу проекту та запустіть npm init. Це створить файл package.json, натисніть клавішу Enter, і він додасть те, що вам потрібно
файл package.json.
Так, можливо, вам цікаво, який файл package.json правильний?
Файл package.json містить різні метадані, що стосуються вашого проекту. Цей файл надає інформаціюнмі дозволяє йому ідентифікувати проект, а також обробляти залежності проекту. Це також полегшує встановлення всіх завдань, які використовуються в проекті Gulp.
Якщо ви все ще не розумієте, вам, мабуть, потрібна Діана, щоб пояснити це краще - у чому моя проблема / одержимість чорношкірими ??
Після запуску npm-initвведіть npm install gulp --save-dev, це вказує npm встановити Gulp у ваш проект. За допомогою--save-dev ми зберігаємо Gulp як залежність від розробника в package.json.
Створення файлу Gulp
Тепер, коли ви встановили Gulp, ви готові встановити перше завдання. Треба requireковтати. Створіть новий файл під назвою gulpfile.js у своєму каталозі проекту - це можна зробити за допомогою будь-якого текстового редактора. Почніть з додавання коду нижче до вашого gulpfile.
‘use strict’;var gulp = require(‘gulp’);Налаштування завдання
Тепер ви можете встановити gulp-завдання - в цьому випадку ми встановили Gulp-sass. Це завдання дозволяє перетворити Sass на CSS . Все ще використовуючи командний рядок, ви можете встановити Gulp-sass, запустивши npm install gulp-sass --save-dev. Після цього вимагайте Gulp-sass у своєму gulpfile.js.
Поставте var sass = require(‘gulp-sass’);під лінію потрібну вам глотку.
Структурування вашого проекту
Перш ніж використовувати рядки нижче, я також припускаю, що ви знаєте, як структурувати веб-програму. Тут я буду використовувати структуру загальних веб-програм.
Компіляція sass / scss
Останнє, що потрібно, - це проінструктувати gulp, які файли йому потрібно перетворити, і де має бути пункт призначення - де буде зберігатися вихідний файл.
Використовуйте наступне;
//compile gulp.task(‘sass’, function () { gulp.src(‘app/scss/app.scss’) .pipe(sass().on(‘error’, sass.logError)) .pipe(gulp.dest(‘app/css’)); });Файл у gulp.src буде перетворений, ви також можете вибрати всі файли .scss у каталозі за допомогою “app/scss/*.scss”. Буде вибрано всі ваші файли .scss у папці scss.
Gulp.dest є виходом. Вихідні дані будуть зберігатися в папці CSS всередині папки програми.
Gulp-watch-sass
Gulp має синтаксис годинника, що дозволяє йому контролювати вихідні файли, а потім "стежити" за змінами, внесеними до вашого коду. Просто додайте синтаксис до вашого gulpfile.js, набравши:
//compile and watch gulp.task(‘sass:watch’, function() { gulp.watch(‘app/scss/app.scss’, [‘sass’]);});Це майже все, що вам потрібно зробити! Це було не так напружено, чи не так?
Дякуємо за читання!