Gulp для ускорения разработки

Введение

Gulp — это таск-менеджер для автоматического выполнения часто используемых задач
(например, минификации, тестирования, объединения файлов), написанный на
языке программирования JavaScript.

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

Создан как ответвление от проекта Grunt, чтоб взять из него лучшие практики.
Распространяется через менеджер пакетов

NPM

под MIT лицензией.

Если Вы будете копировать код с этой страницы — имейте в виду, что я ставлю кое-где лишние
проблелы — исключительно для того, чтобы текст лучше помещался на экран. Смело удаляйте их.

Это основная статья об использовании Gulp.
В данный момент Вы можете помимо этой прочитать также статьи:

	Как скопировать папку с помощью Gulp
	Объединить и сжать несколько css файлов в один
	Как отправить файлы по ftp с помощью Gulp
	Gulp series
	Обработка только изменённых файлов с помощью gulp.watch().on(‘change’)

Шаг 3: Настройте проект

Примечание: пропустите этот шаг, если у вас уже есть файл конфигурации package.json.

Предположим что, у вас есть новый проект в папке project1. Перейдите в каталог и инициализируйте его с помощью npm:

cd project1
npm init

Затем нажмите «Return», чтобы принять значения по умолчанию. Файл package.json, в котором хранятся параметры конфигурации npm, будет создан автоматически.

Примечание: Node.js устанавливает модули в папку node_modules. Нужно добавить их в свой файл .gitignore, чтобы убедиться, что они не попадут в репозиторий. При развертывании проекта в другой системе можно будет запустить npm install, чтобы их восстановить.

Предполагается, что ваш проект содержит папки, перечисленные ниже.

Папка src: предварительно обработанные исходники

Содержит следующие подкаталоги:

• html ‒ исходные файлы и шаблоны HTML;
• images ‒ оригинальные несжатые изображения;
• js – предварительно обработанные файлы скриптов;
• css – предварительно обработанные файлы Sass (.scss)

Папка build: скомпилированные/обработанные файлы

Когда понадобится, Gulp создаст файлы и подпапки:

• html ‒ скомпилированные статические файлы HTML;
• images ‒ сжатые изображения;
• js ‒ единственный объединенный и минифицированный файл JavaScript;
• css – единственный скомпилированный и минифицированный файл CSS.

Примечание: Если вы работаете в Unix-системе, то можете воссоздать структуру исходных папок с помощью следующей команды:

mkdir -p src/{html,images,js,scss}

gulp.src()

Функция gulp.src() берёт один или несколько файлов или массив и возвращает поток, который может быть передан в плагины.

Gulp использует node-glob для получения указанных файлов. Проще всего объяснить на примерах:

• js/app.js

  Соответствует определённому файлу.

• js/*.js

  Соответствует всем файлам, заканчивающихся на .js в папке js.

• js/**/*.js

  Соответствует всем файлам с расширением .js в папке js и всех вложенных папках.

• !js/app.js

  Исключает js/app.js из соответствия, что полезно если вы желаете выбрать все файлы в папке за исключением определённого файла.

• *.+(js|css)
  Соответствует всем файлам, заканчивающихся на .js или .css.

Другие функции также доступны, но в Gulp они обычно не применяются. Посмотрите документацию Minimatch ради подробностей.

Предположим, у нас есть папка с именем js, содержащая файлы JavaScript, некоторые минимизированы, а некоторые нет. Мы хотим создать задачу по минимизации ещё не уменьшенных файлов. Чтобы сделать это, мы выбираем все файлы JavaScript в папке, за исключением всех файлов, оканчивающиеся на .min.js:

Gulpfile.js

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

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

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

gulp

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

Using gulpfile ~\Desktop\Sites\heihei\gulpfile.js
Task never defined: default
To list available tasks, try running: gulp —tasks

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

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

vi gulpfile.js

gulp

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

Using gulpfile ~\Desktop\Sites\heihei\gulpfile.js
Starting ‘default’…
Gulp is running!
The following tasks did not complete: default
Did you forget to signal async completion?

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

