Gulp changed как работает

Обновлено: 30.06.2024

Sass (Syntactically Awesome Stylesheets) - это один из самых развитых, стабильных и многофункциональных препроцессоров. Пользуется большой популярностью у разработчиков. Sass - это более продвинутая версия CSS, которая имеет гораздо бо́льший набор возможностей, а также Sass предназначен для упрощения каскадных таблиц стилей.

Синтаксис Sass имеет 2 вида: SASS и SCSS . SCSS - более похож на CSS, а SASS - отличается отсутствием фигурных скобок. Вложенные элементы реализованы за счёт отступов. Именно такой синтаксис мы будем здесь использовать.

Зачем нужен Sass

Чтобы понять, зачем нужен Sass, перечислим его некоторые возможности:

1. Sass позволяет вкладывать правила CSS друг в друга.
2. Вложенность свойств.
3. Использование переменных.
4. Поддержка арифметических операций.
5. Операции с цветами.
6. Возможность импортировать в sass файл sass, scss и css файлы.
7. Использование миксинов.
8. И многое другое.

Если коротко зачем нужен Sass: он ускоряет и упрощает процесс разработки.

Как использовать Sass

Существуют разные способы начать использовать Sass:

1. C помощью приложений (Koala, CodeKit, Compass и другие).
2. C помощью командной строки.
3. Используя таск-менеджеры.
4. Простым конвертированием Sass в CSS с помощью онлайн-сервисов.

Рассмотрим использование Sass для таск-менеджера Gulp. Перед тем как начать установку, желательно ознакомиться с основами Gulp.

Установка и настройка gulp-autoprefixer

Для установки gulp-autoprefixer выполним команду:

И добавим в задачу sass добавление префикса.

Теперь при запуске задачи sass у на с будет:

1. Компилирование sass в css
2. Добавление префиксов
3. Сохранение файла в src/css

Следующий пакет объединяет все css файлы в один.

Вывод.

Мы с вами рассмотрели для чего нужен gulp, как его установить. Установили дополнительные пакеты, которые необходимы для верстки и задали задачи.

Usage

changed(destination, options?)

destination

Type: string | Function

Destination directory. Same as you put into gulp.dest() .

This is needed to be able to compare the current files with the destination files.

Can also be a function returning a destination directory path.

options

Type: string
Default: process.cwd()

Working directory the folder is relative to.

extension

Extension of the destination files.

Useful if it differs from the original, like in the example below:

hasChanged

Function that determines whether the source file is different from the destination file.

Built-in comparators

Example

You can also supply a custom comparator function which will receive the following arguments and should return Promise .

• stream (transform object stream) - Should be used to queue sourceFile if it passes some comparison
• sourceFile (Vinyl file object)
• destPath (string) - Destination for sourceFile as an absolute path

transformPath

Function to transform the path to the destination file. Should return the absolute path to the (renamed) destination file.

Useful if you rename your file later on, like in the below example:

Install

In-place change monitoring

If you're looking to process source files in-place without any build output (formatting, linting, etc), have a look at gulp-changed-in-place.

Установка и настройка пакета для минимизации CSS файлов – clean-css

Для установки clean-css выполним следующую команду:

Теперь давайте создадим задачу mincss, которая будет добавлять к имени файла суффикс «.min», минимизировать css файл и сохранять в app/css

Отлично, давайте установим gulp пакет, который будет минимизировать js файлы.

Для установки gulp-uglify выполним следующую команду:

Теперь создадим задачу, которая будет добавлять к файлу суффикс «.min», минимизировать файл js и сохранять в app/js

Мы создали основные задачи. Но две последние должны выполняться при выкладывании проекта в продакшен. И выполняться должны вместе. Давайте создадим задачу, которая будет выполнять задачу mincss, а потом minjs

gulp-changed

No more wasting precious time on processing unchanged files.

By default it's only able to detect whether files in the stream changed. If you require something more advanced like knowing if imports/dependencies changed, create a custom comparator, or use another plugin.

Задание задачи по умолчанию gulp

Gulp changed как работает

A Gulp plugin for passing through only those source files that are newer than corresponding destination files.

