SASS

Затем переходим непосредственно к установке gulp в текущий проект

$ npm install gulp --save-dev

Добавив ключ --save-dev мы указали, что теперь сохраняем в ветку dev, так как Gulp это пакет, которым мы будем пользоваться в разработке, но на хостинг выкладывать его не будем, так как на сайте он ничего делать не будет. Вся работа Gulp будет на стороне разработчика.

Подробнее docs.npmjs.com

Посмотрим, как изменился наш файл pacakge.json

vi package.json

{
"name": "heihei",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.4.1",
"normalize.css": "^8.0.1"
},
"devDependencies": {
"gulp": "^4.0.2"
},
"repository": {
"type": "git",
"url": "git+https://github.com/ao/heiheiru.git"
},
"bugs": {
"url": "https://github.com/ao/heiheiru/issues"
},
"homepage": "https://github.com/ao/heiheiru#readme"
}

Появился раздел devDependencies, в который в будущем я добавлю ещё довольно много пакетов.

Если теперь посмотреть содержимое папки node_modules можно увидеть, что установка Gulp добавила не одну папку, как, например, сделал бы jquery а несколько десятков.

Старые версии npm создавали всегда одну папку и размещали все зависимости туда.

Новые версии npm сохраняют зависимости в родительскую папку node_modules.

Gulpfile.js

После установки Gulp нужно в корневой директории проекта (в моём случае - heiheiru) создать файл gulpfile.js в который мы будем записывать инструкции для Gulp.

Первым делом запишем туда

var gulp = require('gulp');

Начиная с верси 4.0 можно пользоваться новым синтаксисом JavaScript (ES2015+)

import gulp from 'gulp'

Но для этого нужно устанавливать babel и следить чтобы не было ошибок. Я видел на форумах жалобы, сам пока не пробовал.

Подробности www.npmjs.com

После того как файл gulpfile.js создан можно запустить Gulp

gulp

Результатом будет похожее сообщение

[11:22:35] Using gulpfile ~\Desktop\Sites\heihei\gulpfile.js
[11:22:35] Task never defined: default
[11:22:35] To list available tasks, try running: gulp --tasks

Gulp жалуется на то, что не определно задание по умолчанию - default task

Нужно его определить

vi gulpfile.js

var gulp = require('gulp');

gulp.task('default', function() {
console.log("Gulp is running!");
});

gulp

default запустится но теперь Gulp пожалуется на непонятное закрытие.

[11:31:44] Using gulpfile ~\Desktop\Sites\heihei\gulpfile.js
[11:31:44] Starting 'default'...
Gulp is running!
[11:31:44] The following tasks did not complete: default
[11:31:44] Did you forget to signal async completion?

Эту ошибку можно устранить несколькими способами. Я пользуюсь следующим:

var gulp = require('gulp');

gulp.task('default', function(done) {
console.log("Gulp is running!");
done();
});

gulp

Примеры использования Gulp

Объединение файлов стилей

Во время разработки сайта удобно иметь небольшие отдельные файлы для каждого блока.

С другой стороны на хостинге лучше иметь один файл style.css, чтобы вебсервер делал меньшее количество обращений к файлам и время загрузки уменьшалось.

Также при разработке удобно пользоваться метаязыками, например, SASS.

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();

gulp.task('default', function(done) {
console.log("Gulp is running!");
done();
});

// compile scss into css

function style() {
// 1. указываем расположение .scss файлов
return gulp.src('./scss/**/*.scss')
// 2. пропускаем их через sass compiller
.pipe(sass())
// 3. указываем CSS файл, в который запишется результат?
.pipe(gulp.dest('./css/style.css'))
}

exports.style = style;

gulp-watch

gulp-watch это название плагина для Gulp, который отслеживает изменение файлов. Начиная с четвёртой версии Gulp gulp-watch включен в основной пакет и не требует отдельной установки.

Начнём с простого - делаем функцию, которая при каждом изменении файла index.html в папке app будет выводить предупреждение.

Как это выглядит в Gulp 4

// подтягиваем gulp , a gulp-watch можно не подтягивать
// - он влючен в Gulp начиная с 4-й версии

const gulp = require('gulp');

// пишем функцию, выводящую в лог предупреждение
function html() {
console.log("Кто-то отредактировал index.html!");
}