gulp

Установка Gulp

Установку Gulp я буду показывать на примере ОС Windows 10 x64 последней сборки, так как я работаю именно в данной системе.

Первым делом нам необходимо установить node.js. Данный пакет превращает клиентский язык javaScript в серверный. Для тех, кто не знает язык javaScript интерпретирует браузер пользователя. Кстати, Gulp создан на языке javaScript и если вы знакомы с данным языком, то освоить его вам будет намного легче.

Для установки node.js необходимо скачать инсталлятор с официального сайта. Качаем последнюю стабильную версию. Пакет устанавливается как обычная программа и ничего сложного в этом нет.

После установки node.js можно проверить правильно ли все установилось. Открываем консольное окно (командная строка) — в ОС Windows это комбинация клавиш . Вводим команду:

Если все правильно установили в ответ вы увидите версию установленного пакета.

Все, можно приступать к установке Gulp. 

Пишем команду для установки Gulp:

Давайте разберем, что значит данная запись:

• npm — говорит о том, что мы запускаем пакет менеджер, который установит Gulp;
• i — это сокращенная запись install, т.е. установить;
• gulp — имя устанавливаемого пакета;
• -g — данный флаг говорит о том, что мы устанавливаем Gulp глобально в систему. Без данного ключа gulp установится в ту папку, из которой запускается команда. Так что имейте это ввиду.

Установка не занимает много времени, примерно 1-2 мин. После завершения работы установщика галп можно проверить корректность установки, также, как и node.js:

Если все правильно, то выдаст версию установленного галп.

Что такое Gulp, чем он хорош и нужен ли он простому верстальщику?

Так что же такое Gulp?

Gulp позволяет решать такие задачи, как:

• использование различных JS, CSS, HTML препроцессоров для ускорения верстки (CoffeeScript, SASS, LESS, Stylus, Pug (Jade) и др.);
• объединение файлов в один — js, css, html;
• минимизация кода файлов — js, css, html;
• создание локального веб-сервера и перезагрузка страницы браузера при сохранении файла проекта (live reaload);
• автоматическая простановка вендорных префиксов в CSS-файле для поддержки стилей устаревшими браузерами;
• работа с изображениями сайта — объединение в спрайты (в том числе и SVG-спрайты), оптимизация (уменьшение веса);
• копирование файлов проекта из одной папки в другую, создавая при это рез. копию;
• создание иконочных шрифтов;
• и многое другое…

Одним словом, круг задач, решаемых с помощью галп достаточно широк и грех всем этим не воспользоваться. Когда я впервые столкнулся с GruntJs мне казалось, что подобные сборки нужны только для крупных и поддерживаемых проектов. А я верстаю небольших макеты и мне это не нужно. Ох как же я ошибался. На самом деле данный инструмент нужен любому веб-разработчику, он здорово экономит время. Представьте, я раньше делал спрайты изображений вручную — это же натуральная рутина. А в Gulp, установив нужный плагин мне достаточно добавить нужное изображение в определенную папку и скрипт сделает все за меня, выдав уже готовый объединенный файл изображений.

Ну что сказать, все в жизни происходит когда-то впервые. Если сказать в целом, Gulp и множество плагинов для него превращает его в мощный инструмент решения задач как маленьких, так и крупных проектов. Теперь давайте разберем более подробнее как его установить и как с ним работать.

Use latest JavaScript version in your gulpfile

Most new versions of node support most features that Babel provides, except the / syntax. When only that syntax is desired, rename to , install the module, and skip the Babel portion below.

Node already supports a lot of ES2015+ features, but to avoid compatibility problems we suggest to install Babel and rename your to .

npm install --save-dev @babel/register @babel/core @babel/preset-env

Then create a .babelrc file with the preset configuration.

{"presets""@babel/preset-env"}

And here’s the same sample from above written in ES2015+.