Using newer with 1:1 source:dest mappings

The default task in the example below sets up a watch that minifies images on changes. Piping the source files to newer before imagemin ensures that only those images that have changed are minified. The newer plugin is configured with the directory path for minified images.

Using newer with many:1 source:dest mappings

Plugins like gulp-concat take many source files and generate a single destination file. In this case, the newer stream will pass through all source files if any one of them is newer than the destination file. The newer plugin is configured with the destination file path.

• dest - string Path to destination directory or file.

• options.dest - string As above, required.
• options.ext - string Source files will be matched to destination files with the provided extension (e.g. '.css').
• options.map - function Map relative source paths to relative destination paths (e.g. function(relativePath) < return relativePath + '.bak'; >)
• options.extra - string or array An extra file, file glob, or list of extra files and/or globs, to check for updated time stamp(s). If any of these files are newer than the destination files, then all source files will be passed into the stream.

Create a transform stream that passes through files whose modification time is more recent than the corresponding destination file's modification time.

If dest is a directory path, the newer stream will check for files in the destination directory with the same relative path as source files. Source files that have been modified more recently than the resolved destination file will be passed through. If the dest directory or resolved destination file does not exist, all source files will be passed through.

If dest is a file path, the newer stream will pass through all files if any one of them has been modified more recently than the destination file. If the dest file does not exist, all source files will be passed through.

Возможности Sass

Их огромное количество, рассмотрим лишь самые популярные. С полным списком можно ознакомиться на официальном сайте.

Ссылка на родительский селектор &.

Арифметические операции с числами.

Арифметические операции с цветами.

Использование функций в sass официальный сайт.

Импорт .sass, .scss и .css файлов.

Статьи про Gulp

1. Знакомство с Gulp (1 часть).
2. Использование SASS в Gulp проекте (2 часть - текущая). в Gulp при изменении кода (3 часть). для Gulp (4 часть).
3. Моментальная загрузка сайта на хостинг и синхронизация файлов - gulp-rsync (5 часть).

English	Russian
Awesome Stylesheets	Удивительные стили
Gulp	Глоток
Dependencies	Зависимости
Task	Задача
Return	Возврат
Destination	Пункт назначения
Import	Импортировать
Include	Включать

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Создание задачи в gulp

Создадим задачу min, которая будет запускать задачи mincss и minjs

Все. Давайте еще зададим задачу по умолчанию.

Browsersync, пакет который позволяет при изменении файлов обновлять страницу автоматически

Для установки в консоли выполняем следующую команду:

Теперь давайте создадим задачу, которая будет запускать browser-sync и отслеживать изменения файлов.

Задача называется serve. И browser-sync будет обновлять страницу браузера автоматически, если изменились файлы с расширением css (которые расположены в папке src/css) и с расширением html (которые расположены в папке src).

Для запуска данной задачи выполняем команду

Для верстки я использую sass. Поэтому для компиляции из sass в css я использую пакет gulp-sass.

Установка, подключение и настройка gulp-sass

Для установки плагина gulp-sass в наш проект, откроем командную строку в папке проекта. Введём следующую команду:

Плагин будет установлен в папку node_modules и будет добавлена соответствующая запись в файле package.json . После успешной установки нам нужно подключить наш пакет в файле gulpfile.js .

Теперь создадим задачу (таск) sass .

В скобках sass(<>) можно задавать дополнительные настройки.

• expanded - полностью развёрнутый CSS;
• nested - показывает вложенность (по умолчанию);
• compact - каждый селектор на новой строке;
• compressed - всё в одну строку.

Выполним наш созданный таск (задачу) gulp-sass . В командной строке введём gulp sass.

Gulp автоматически преобразовал SASS в CSS и создал файл styles.css .

Gulp Sourcemaps

Добавим поддержку source maps для Gulp. Это специальная структура данных, которая при преобразовании данных отражает что было и что стало, эта информация записывается либо в итоговом файле с расширением .map , либо в внутри исходника.

Таким образом, во время разработки, мы можем смотреть исходный файл sass , а не скомпилированный css . Становится понятным откуда какая строка кода берется.

