Dest gulp: Как сделать так, чтобы gulp.dest() писал в ту же директорию, где был обработанный файл?

dest() | gulp.js

Создает поток для записи объектов Винил в файловую систему.

Применение#

Подпись#

Параметры#

Возвращается#

Поток, который можно использовать в середине или в конце конвейера для создания файлов в файловой системе. Всякий раз, когда объект Vinyl проходит через поток, он записывает содержимое и другие детали в файловую систему в данном каталоге. Если объект Vinyl имеет свойство symlink, символическая ссылка будет создана вместо записи содержимого. После создания файла его метаданные будут обновлены для соответствия объекту Vinyl.

Каждый раз, когда файл создается в файловой системе, объект Vinyl будет изменен.

• Свойства cwd, base и path будут обновлены, чтобы соответствовать созданному файлу.
• Свойство stat будет обновлено, чтобы соответствовать файлу в файловой системе.
• Если свойство contents является потоком, оно будет сброшено, чтобы его можно было прочитать снова.

Ошибки#

Когда directory является пустой строкой, выдает ошибку с сообщением: «Invalid dest() folder argument. Please specify a non-empty string or a function.»

Когда directory не является строкой или функцией, выдает ошибку с сообщением: «Invalid dest() folder argument. Please specify a non-empty string or a function.»

Когда directory — это функция, которая возвращает пустую строку или undefined, выдает ошибку с сообщением: «Invalid output folder».

Опции#

Для параметров, которые принимают функцию, переданная функция будет вызываться с каждым объектом Vinyl и должна возвращать значение другого перечисленного типа.

наименование	тип	по умолчанию	примечание
cwd	string function	process.cwd()	Каталог, который будет объединен с любым относительным путем, чтобы сформировать абсолютный путь. Игнорируется для абсолютных путей. Используйте, чтобы избежать объединения directory с path.join().
mode	number function	stat.mode объекта Vinyl	Режим, используемый при создании файлов. Если не установлен и параметр stat.mode отсутствует, вместо него будет использоваться режим процесса.
dirMode	number function		Режим, используемый при создании каталогов. Если не установлен, будет использоваться режим процесса.
overwrite	boolean function	true	Если установлено значение true, существующие файлы перезаписываются с тем же путем.
append	boolean function	false	Если true, добавляет содержимое в конец файла вместо замены существующего содержимого.
sourcemaps	boolean string function	false	Если true, записывает встроенные исходные карты в выходной файл. Указание строкового пути string приведет к записи внешних sourcemaps по заданному пути.
relativeSymlinks	boolean function	false	Если установлено значение false, любые созданные символические ссылки будут абсолютными. Примечание: Игнорируется, если создается соединение, поскольку они должны быть абсолютными.
useJunctions	boolean function	true	Этот параметр актуален только в Windows и в других местах игнорируется. Если задано значение true, создает символическую ссылку каталога в виде соединения. Подробно в Символические ссылки в Windows ниже.

Обновления метаданных#

Каждый раз, когда поток dest() создает файл, объекты Vinyl mode, mtime и atime сравниваются с созданным файлом. Если они отличаются, созданный файл будет обновлен, чтобы отразить метаданные объекта Vinyl. Если эти свойства совпадают или gulp не имеет разрешений на внесение изменений, попытка автоматически пропускается.

Эта функция отключена в Windows или других операционных системах, которые не поддерживают методы Node process.getuid() или process.geteuid(). Это происходит из-за того, что Windows дает неожиданные результаты при использовании fs. fchmod() и fs.futimes().

Примечание: Метод fs.futimes() внутренне конвертирует временные метки mtime и atime в секунды. Это деление на 1000 может вызвать некоторую потерю точности в 32-битных операционных системах.

Исходные карты#

Поддержка Sourcemap встроена непосредственно в src() и dest(), но по умолчанию отключена. Включите его для создания встроенных или внешних исходных карт.

Встроенные исходные карты:

Внешние исходные карты:

Символические ссылки в Windows#