importgulpfrom'gulp';importlessfrom'gulp-less';importbabelfrom'gulp-babel';importconcatfrom'gulp-concat';importuglifyfrom'gulp-uglify';importrenamefrom'gulp-rename';importcleanCSSfrom'gulp-clean-css';importdelfrom'del';constpaths={  styles{    src'src/styles/**/*.less',    dest'assets/styles/'},  scripts{    src'src/scripts/**/*.js',    dest'assets/scripts/'}};exportconstclean=()=>del('assets');exportfunctionstyles(){returngulp.src(paths.styles.src).pipe(less()).pipe(cleanCSS()).pipe(rename({      basename'main',      suffix'.min'})).pipe(gulp.dest(paths.styles.dest));}exportfunctionscripts(){returngulp.src(paths.scripts.src,{ sourcemapstrue}).pipe(babel()).pipe(uglify()).pipe(concat('main.min.js')).pipe(gulp.dest(paths.scripts.dest));}functionwatchFiles(){gulp.watch(paths.scripts.src, scripts);gulp.watch(paths.styles.src, styles);}export{watchFilesaswatch};constbuild=gulp.series(clean,gulp.parallel(styles, scripts));exportdefaultbuild;

Migrating to version 5

version 5 requires Node 12 or later, and introduces some breaking changes. Additionally, changes in Node itself mean that we should no longer use Node fibers to speed up asynchronous rendering with Dart Sass.

Setting a Sass compiler

As of version 5, does not include a default Sass compiler, so you must install one (either or ) along with .

Then, you must explicitly set that compiler in your gulpfille. Instead of setting a prop on the instance, you pass the compiler into a function call when instantiating .

These changes look something like this:

- var sass = require('gulp-sass'));
- var compiler = require('sass');
- sass.compiler = compiler;
+ var sass = require('gulp-sass')(require('sass'));

The gulp-minify example

The plugin minifies JS files.

$ npm i --save-dev gulp-minify

We install the plugin.

src/js/main.js

function hello() {

    return 'Hello there!';
}

hello();

We have a simple file with a function.

gulpfile.js

const { src, dest } = require('gulp');
const minify = require("gulp-minify");


exports.default = () => {

    return src('src/js/main.js', { allowEmpty: true }) 
        .pipe(minify({noSource: true}))
        .pipe(dest('dist/js'))
}

We read the JS file, pass it through the function
and write the result into the directory.

$ gulp 
 Using gulpfile ~/Documents/prog/js/gulp-lib/gulpfile.js
 Starting 'default'...
 Finished 'default' after 75 ms

We run the default Gulp task.

$ cat dist/js/main-min.js 
function hello(){return"Hello there!"}hello();

These are the contents of the minified
file.

Sample gulpfile.js

This file is just a quick sample to give you a taste of what gulp does.

var gulp =require('gulp-v4');var less =require('gulp-less');var babel =require('gulp-babel');var concat =require('gulp-concat');var uglify =require('gulp-uglify');var rename =require('gulp-rename');var cleanCSS =require('gulp-clean-css');var del =require('del');var paths ={  styles{    src'src/styles/**/*.less',    dest'assets/styles/'},  scripts{    src'src/scripts/**/*.js',    dest'assets/scripts/'}};functionclean(){returndel('assets');}functionstyles(){returngulp.src(paths.styles.src).pipe(less()).pipe(cleanCSS()).pipe(rename({      basename'main',      suffix'.min'})).pipe(gulp.dest(paths.styles.dest));}functionscripts(){returngulp.src(paths.scripts.src,{ sourcemapstrue}).pipe(babel()).pipe(uglify()).pipe(concat('main.min.js')).pipe(gulp.dest(paths.scripts.dest));}functionwatch(){gulp.watch(paths.scripts.src, scripts);gulp.watch(paths.styles.src, styles);}exports.clean= clean;exports.styles= styles;exports.scripts= scripts;exports.watch= watch;var build =gulp.series(clean,gulp.parallel(styles, scripts));gulp.task('build', build);gulp.task('default', build);

Gulp против Grunt

Есть два инструмента, которые получили популярность за последний год — Gulp и Grunt.

