66 lines
5.7 KiB
Markdown
66 lines
5.7 KiB
Markdown
|
---
|
|||
|
|
title: Gulp
|
|||
|
|
localeTitle: Глоток
|
|||
|
|
---
|
|||
|
|
## Глоток
|
|||
|
|
|
|||
|
|
`Gulp` - это бегун для задач JavaScript, который используется для автоматизации различных задач, которые являются частью рабочего процесса разработки JavaScript. Он используется для запуска заданий, которые вы запрограммировали, и его основным вариантом использования является выполнение повторяющихся действий, которые используются как путь процесса сборки для проекта JavaScript.
|
|||
|
|
|
|||
|
|
### Почему Gulp полезен
|
|||
|
|
|
|||
|
|
Эти задачи часто включают такие вещи, как `code minification` (удаление пробелов из html-файлов и сокращение имен переменных, чтобы уменьшить размер файла) и `css bundling` (преобразование нескольких файлов CSS в один для распространения с вашим приложением), которые необходимы для оптимизации кода для загрузки быстро в веб-браузере.
|
|||
|
|
|
|||
|
|
Причина, по которой `Gulp` полезна в приведенных выше ситуациях, заключается в том, что процесс минимизации и связывания должен происходить с каждым изменением. Было бы неэффективно делать это вручную при каждом изменении, где инструмент `Gulp` , который делает это автоматически, является отличным инструментом для разработчиков JavaScript.
|
|||
|
|
|
|||
|
|
Как и относительно простые примеры выше, `Gulp` имеет сотни плагинов, которые позволяют автоматизировать более сложные задачи. Эти задачи могут включать в себя такие вещи, как:
|
|||
|
|
|
|||
|
|
* Выполнение модульных тестов для проверки кода работает правильно.
|
|||
|
|
* Обновление вашего веб-браузера при каждом сохранении файла, позволяющем мгновенно просматривать ваши изменения.
|
|||
|
|
* Преобразование `SASS` / `LESS` в `CSS` , чтобы его можно было использовать в браузере.
|
|||
|
|
* Оптимизация изображений для создания `web friendly` версий с меньшими размерами файлов для скорости.
|
|||
|
|
|
|||
|
|
### Как пользоваться Gulp
|
|||
|
|
|
|||
|
|
Чтобы начать использовать `Gulp` , первый шаг - установить его с помощью `npm` . После его установки необходимо создать `gulpfile.js` . Этот `gulpfile` - это файл, содержащий все задачи `Gulp` которые должны выполняться как часть вашего автоматизированного процесса. Задачи написаны на JavaScript. Ниже приведен очень простой пример `gulpfile` , который берет любые файлы `CSS` из папки `client/templates` , их минимизирует и помещает мини-файл в папку `build/css` .
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
var gulp = require('gulp');
|
|||
|
|
var minifyCSS = require('gulp-csso');
|
|||
|
|
|
|||
|
|
gulp.task('css', function(){
|
|||
|
|
return gulp.src('client/templates/*.css')
|
|||
|
|
.pipe(minifyCSS())
|
|||
|
|
.pipe(gulp.dest('build/css'))
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Чтобы запустить эту задачу gulp, все, что вам нужно сделать, это ввести `gulp css` в терминал в корне вашего проекта.
|
|||
|
|
|
|||
|
|
Чтобы просмотреть файлы CSS для любых изменений и запустить задачу «css» после ее сохранения.
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
gulp.watch('css')
|
|||
|
|
.on('change', ['css']);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Зависимости задач
|
|||
|
|
|
|||
|
|
По умолчанию gulp будет запускать все задачи, определенные одновременно, и ждать ничего. Чтобы запустить несколько задач в правильном порядке, вы можете добавить задачу в зависимости от другой задачи.
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
gulp.task('two', ['one'], function() {
|
|||
|
|
// task 'one' is done now
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
В приведенном выше фрагменте кода задача `two` будет выполняться только после завершения `one` задачи.
|
|||
|
|
|
|||
|
|
Gulpfiles может иметь несколько задач для каждого файла, а задачи также можно разделить на несколько файлов для организации. Это, наряду с доступными 100-ю плагинами, делает его очень гибкой и полезной основой для разработчиков JavaScript.
|
|||
|
|
|
|||
|
|
#### Дополнительная информация:
|
|||
|
|
|
|||
|
|
[Веб-сайт Gulp](https://gulpjs.com/)
|
|||
|
|
|
|||
|
|
[Репозиторий Gulp github](https://github.com/gulpjs/gulp)
|
|||
|
|
|
|||
|
|
[Руководство для начинающих Gulp](https://css-tricks.com/gulp-for-beginners/)
|