Поиск по сайту:

Gulp — набор инструментов для автоматизации болезненных задач в разработке

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

Gulp полезен для автоматизации следующих задач:

  • Компиляция файлов JS и CSS
  • Обновление страницы браузера при сохранении файла
  • Запустите модульный тест
  • Анализ кода
  • Копирование измененных файлов в целевой каталог

Чтобы отслеживать все файлы, необходимые для создания файла gulp, разработки инструмента автоматизации или автоматизации задач, вам необходимо создать файл package.json. Файл в основном содержит объяснение того, что находится внутри вашего проекта, какие зависимости вам нужны, чтобы ваш проект работал.

В этом уроке вы узнаете, как установить Gulp и как автоматизировать некоторые основные задачи для ваших проектов. Мы собираемся использовать npm, что означает менеджер пакетов узлов. Он устанавливается вместе с Node.js, и вы можете проверить, установлены ли у вас уже Nodejs и npm, с помощью:

node --version
npm --version

Если он еще не установлен в вашей системе, я рекомендую вам ознакомиться с руководством: Установка последней версии Nodejs и NPM в системах Linux.

Как установить Gulp в Linux

Установку gulp-cli можно выполнить с помощью npm, используя следующую команду.

npm install --global gulp-cli

Если вы хотите установить модуль gulp локально (только для текущего проекта), вы можете использовать инструкции ниже:

Создайте каталог проекта и перейдите в него:

mkdir myproject
cd myproject

Затем используйте следующую команду для инициализации вашего проекта:

npm init

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

Теперь мы можем установить пакет gulp в наш проект с помощью:

npm install --save-dev gulp

Параметр --save-dev сообщает npm обновить файл package.json, добавив в него новые devDependency.

Обратите внимание, что devDependency необходимо разрешить во время разработки, а зависимости – во время выполнения. Поскольку gulp — это инструмент, который помогает нам в разработке, его необходимо решить во время разработки.

Создать файл Gulp

Теперь давайте создадим gulpfile. Задачи, которые мы хотим запустить, будут найдены в этом файле. Он автоматически загружается при использовании команды gulp. С помощью текстового редактора создайте файл с именем gulpfile.js. Для целей этого урока мы собираемся создать простой тест.

Вы можете вставить следующий код в свой gulpfile.js:

var gulp = require('gulp');

gulp.task('hello', function(done) {
        console.log('Hello world!');
        done();
});

Сохраните файл и теперь попробуйте запустить его с помощью:

gulp hello

Вы должны увидеть следующий результат:

Вот что делает приведенный выше код:

  • var gulp=require(’gulp’); — импортирует модуль gulp.
  • gulp.task('hello', function(done) { – определяет задачу, которая будет доступна из командной строки.
  • console.log('Hello world!'); — просто выводит на экран «Hello world!».
  • done(); – мы используем эту функцию обратного вызова, чтобы сообщить gulp, что наши задачи завершены.

Конечно, приведенное выше было всего лишь примером, показывающим, как можно организовать gulpfile.js. Если вы хотите просмотреть доступные задачи из вашего gulpfile.js, вы можете использовать следующую команду:

gulp --tasks

Плагины Gulp

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

Ниже мы будем использовать плагин minify-html в более практическом примере. С помощью приведенной ниже функции вы можете минимизировать HTML-файлы и поместить их в новый каталог. Но сначала мы установим плагин gulp-minify-html:

npm install --save-dev gulp-minify-html

Вы можете сделать свой gulpfile.js таким:

cat gulpfile.js
Пример вывода
// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");

// task
gulp.task('minify-html', function (done) {
    gulp.src('./src/*.html') // path to your files
    .pipe(minifyHtml())
    .pipe(gulp.dest('./dest'));
    done()
});

Затем вы можете минимизировать HTML-файлы, используя следующие команды.

gulp minify-html
du -sh /src dest/

Заключение

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