Grunt был первым, получившим известность и старается предоставить встроенную функциональность чтобы охватить все типовые случаи использования. Он следует подходу на основе конфигурации.

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

Хотя оба инструмента могут выполнять задачи параллельно, Gulp делает это по умолчанию, пытаясь достичь многократного параллелизма — работает так много задач, насколько это возможно, при этом соблюдаются такие вещи, как зависимость между задачами.

Use last JavaScript version in your gulpfile

Node already supports a lot of ES2015, to avoid compatibility problem we suggest to install Babel and rename your as .

npm install --save-dev babel-register babel-preset-es2015

Then create a .babelrc file with the preset configuration.

{"presets""es2015"}

And here’s the same sample from above written in ES2015.

importgulpfrom'gulp4';importlessfrom'gulp-less';importbabelfrom'gulp-babel';importconcatfrom'gulp-concat';importuglifyfrom'gulp-uglify';importrenamefrom'gulp-rename';importcleanCSSfrom'gulp-clean-css';importdelfrom'del';constpaths={  styles{    src'src/styles/**/*.less',    dest'assets/styles/'},  scripts{    src'src/scripts/**/*.js',    dest'assets/scripts/'}};constclean=()=>del('assets');export{clean};exportfunctionstyles(){returngulp.src(paths.styles.src).pipe(less()).pipe(cleanCSS()).pipe(rename({      basename'main',      suffix'.min'})).pipe(gulp.dest(paths.styles.dest));}exportfunctionscripts(){returngulp.src(paths.scripts.src,{ sourcemapstrue}).pipe(babel()).pipe(uglify()).pipe(concat('main.min.js')).pipe(gulp.dest(paths.scripts.dest));}exportfunctionwatch(){gulp.watch(paths.scripts.src, scripts);gulp.watch(paths.styles.src, styles);}constbuild=gulp.series(clean,gulp.parallel(styles, scripts));export{build};exportdefaultbuild;

Usage

var gulp =require('gulp');var webpack =require('gulp-webpack');gulp.task('default',function(){returngulp.src('src/entry.js').pipe(webpack()).pipe(gulp.dest('dist/'));});

The above will compile into assets with webpack into with the output filename of (webpack generated hash of the build).

You can pass webpack options in with the first argument, including which will greatly increase compilation times:

returngulp.src('src/entry.js').pipe(webpack({    watchtrue,    module{      loaders{ test\.css$, loader'style!css'},,},})).pipe(gulp.dest('dist/'));

Or just pass in your :

returngulp.src('src/entry.js').pipe(webpack(require('./webpack.config.js'))).pipe(gulp.dest('dist/'));

If you would like to use a different version of webpack than the one this plugin uses, pass in an optional 2nd argument:

var gulp =require('gulp');var webpack =require('webpack');var gulpWebpack =require('gulp-webpack');gulp.task('default',function(){returngulp.src('src/entry.js').pipe(gulpWebpack({}, webpack)).pipe(gulp.dest('dist/'));});

Pass in 3rd argument if you want to access the stats outputted from webpack when the compilation is done:

var gulp =require('gulp');var webpack =require('gulp-webpack');gulp.task('default',function(){returngulp.src('src/entry.js').pipe(webpack({},null,function(err,stats){})).pipe(gulp.dest('dist/'));});

A common request is how to handle multiple entry points. You can continue to pass in an option in your typical webpack config like so:

var gulp =require('gulp');var webpack =require('gulp-webpack');gulp.task('default',function(){returngulp.src('src/entry.js').pipe(webpack({      entry{        app'src/app.js',        test'test/test.js',},      output{        filename'.js',},})).pipe(gulp.dest('dist/'));});

var gulp =require('gulp');var webpack =require('gulp-webpack');var named =require('vinyl-named');gulp.task('default',function(){returngulp.src('src/app.js','test/test.js').pipe(named()).pipe(webpack()).pipe(gulp.dest('dist/'));});

The above stream will add a property to the vinyl files passing through. The stream will read those as entry points and even group entry points with common names together.

