gulp-automation

Использование рабочего процесса автоматизации для проектов фронтенда, настроенного с помощью Gulp, позволяет реализовать однократное сжатие, публикацию, упаковку и размещение в сети кода CSS, JS и HTML.

Использование

Данный проект работает на основе Gulp 4.x. Если вы ранее устанавливали gulp глобально, сначала удалите старую версию с помощью команды npm rm --global gulp, а затем установите последнюю версию с помощью npm install --global gulp-cli.

Метод 1

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

Чтобы загрузить этот проект на свой компьютер, измените параметр name в файле package.json на имя вашего проекта, а затем последовательно выполните следующие команды:

npm install
gulp

После этого вы сможете увидеть страницу по адресу http://localhost:3000.

Метод 2

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

Используйте фреймворк для создания проектов с нуля 1one-project, чтобы инициализировать проект, после чего выполните команду:

$ gulp

Затем перейдите по адресу http://localhost:3000, чтобы увидеть страницу.

Команды

Выполнение команды

gulp

Публикация команды

gulp build

tinypng обеспечивает более эффективное сжатие изображений по сравнению с imagemin. При использовании tinypng для сжатия изображений убедитесь, что у вас стабильное интернет-соединение во время упаковки.

Описание

Структура каталогов

gulp-automation
  ├─ build                каталог публикации, где сжатые файлы CSS, JS и HTML сохраняются после публикации
  ├─ build-zip            каталог упаковки, где создается zip-файл после каждой публикации
  ├─ page                 статические страницы
    └─ include            общедоступные страницы
  ├─ static               статические файлы
    ├─ css               файлы CSS, автоматически генерируемые с помощью sass
    ├─ image             статические изображения
      └─ sprite           хранилище файлов спрайтов
    ├─ js                файлы JS, автоматически генерируемые с использованием sourcejs
    ├─ plugin            файлы плагинов и фреймворков для JS или CSS
    ├─ sass              исходные файлы Sass
    ├─ sourcejs          исходные файлы JS
    └─ template          файлы шаблонов для JS
  ├─ config.json          конфигурационный файл проекта
  ├─ gulpfile.js          файл конфигурации Gulp
  └─ package.json         конфигурационный файл npm

Конфигурация проекта

В файле config.json можно настроить данные, которые могут меняться в зависимости от среды, например, название сайта или адрес API.

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

"development": {          // уникальное имя
    "name": "Разработка",    // название для графического интерфейса
    "data": {             // необходимые данные
        "title": "Разработка",
        "api": "https://api.douban.com/v2/",
        "local": true
    }
}

Эта функция реализована с использованием gulp-preprocess.

Функциональные модули

• browser-sync (китайский сайт) — инструмент для синхронизации браузера при тестировании
• del — используется для удаления файлов
• gulp-clean-css
• gulp-file-include — используется для включения общих шаблонов
• gulp-htmlmin
• gulp-imagemin
• gulp-tinypng-nokey
• gulp-load-plugins — автоматически требует зависимостей, объявленных в package.json
• gulp-plumber — используется для обеспечения бесперебойной работы потока
• gulp-preprocess
• gulp-rev
• gulp-rev-collector
• gulp-sass
• gulp-sourcemaps
• gulp-uglify
• gulp-zip
• inquirer — инструмент командной строки для взаимодействия
• merge-stream — объединяет несколько потоков в один
• node-sass

IDE (редактор)

Рекомендуется использовать VS Code, установив следующие расширения:

• EditorConfig for VS Code
• ESLint

Дополнительная литература

• Gulp Frontend Automation Workflow
• Upgrade Notes for gulp-automation