// пишем функцию, которая следит за файлом index.html
// можно назвать её просто watch, но в образовательных
// целях я назову её watchFiles
// зачем - будет видно чуть ниже - в exports


function watchFiles() {
gulp.watch("./app/index.html", html);
}

// Чтобы обращаться к нашим функция извне,
// например, из GitBash запишем exports
// Слева запишем названия видимые извне,
// а справа имена наших функций


exports.html = html;
exports.watch = watchFiles;

Чтобы запустить мониторинг пишем

gulp watch

[20:12:19] Using gulpfile ~\Desktop\Sites\heihei\gulpfile.js
[20:12:19] Starting 'watch'...

Теперь вносим изменения в файл index.html и сохраняем

[20:14:28] Starting 'html'...
Кто-то отредактировал index.html!

Как это выглядело в Gulp 3

// подтягиваем gulp и gulp-watch

const gulp = require('gulp')
watch = require('gulp-watch');

gulp.task('html', function() { console.log("Кто-то отредактировал index.html!");
} gulp.task('watch', function() {

watch('./app/index.html', function() {
gulp.start('html');
});
});

Создадим папку /app/styles/ , в которой будут файлы .css для разработки

Напишем функцию, которая будет собирать все файлы .css из этой папки, обрабатывать их с помощью sass и соединять в один файл /css/style.css

Мы уже писали такую функцию выше, просто немного изменим её.

Добавим мониторинг файлов CSS gulp.watch("./app/styles/**/*.css", style);

function style() {
console.log("style is running!");
// 1.
return gulp.src('./app/styles/*.css')
// 2. pass that file through sass compiller
.pipe(sass())
// 3. where do I save the compiled CSS?
.pipe(gulp.dest('./css/style.css'))
}

function watchFiles() {
gulp.watch("./app/index.html", html);
gulp.watch("./app/styles/**/*.css", style);
}

Теперь как только мы отредактируем

Видеоуроки Gulp

Видео много весят, поэтому я выделил для них отдельную страницу - Видеоуроки Gulp

Ошибки

1

Ошибка при установке gulp

$ npm install gulp --save-dev

npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\ao\Desktop\Sites\heihei\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\ao\Desktop\Sites\heihei\package.json'
npm WARN heihei No description
npm WARN heihei No repository field.
npm WARN heihei No README data

npm WARN heihei No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ gulp@4.0.2
added 314 packages from 217 contributors and audited 6490 packages in 30.037s
found 0 vulnerabilities

Скорее всего Вы не инициализировали npm. Нужно выполнить

npm init

Ввести нужные данные (либо просто нажимать Enter), после чего создастся файл package.json и можно будет вернуться к установке gulp

2

events.js:174 throw er; // Unhandled 'error' event
^
CssSyntaxError: postcss-simple-vars: C:\Users\ao\Desktop\Sites\travel-site\app\assets\styles\modules\_large-hero.css:5:2: Undefined variable $aMadeUpVariable2

Может быть вызвана, например, несуществующей переменной. Допустим Вы добавили цвет как переменную, но нигде её не задали.

3

Если Вы запустили Gulp

gulp

И получили что-то похожее

SyntaxError: Unexpected identifier
      at Module._compile (internal/modules/cjs/loader.js:723:23)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
      at Module.load (internal/modules/cjs/loader.js:653:32)
      at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
      at Function.Module._load (internal/modules/cjs/loader.js:585:3)
      at Module.require (internal/modules/cjs/loader.js:692:17)
      at require (internal/modules/cjs/helpers.js:25:18)
      at execute (C:\Users\ao\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:36:18)
      at Liftoff.handleArguments (C:\Users\ao\AppData\Roaming\npm\node_modules\gulp-cli\index.js:201:24)
      at Liftoff.execute (C:\Users\ao\AppData\Roaming\npm\node_modules\gulp-cli\node_modules\liftoff\index.js:201:12)

Скорее всего Вы пытаетесь использовать синтаксис ES2015+ и не установили babel или он работает но с ошибкой.

Здесь два выхода - разобраться и настроить либо перейти к старому синтаксису с require

Did you forget to signal async completion?

Эту ошибку можно устранить несколькими способами. Я пользуюсь следующим:

var gulp = require('gulp');

gulp.task('default', function(done) {
console.log("Gulp is running!");
done();
});

Article author: Andrei Olegovich

Похожие статьи

	IT
	SASS