Альтернативные варианты развертывания

Зависимости разработки не устанавливаются, если в операционной системе для переменной среды NODE_ENV задано значение production. Обычно это делается на сервере с помощью команды macOS/Linux:

export NODE_ENV=production

В Windows:

set NODE_ENV=production

В этом руководстве предполагается, что ресурсы будут скомпилированы в папку build, переданы в репозиторий Git или загружены непосредственно на сервер.

Чтобы использовать ресурсы на работающем сервере, изменить способ их создания. Например, файлы HTML, CSS и JavaScript сжимаются при использовании, но не в средах разработки. В этом случае удалите —save-dev при установке Gulp и его плагинов. Например:

npm install gulp

Эта команда устанавливает Gulp как зависимость приложения в разделе «dependencies» файла package.json. Сборщик будет установлен при вводе npm install и может быть запущен везде, где развернут проект.

Автоматизация автоматизации

Вы, возможно, заметили одну вещь — нужно сделать большое число вызовов чтобы включить все необходимые нам плагины.

Мы можем сократить этот список до одного, используя — вот ирония — ещё один плагин gulp-load-plugins. Этот плагин будет автоматически загружать все плагины Gulp из нашего package.json используя ленивую загрузку, что делает их всех доступными как единый объект.

С этого момента все наши плагины будут доступны как $.<плагин>, при этом из имени отделяется gulp- и применяется camelCase. Это значит, что gulp-usemin и gulp-uglify станут $.usemin и $.uglify, соответственно, а gulp-minify-css станет $.minifyCss.

Плагины

Вместе с Gulp вы можете использовать ряд плагинов — более 600 на деле. Вы найдёте их список на странице плагинов, либо путём поиска gulpplugin в npm. Некоторые плагины помечены «gulpfriendly»; это не плагины, но они предназначены для работы с Gulp. Учтите, что при поиске непосредственно в npm, вы не увидите плагины из чёрного списка (прокрутите страницу с плагинами вниз и увидите больше).

Большинство плагинов довольно просты в использовании, имеют хорошую документацию и запускаются аналогичным образом (через поток файловых объектов). Они, как правило, модифицируют файлы (хотя некоторые, вроде валидаторов, нет) и возвращают новые файлы, которые передаются в следующий плагин.

Давайте расширим уже упомянутую задачу js:

Мы используем три плагина: gulp-jshint, gulp-uglify и gulp-concat. Вы можете увидеть в файлах README для плагинов, что их довольно легко использовать. Доступны некоторые настройки, но по умолчанию, как правило, всё хорошо.

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

Два других плагина понятнее: функция uglify() минимизирует код, а функция concat(‘app.js’) объединяет все файлы в один с именем app.js.

Sample gulpfile.js

This file will give you a taste of what gulp does.

var gulp =require('gulp');var less =require('gulp-less');var babel =require('gulp-babel');var concat =require('gulp-concat');var uglify =require('gulp-uglify');var rename =require('gulp-rename');var cleanCSS =require('gulp-clean-css');var del =require('del');var paths ={  styles{    src'src/styles/**/*.less',    dest'assets/styles/'},  scripts{    src'src/scripts/**/*.js',    dest'assets/scripts/'}};functionclean(){returndel('assets');}functionstyles(){returngulp.src(paths.styles.src).pipe(less()).pipe(cleanCSS()).pipe(rename({      basename'main',      suffix'.min'})).pipe(gulp.dest(paths.styles.dest));}functionscripts(){returngulp.src(paths.scripts.src,{ sourcemapstrue}).pipe(babel()).pipe(uglify()).pipe(concat('main.min.js')).pipe(gulp.dest(paths.scripts.dest));}functionwatch(){gulp.watch(paths.scripts.src, scripts);gulp.watch(paths.styles.src, styles);}exports.clean= clean;exports.styles= styles;exports.scripts= scripts;exports.watch= watch;var build =gulp.series(clean,gulp.parallel(styles, scripts));gulp.task('build', build);gulp.task('default', build);

