Top.Mail.Ru

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 доступно множество плагинов, каждый из которых предназначен для выполнения определенных задач в процессе разработки. Вот несколько примеров популярных плагинов:

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

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

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

    
        npm install --save-dev gulp-sass
    

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