При создании символьных ссылок в Windows, аргумент type передается методу Node fs.symlink(), который указывает тип связываемой цели. Тип ссылки установлен на:

• 'file', когда целью является обычный файл
• 'junction', когда целью является каталог
• 'dir', когда целью является каталог и пользователь отключает параметр useJunctions

Если вы попытаетесь создать висящую (указывающую на несуществующую цель) ссылку, тип ссылки не может быть определен автоматически. В этих случаях поведение будет варьироваться в зависимости от того, создается ли висячая ссылка через symlink() или через dest().

Для висящих ссылок, созданных с помощью symlink(), входящий объект Vinyl представляет цель, поэтому его статистика будет определять желаемый тип ссылки. Если isDirectory() возвращает false, создается ссылка на 'file', в противном случае создается ссылка 'junction' или 'dir' в зависимости от значения параметра useJunctions.

Для висящих ссылок, созданных с помощью dest(), входящий объект Vinyl представляет ссылку — обычно загружается с диска через src(..., { resolveSymlinks: false }). В этом случае тип ссылки не может быть обоснованно определен и по умолчанию используется 'file'. Это может вызвать непредвиденное поведение, если вы создаете висящую ссылку на каталог. Избегайте этого сценария.

пункт назначения() | gulp.js

Создает поток для записи объектов Vinyl в файловую систему.

Использование#

Подпись#

Параметры#

Возвращает#

Поток, который можно использовать в середине или в конце конвейера для создания файлов в файловой системе. Всякий раз, когда объект Vinyl передается через поток, он записывает содержимое и другие данные в файловую систему в указанном каталоге.

Всякий раз, когда в файловой системе создается файл, объект Vinyl будет изменен.

• Свойства cwd , base и path будут обновлены в соответствии с созданным файлом.
• Свойство stat будет обновлено в соответствии с файлом в файловой системе.
• Если свойство содержимого является потоком, оно будет сброшено, чтобы его можно было прочитать снова.

Ошибки#

Когда каталог — пустая строка, выдает ошибку с сообщением «Неверный аргумент папки dest(). Пожалуйста, укажите непустую строку или функцию».

Когда каталог не является строкой или функцией, выдается ошибка с сообщением «Неверный аргумент папки dest(). Пожалуйста, укажите непустую строку или функцию».

Когда каталог является функцией, которая возвращает пустую строку или undefined , выдает ошибку с сообщением «Недопустимая выходная папка».

Options#

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

имя	тип	по умолчанию	примечание
cwd	функция 031 process.cwd()	Каталог, который будет объединен с любым относительным путем к образуют абсолютный путь. Игнорируется для абсолютных путей. Используйте, чтобы избежать объединения каталог с path.join() .
режим	номер функция	стат.режим объекта Vinyl	Режим, используемый при создании файлов. Если не установлено и stat.mode отсутствует, вместо этого будет использоваться режим процесса.
dirMode	номер функция		Режим, используемый при создании каталогов. Если не установлено, будет использоваться режим процесса.
перезаписать	логическое значение функция	true	При значении true перезаписывает существующие файлы с тем же путем.
append	boolean function	false	Если true, содержимое добавляется в конец файла, а не заменяется существующим.
исходные карты	логическое значение строка функция	ложь	Если true, встроенные исходные карты записываются в выходной файл. Указание строка путь будет записывать внешние исходные карты по указанному пути.
relativeSymlinks	boolean function	false	При значении false любые созданные символические ссылки будут абсолютными. Примечание : Игнорируется, если создается соединение, поскольку они должны быть абсолютными.
useJunctions	boolean function	true	Этот параметр применим только в Windows и игнорируется в других местах. При значении true создает символическую ссылку каталога как соединение. Подробнее см. Символические ссылки в Windows ниже.

Обновление метаданных#

Всякий раз, когда поток dest() создает файл, режим объекта Vinyl , mtime и atime сравнивается с созданным файлом. Если они отличаются, созданный файл будет обновлен, чтобы отразить метаданные объекта Vinyl. Если эти свойства совпадают или у gulp нет прав на внесение изменений, попытка автоматически пропускается.