LICENSE

(MIT License)

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
«Software»), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED «AS IS», WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Установка Gulp

Установка Gulp 4 довольно простая. Так как Gulp написан на языке javascript, изначально необходимо установить Node.js на вашу систему. Просто заходите на сайт https://nodejs.org, скачиваете инсталятор последний версии и устанавливаете.

Далее создаем папку для проекта в любом удобном месте компьютера и вызываем окно терминала в этом каталоге. В командной строке запускаем инициализацию проекта:

Отвечаем на вопросы на каждом шаге. После каждого ввода нажимаем Enter и переходим к следующему шагу. В результате получим файл package.json, который содержит информацию о проекте и установленных плагинах. Далее установим gulp в наш проект:

После установке Gulp 4 название пакета и его версия сохранятся в файле package.json. Флаг —save-dev используется для сохранения пакета в package.json в раздел devDependencies, то есть в целях разработки. Если установить пакет с флагом —save, то пакет попадает в раздел dependencies (для запуска приложения).

Такой подход дает возможность сохранять все пакеты в файле package.json со всеми зависимостями, а при разворачивании нового проекта достаточно скопировать файл package.json и запустить команду:

Таким образом все пакеты и зависимости установятся автоматически. После установки gulp в каталоге проекта создалась папка node_modules. Все новые установленные пакеты и зависимости сохраняются в данную папку. Поэтому изменять содержимое этого каталога нельзя.

Далее в каталоге проекта создаем файл gulpfile.js. Это самый основной файл, без которого Gulp работать не может. По сути в него можно писать любой javascript код, но gulp — это менеджер управления задачами, и эти задачи описываются в этом файле в виде обычных функций. Что бы запускать эти задачи, функцию нужно экспортировать через оператор exports. Пример:

На примере выше мы создали задачу под название testTask, в которой выводим строчку test. После этого мы экспортируем эту задачу. Что бы Gulp знал, что задача выполнена, мы вызываем функцию обратного вызова done.

Что бы запустить Gulp, можно установить отдельную утилиту глобально на вашу систему:

После этого в консоли вводим команду gulp и через пробел название задачи:

Но есть и альтернативный вариант. Можно передать дополнительные параметры командам запуска в файле package.json для раздела scripts:

В этом случае запускается задача так:

gulp — это значение с раздела scripts файла package.json, а test — название задачи. В итоге в консоле выведется слово test:

Use last JavaScript version in your gulpfile

Node already supports a lot of ES2015, to avoid compatibility problem we suggest to install Babel and rename your as .

npm install --save-dev babel-register babel-preset-es2015

Then create a .babelrc file with the preset configuration.

{"presets""es2015"}

And here’s the same sample from above written in ES2015.

importgulpfrom'gulp';importlessfrom'gulp-less';importbabelfrom'gulp-babel';importconcatfrom'gulp-concat';importuglifyfrom'gulp-uglify';importrenamefrom'gulp-rename';importcleanCSSfrom'gulp-clean-css';importdelfrom'del';constpaths={  styles{    src'src/styles/**/*.less',    dest'assets/styles/'},  scripts{    src'src/scripts/**/*.js',    dest'assets/scripts/'}};exportconstclean=()=>del('assets');exportfunctionstyles(){returngulp.src(paths.styles.src).pipe(less()).pipe(cleanCSS()).pipe(rename({      basename'main',      suffix'.min'})).pipe(gulp.dest(paths.styles.dest));}exportfunctionscripts(){returngulp.src(paths.scripts.src,{ sourcemapstrue}).pipe(babel()).pipe(uglify()).pipe(concat('main.min.js')).pipe(gulp.dest(paths.scripts.dest));}functionwatchFiles(){gulp.watch(paths.scripts.src, scripts);gulp.watch(paths.styles.src, styles);}export{watchFilesaswatch};constclean=gulp.series(clean,gulp.parallel(styles, scripts));gulp.task('clean', clean);exportdefaultbuild;