Установка плагина gulp-sourcemaps.

Добавим gulp-sourcemaps в gulpfile.js .

Для создания sourcemaps в текущей папке отдельным файлом, используем параметр «точка» write('.') , которая означает текущий каталог.

Если необходимо записать sourcemaps внутрь файла в виде base64, то write используется без параметров - write() .

Установка и настройка gulp-sass

Для установки gulp-sass в консоли выполняем команду:

Теперь создадим задачу sass, которая будет компилировать sass в css. И изменим задачу serve, чтобы наш browser-sync отслеживал вместо css файлы sass.

Теперь при запуске задачи serve, будет запускаться задача sass.

Отлично. Дальше установим и подключим пакет gulp-autoprefixer, который будет добавлять к css стилям префиксы (для старых браузеров).

Установка и настройка contactCss

Для установки contactCss используем следующую команду:

И добавим выполнение данного пакета в задачу sass. (Будем все файлы css объединять в style.css)

Отлично. Теперь добавим пакет, который переименовывает файлы. (Он нам понадобится, кода мы будем минимизировать css, и js файлы)

Настройка GULP для верстальщика

Доброго времени суток. В данной статье мы поговорим о настройках Gulp для верстальщика. Я на своем примере покажу как установить и настроить Gulp для проекта, какими пакетами я пользуюсь для автоматизации. Как настроить задачи в Gulp и как объединить выполнения нескольких задач в одну.

Gulp notify

На данный момент, обработку ошибок в sass-файле мы ловим в следующей строке.

Данный способ отображает ошибки в sass только в терминале (консоли). Чтобы при совершении ошибки мы были опративно уведомлены, установим плагин gulp-notify .

Это позволит получать следующие уведомления на рабочем столе.

Как видите это очень удобно. Сразу видно в каком файле и на какой строке была совершена ошибка.

Замените .on('error', sass.logError)) следующим кодом.

Теперь вы будете получать уведомления об ошибках на рабочем столе.

Установка и настройка gulp-rename

Для установки gulp-rename выполним следующую команду:

Пока данный пакет не будем добавлять ни в какие задачи.

Что такое Gulp?

Gulp – это менеджер задач для автоматического выполнения их. Gulp написан на языке программирования JavaScript. Для запуска задач используется командная строка. Для конфигурации используется файл gulpfile.js. Распространяется через менеджер пакетов npm.

Установка Gulp для проекта.

Для установки gulp у нас должен быть установлен npm. Что такое npm и для чего он нужен очень хорошо описано в статье «npm для простых смертных» .

Открываем терминал и переходим в папку с проектом. Первое, что нам необходимо сделать это инициализировать npm для этого выполняем команду:

От вас потребуется:

• Указать название проекта
• Версию проекта
• Описание проекта
• Точку входа
• Команду
• Git репазиторий
• Ключевые слова
• Имя автора
• Лицензия

Все можно оставить по умолчанию (если вы не хотите выкладывать проект в общий доступ)

Затем подтверждаем введенную информацию.

Отлично. NPM инициализировали. Теперь в корне появился файл packages.json – файл конфигурации менеджера пакетов.

Теперь мы можем установить gulp. Вначале надо установить его глобально, а затем для проекта. Для глобальной установки выполните следующую команду:

Теперь установим gulp для проекта:

Все gulp для проекта установлен.

Давайте проверим. Создадим файл gulpfile.js и создадим в нем одну задачу test, которая будет выводить в консоль «Я работаю».

Первое мы подключаем gulp, и второе мы вызываем функцию task у gulp, которая принимает два параметра:

• Название задачи
• Анонимная функция в которой описывается наша задача

Теперь в консоли выполните следующую команду

Теперь давайте установим и подключим пакеты, которые помогают при верстке.

Читайте также:

  
• Как скопировать военную базу в clash of clans
  
• Как называется плагин на телепортацию к игроку в майнкрафт
  
• Сколько стоит фнаф на пс 4
  
• Deus ex mankind divided как победить марченко
  
• Как вступить в русскую банду в гта 5 онлайн