Эта функция отключена в Windows или других операционных системах, которые не поддерживают Node process.getuid() или process.geteuid() методов. Это связано с тем, что Windows дает неожиданные результаты из-за использования fs.fchmod() и fs.futimes() .

Примечание : метод fs.futimes() внутренне преобразует временные метки mtime и atime в секунды. Это деление на 1000 может привести к некоторой потере точности в 32-разрядных операционных системах.

Sourcemaps#

Поддержка Sourcemap встроена непосредственно в src() и dest() , но по умолчанию он отключен. Включите его для создания встроенных или внешних исходных карт.

Встроенные исходные карты:

Внешние исходные карты:

Символические ссылки в Windows #

При создании символических ссылок в Windows аргумент типа передается в метод узла fs. symlink() , который указывает тип цели. связаны. Тип ссылки установлен на:

• 'файл' , когда целью является обычный файл
• 'junction' , когда целью является каталог
• 'dir' , когда целью является каталог и пользователь отключает опцию useJunctions

-существующая цель) ссылка, тип ссылки не может быть определен автоматически. В этих случаях поведение будет различаться в зависимости от того, создается ли висячая ссылка через symlink() или через dest() .

Для оборванных ссылок, созданных через symlink() , входящий объект Vinyl представляет цель, поэтому его статистика будет определять желаемый тип ссылки. Если isDirectory() возвращает false, то создается ссылка 'file' , в противном случае создается ссылка 'junction' или 'dir' в зависимости от значения параметра useJunctions .

Для висячих ссылок, созданных с помощью dest() , входящий объект Vinyl представляет ссылку - обычно загружается с диска через src(..., {resolveSymlinks: false}) . В этом случае тип ссылки не может быть обоснованно определен и по умолчанию используется 'file' . Это может привести к неожиданному поведению, если вы создаете висячую ссылку на каталог. Избегайте этого сценария.

Использование Gulp с Dart Sass

 npm установить глоток --save-dev 

 - проект
  |- gulpfile.js 903:30
 
 Нам потребуется  gulp  в этом gulpfile. Я деструктурирую  src  и  dest 
  одновременно, так как мы будем использовать их позже. 

 
 const {источник, пункт назначения} = требуется ('глоток') 
 Далее давайте создадим функцию  css  для преобразования Sass в CSS. Убедитесь, что вы изменили значения  src  и  dest , чтобы они соответствовали соответствующим папкам в вашем проекте.
 функция css () {
  // ...
  вернуть исходный код ('src/scss/**/*.{scss,sass}')
    .pipe(назначение('расстояние/css'))
} 903:30
 
 Gulp зарегистрирует команду  css , если вы экспортируете этот  css  из Gulpfile. 
 
 экспорт.css = css 
 Вы сможете запустить  gulp css , если на вашем компьютере глобально установлен Gulp. В противном случае вы можете запустить  npx gulp css .
 глоток css 
  
 Преобразование Sass в CSS с помощью Dart Sass 
 Нам нужны две вещи, чтобы использовать Dart Sass с Gulp:
 Плагин  gulp-sass 
 Компилятор Dart Sass
 Мы можем установить их обоих следующим образом:
 npm установить gulp-sass sass --save-dev 
 Нам потребуются оба  gulp-sass  и  sass  в Gulpfile.
  gulp-sass  по умолчанию использует Libsass. Мы можем изменить его на Dart Sass, изменив свойство  компилятора .
 const sass = требуется ('глоток-дерзость')