Потоки

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

В приведённом выше примере функция gulp.src() получает строку, которая соответствует файлу или набору файлов, и создаёт поток объектов представляющих эти файлы. Затем они переходят (или перетекают) в функцию uglify(), которая принимает объекты файлов и возвращает новые объекты файлов с минимизированным исходником. Этот результат затем перетекает в функцию gulp.dest(), которая сохраняет изменённые файлы.

Вот что происходит в виде схемы:

Когда есть только одна задача, функция ничего не делает. Тем не менее, рассмотрим следующий код:

Чтобы запустить это самостоятельно, установите gulp, gulp-jshint, gulp-uglify и gulp-concat.

Эта задача берёт все файлы соответствующие js/*.js (иными словами все файлы JavaScript из папки js), запускает для них JSHint, выводит отчёт, минимизирует каждый файл, а затем объединяет их, сохраняя их в build/app.js. В виде схемы:

Если вы знакомы с Grunt, то заметите, что это довольно сильно отличается от того, как работает Grunt. Grunt не использует потоки. Вместо этого он берёт файлы, запускает одну задачу для каждого файла и сохраняет в новые файлы, повторяя весь процесс для каждой задачи. В результате множества обращений к файловой системе, Grunt работает медленнее, чем Gulp.

Для лучшего понимания потоков прочтите Stream Handbook.

What’s new in 4.0?!

• The task system was rewritten from the ground-up, allowing task composition using and methods
• The watcher was updated, now using chokidar (no more need for gulp-watch!), with feature parity to our task system
• First-class support was added for incremental builds using
• A method was exposed to create symlinks instead of copying files
• Built-in support for sourcemaps was added — the gulp-sourcemaps plugin is no longer necessary!
• Task registration of exported functions — using node or ES exports — is now recommended
• Custom registries were designed, allowing for shared tasks or augmented functionality
• Stream implementations were improved, allowing for better conditional and phased builds

Шаг 1: установите Node.js

Node.js можно загрузить для Windows, macOS и Linux с nodejs.org/download/. Доступны различные варианты платформы для установки из бинарных файлов, модульных сборщиков и Docker-образов.

Примечание: Node.js и Gulp работают в Windows, но некоторые плагины могут работать некорректно, если они зависят от собственных бинарных файлов Linux. Одним из вариантов решения проблемы в Windows 10 является подсистема Windows для Linux.

После установки запустите командную строку и введите следующую команду. Она позволит узнать номер версии:

node -v

Вскоре вы станете активно использовать npm – менеджер пакетов Node.js, который необходим для установки модулей. Узнайте номер его версии:

npm –v

Примечание: модули Node.js можно устанавливать глобально, чтобы они были доступны во всей ОС. Но большинство пользователей не будут иметь права на запись в глобальные библиотеки, если у команд npm не будет префикса sudo. Существует несколько вариантов, как исправить разрешения npm. Но можно изменить каталог по умолчанию. Например, в Ubuntu/Debian:

cd ~
  mkdir .node_modules_global
  npm config set prefix=$HOME/.node_modules_global
  npm install npm -g

Затем добавьте следующую строку в конце ~/.bashrc:

export PATH="$HOME/.node_modules_global/bin:$PATH"

Снова обновите:

source ~/.bashrc

Разворачивание готовой сборки одной командой

Вы создали сборку, теперь хотите реально создать на ней проект. Достаточно скопировать папку сборки и запустить установку. Вообще при установке должны устанавливаться все последние версии зависимостей, включая сам gulp (при обновлении глобальной версии). Для этого нам необходимо подредактировать файл package.json. В блоке devDependencies, где перечислены установленные расширения вместо версии необходимо указать ключевое слово — . Вот как теперь выглядит мой файл:

Теперь для быстрого разворачивания проекта необходимо сделать следующее — копируем все файлы проекта Gulp за исключением папки node_modules в другую папку вашего проекта. Открываем локально консоль и вводим команду после чего запуститься установка gulp и всех зависимостей. Все, можно начинать работу.