GULP - Что такое GULP?

Источник - Видео

GULP простыми словами

Gulp – это удобный инструмент, который помогает разработчикам автоматизировать повторяющиеся задачи в процессе создания веб-сайтов и приложений. С его помощью можно автоматически выполнять множество задач, таких как:

Минимизация размеров файлов JavaScript и CSS, чтобы страницы загружались быстрее.
Объединение нескольких файлов кода в один, уменьшая количество запросов браузера к серверу.
Компиляция кода из одного формата в другой, например, SASS в CSS.
Обновление браузера автоматически каждый раз, когда вы вносите изменения в код.
Оптимизация изображений для ускорения загрузки страниц.

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

Пример стандартного gulpfile.js, конфигурационного файла для Gulp, может выглядеть следующим образом:

    
        JavaScript:
    
        const gulp = require('gulp');
        const sass = require('gulp-sass');
        const concat = require('gulp-concat');
        const uglify = require('gulp-uglify');
        const rename = require('gulp-rename');
        const cleanCSS = require('gulp-clean-css');
        
        // Компиляция SASS файлов в CSS
        gulp.task('sass', function() {
            return gulp.src('src/scss/**/*.scss')
                .pipe(sass().on('error', sass.logError))
                .pipe(gulp.dest('dist/css'));
        });
        
        // Объединение и минификация JS файлов
        gulp.task('scripts', function() {
            return gulp.src('src/js/**/*.js')
                .pipe(concat('all.js'))
                .pipe(gulp.dest('dist/js'))
                .pipe(rename('all.min.js'))
                .pipe(uglify())
                .pipe(gulp.dest('dist/js'));
        });
        
        // Оптимизация CSS
        gulp.task('minify-css', () => {
            return gulp.src('dist/css/**/*.css')
            .pipe(cleanCSS({compatibility: 'ie8'}))
            .pipe(gulp.dest('dist/css'));
        });
        
        // Отслеживание изменений файлов
        gulp.task('watch', function() {
            gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
            gulp.watch('src/js/**/*.js', gulp.series('scripts'));
        });
        
        // Задача по умолчанию, выполняющаяся при запуске команды Gulp без аргументов
        gulp.task('default', gulp.series('sass', 'scripts', 'minify-css', 'watch'));

Чтобы начать использовать Gulp, нужно установить его глобально (npm install --global gulp-cli ) и локально в проект (npm install --save-dev gulp). После этого можно создать gulpfile.js и определить необходимые задачи и процессы.

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

Что умеет GULP?

GULP умеет только создавать и организовывать задачи. Например:

gulp.task() – это функция позволяет создать задачу с определенным именем, которую можно будет вызывать и исполнять отдельно.
gulp.src() - эта функция используется для того, чтобы указать какие файлы или набор файлов будет использовать Gulp для выполнения задач. Это своего рода стартовая точка для задач, которые будут проводиться над файлами.
pipe() - с помощью этой функции можно последовательно передавать данные от одной функции к другой, применяя различные трансформации и операции.
gulp.dest() - эта функция используется для указания места назначения, куда следует записать файлы после их обработки. По сути, эта функция определяет конечную папку, куда будут помещены файлы, прошедшие через все трансформации в задаче Gulp.
gulp.parallel() - эта функция используется для одновременного выполнения нескольких задач. Вы передаете в gulp.parallel() список задач, и она запускает их все в параллельном режиме. Это означает, что каждая задача выполняется независимо от других и начинает выполняться одновременно с остальными, что может ускорить процесс сборки проекта, если задачи не зависят друг от друга.
gulp.series() - эта функция используется для запуска задач последовательно, одну за другой. Когда вы помещаете несколько задач в `gulp.series()`, Gulp выполнит их строго по порядку: вторая задача начнется только после того, как завершится первая, третья — после второй, и так далее. Это полезно, когда одна задача зависит от результатов другой.
gulp.watch() - эта функция используется для автоматического отслеживания изменений в файлах вашего проекта. Вы задаете паттерн файлов, за которыми нужно наблюдать, и задачи, которые должны выполняться при обнаружении изменений. `gulp.watch()` постоянно следит за указанными файлами и когда файлы изменяются, функция автоматически запускает заданные задачи.

Какие плагины доступны для GULP?

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

gulp-sass: компилирует SASS файлы в CSS.
gulp-uglify: минимизирует JavaScript файлы, уменьшая их размер.
gulp-concat: объединяет несколько файлов в один.
gulp-rename: переименовывает файлы в соответствии с заданными параметрами.
gulp-clean-css: минимизирует и оптимизирует CSS файлы.
gulp-imagemin: уменьшает размер изображений без потери качества.
gulp-babel: транспилирует код ES6/ES2015+ в более старую версию JavaScript для обеспечения совместимости с браузерами.
gulp-terser: минимизирует JavaScipt файлы, аналог gulp-uglify.
gulp-autoprefixer: автоматически добавляет вендорные префиксы к CSS свойствам для поддержки разных браузеров.
browser-sync: создает локальный сервер и обеспечивает автоматическое обновление браузера при изменении кода.

Эти плагины доступны через Node.js пакетный менеджер (npm) и устанавливаются в проект как зависимости разработки. Каждый плагин настраивается в соответствии с требованиями проекта, и вы можете использовать их индивидуально или комбинировать для достижения желаемого результата.

Пример установки плагина gulp-sass через npm:

    
        npm install --save-dev gulp-sass

После установки плагина его можно подключить и использовать в вашем gulpfile.js, чтобы выполнить задачу компиляции SASS в CSS.