sass.compiler = требуется ('sass') 
 Теперь мы можем преобразовать Sass в CSS.
 функция css () {
  вернуть исходный код ('src/scss/**/*.{scss,sass}')
    .pipe(sass().on('ошибка', sass.logError))
    .pipe(назначение('расстояние/css'))
} 
 Часть  sass. logError  важна, потому что она позволяет передавать любые ошибки в терминал. Без этого вы не сможете смотреть файлы Sass на наличие изменений — любые ошибки остановят просмотр файлов. (Подробнее о просмотре файлов позже).
 
 Включая специальные пути 
 Если вы загрузили какие-либо пакеты с помощью npm, вы можете включить их в  gulp-sass , чтобы вы могли написать меньше кода для импорта файла.  includePath  принимает массив. Не стесняйтесь включать любые дополнительные пути, если вам нужно!
 функция css () {
  вернуть исходный код ('src/scss/**/*.{scss,sass}')
    .трубка(
      sass({includePaths: ['./node_modules']})
        .on('ошибка', sass.logError)
    )
    .pipe(назначение('расстояние/css'))
} 
 // Без includePaths
@use '../../node_modules/package'
// С включенными путями
@use 'пакет' 
 Увеличение скорости компиляции 
 Synchronous Dart Sass в два раза быстрее, чем асинхронный Dart Sass. К сожалению для нас, Gulp работает асинхронно.
  Но важно, чтобы Gulp был асинхронным, чтобы мы могли обрабатывать несколько задач одновременно.
 Некоторое время назад я написал книгу об автоматизации вашего рабочего процесса с помощью Gulp. Содержимое устарело (написано для Gulp v3, но сейчас мы работаем с Gulp v4). 
 Несмотря на то, что содержание устарело, оно должно дать вам хорошее представление о том, как работает рабочий процесс разработчика и как его настроить. Посмотрите, если вам интересно!
 Чтобы повысить скорость компиляции Dart Sass, мы можем использовать пакет под названием  fibers  .
 npm установить волокна --save-dev 
 const Fiber = требуется ('волокна')
функция css () {
  вернуть исходный код ('src/scss/**/*.{scss,sass}')
    .трубка(
      дерзкий({
        includePaths: ['./node_modules'],
        волокно: волокно
      })
        .on('ошибка', sass.logError)
    )
    .pipe(назначение('расстояние/css'))
} 
 
 
 Я понятия не имею, что делает  волокон  в этот момент. Я еще не разобрался. Я просто добавляю его, потому что официальные документы рекомендуют его. ¯_(ツ)_/¯
 Хотя Dart Sass в 1,5 раза медленнее Libsass, производительность практически не снижается, если только вы не работаете с огромной кодовой базой. Так что смело переключайтесь!
 Вы можете добавить плагины PostCSS, такие как autoprefixer, также потребовав их в gulpfile. Вот как включить автопрефиксер.
 npm установить автопрефиксер gulp-postcss --save-dev 
 константа postcss = требуется ('gulp-postcss')
const autoprefixer = require('autoprefixer')
функция css () {
  вернуть исходный код ('src/scss/**/*.{scss,sass}')
    .pipe(sass(/* ... */).on(/* ... */))
    .pipe(postcss([autoprefixer()]))
    .pipe(назначение('расстояние/css'))
} 903:30
 
 Вы также можете включить исходные карты. 
  
 npm установить gulp-sourcemaps --save-dev 
 функция css () {
  вернуть исходный код ('src/scss/**/*.{scss,sass}')
    .pipe(исходные карты.init())
    . pipe(sass(/* ... */).on(/* ... */))
    .pipe(postcss(/* ... */))
    .pipe(sourcemaps.write())
    .pipe(назначение('расстояние/css'))
} 
 Просмотр файлов Sass на наличие изменений 
 При изменении файла Sass мы хотим скомпилировать новый Sass в CSS. Мы можем сделать это с помощью наблюдателя  9.Функция 0048.
 наблюдатель функций (cb) {
  
} 
 В наблюдателе   нам нужно использовать  gulp.watch  .  gulp.watch  позволяет нам просматривать файлы и выполнять задачи gulp при изменении файлов. Он принимает три аргумента
 Файлы для просмотра
 Задачи Gulp для выполнения при изменении файлов
 Обратный вызов, сообщающий Gulp о завершении выполнения
 
 Вот как мы можем отслеживать изменения в наших файлах sass и компилировать их в CSS при сохранении файла.
 
 const {источник, пункт назначения, просмотр} = глоток
функция-наблюдатель (cb) {
 смотреть('src/scss/**/*.