Перший крок до використання Gulp — додати require у файл gulpfile.
<code data-language="javascript">var gulp=require('gulp');Оператор require вказує Node шукати в папці node_modules пакет із ім'ям gulp. Як тільки пакет знайдено, ми привласнюємо його вміст змінної gulp.
Тепер ми можемо почати писати Gulp-завдання з цією змінною gulp. Основний синтаксис завдання:
<code data-language="javascript">gulp.task('task-name', function() { //Начинка тут });task-name вказує на ім'я завдання, яке буде використовуватися щоразу, коли ви хочете запустити завдання в Gulp. Ви також можете виконати це завдання через командний рядок, написавши gulp task-name.Щоб перевірити це, давайте створимо завдання hello з написом Hello Zell!.
<code data-language="javascript">gulp.task('hello', function() { console.log('Hello Zell!'); }) ;Ми можемо виконати це завдання, набравши gulp hello у командному рядку.
$ gulp hello
Командна рядок поверне повідомлення з написом «Hello Zell!».
Ось як може виглядати реальне завдання:
<code data-language="javascript">gulp.task('task-name', function () { return gulp.src('source-files') //Отримуємо вихідний файл через gulp.src .pipe(aGulpPlugin()) //Посилаємо його через плагін Gulp .pipe(gulp.dest('destination) ')) //Виводимо файл у папку призначення })Як бачите, реальне завдання вимагає два додаткові методи Gulp — gulp.src та gulp. dest.
gulp.src повідомляє Gulp-задачі, які файли використовувати для цього завдання, а gulp.dest вказує Gulp, куди виводити файли після завершення завдання.Давайте спробуємо зробити реальне завдання, в якому будемо компілювати Sass-файли в CSS-файли.