Автоматический конвейер сборки для фронтенда

Автоматический конвейер сборки для фронтенда, основанный на Node.js, который включает локальный сервер разработки и снижает количество ненужной работы при разработке, такой как массовое поиск и замена общих частей; решает проблемы с использованием Ruby для компиляции Sass, когда возникают ошибки с китайскими путями, а также проблему автоматической компиляции при использовании Koala.- Включен веб-сервер webpack-dev-server, который поддерживает реальное время отслеживание файлов, автоматическое компилирование при изменении файла и обновление браузера.

• Поддерживает просмотр локальных статических файлов, включая встроенный локальный сервер разработки и текущий каталог просмотра.
• Предварительный процессор Sass, который автоматически сжимает и оптимизирует CSS файлы.
• Автоматически добавляет необходимые префиксы браузеров для CSS стилей.
• Можно настроить генерацию base64 кодировки, что позволяет уменьшить количество запросов к серверу.
• Автоматически создает спрайты CSS, объединяет несколько маленьких изображений в одно и обновляет значения свойства background-position. Это уменьшает потребность в использовании таких инструментов, как Photoshop, для расположения и измерения позиций изображений во время разработки.
• Использует uglifyjs для минификации JavaScript.
• Разработка модульная, разделение общих частей, позволяющее реализовать разделение, аналогичное тому, как это делается в языках backend.
• Динамическая загрузка модулей HTML.
• Форматирование файлов HTML/JS.
• Проверка качества кода HTML/CSS.
• Сохранение скриншотов HTML.Основана на версиях:
• Node.js 10.7.0
• webpack-cli@3.1.0
• webpack@4.16.3
• webpack-dev-server@3.1.5

Установка

Сначала установите Node.js

1. Глобальная установка webpack, webpack-cli, webpack-dev-server, если автоматическая перезагрузка не требуется (то есть запуск команды guilin server не нужен), этот шаг можно пропустить. Команды:
   • npm install -g webpack
   • npm install -g webpack-dev-server
   • npm install -g webpack-cli

Метод установки 1:

1.2. Копируйте папку guilin в следующую директорию C:\Users\<текущее имя пользователя>\AppData\Roaming\npm\node_modules, затем войдите в директорию C:\Users\<текущее имя пользователя>\AppData\Roaming\npm\node_modules\guilin и выполните команду npm install для установки зависимостей.

1.3. Самое важное: скопируйте файл guilin.cmd из этой директории в следующую директорию C:\Users\<текущее имя пользователя>\AppData\Roaming\npm, чтобы использовать все команды ниже.

Эта установка может быть проверена на изображении 1.jpg.### Метод установки 2: Установка в других местах, например клонированная директория D:\Automated-build-tools-for-front-end; 2.2. Войдите в директорию D:\Automated-build-tools-for-front-end\guilin, выполните команду npm install для установки зависимостей; 2.3. Добавьте системную переменную окружения, добавив D:\Automated-build-tools-for-front-end\guilin. Метод установки 2 может быть проверен на изображении 2.jpg. Содержание папки включает статичные файлы. При выполнении команды guilin init файлы из указанной папки будут скопированы в текущий проект, поэтому можно хранить часто используемые скрипты, стили и изображения в соответствующих директориях.## Второй раздел. Использование

Для начала создайте новую папку в подходящем месте, например my-project. Затем выполните команду инициализации проекта:

1. guilin init Эта команда создаёт базовую структуру каталогов в вашем проекте:

my-project
   -- build          Каталог сборки после развёртки
   -- src            Каталог исходников
     -- css
     -- images
     -- js
     -- sass
     -- model        Хранение общих модулей, таких как header.html
     -- sprites      Каталог для маленьких иконок, которые нужно объединить
     -- webpack      Конфигурационные файлы Webpack, такие как конфигурация автоматического обновления
   -- package.json   Конфигурационный файл проекта

2. guilin build Краткая форма: guilin b Эта команда компилирует файлы из папки src и копирует их в указанный каталог, например build.

3. guilin server Краткая форма: guilin s Запускает сервер. После выполнения команды вы можете открыть страницу в браузере по адресу http://localhost:8080. Изменения в исходных файлах приведут к автоматическому обновлению страницы.

4. guilin watch Краткая форма: guilin w Запускает режим слежения за изменениями. Отличается от запуска HTTP-сервера тем, что сам сервер не запускается.

5. guilin sprites Краткая форма: guilin cs Объединяет маленькие изображения в sprites.png и точно рассчитывает положение background-position.

6. guilin stylelint Краткая форма: guilin sl Проверяет файлы src/sass/*.scss на наличие ошибок синтаксиса.7. guilin htmlhint Краткая форма: guilin hh Проводит проверку качества HTML-файлов и позволяет сохранять скриншоты страниц.

7. guilin help Краткая форма: guilin h Отображает справочную информацию.## Третий раздел. Описание конфигурации

Общие настройки обычно не требуются, можно использовать значения по умолчанию.

• dist: 'build' — директория, в которую будут скомпилированы файлы. По умолчанию пустое значение указывает на корневую директорию test. Например, если вы хотите собрать файлы в директорию build, используйте dist: "build".
• port: '8090' — порт, на котором будет запущен сервер.
• serverIp: '' — IP адрес текущего компьютера для доступа к серверу. Эта настройка активна при использовании команды запуска сервера. Если поле не заполнено, то доступ осуществляется через http://localhost. Может принимать значение true (для автоматического получения IP адреса) или конкретный IP адрес для удобства доступа с мобильных устройств.
• outputStyle: 'compressed' — тип вывода Sass, может быть nested, expanded, compact, compressed (по умолчанию).
• autoPrefixer: true — добавление префиксов CSS3 для совместимости браузеров. По умолчанию установлено значение true.
• uglifyJs: false — минификация JavaScript. В текущей директории создаются файлы files.min.js. По умолчанию значение false.
• imgToBase64: false — конвертирование фоновых изображений в base64. По умолчанию значение false.
• imgLimit: 10 — максимальный размер изображения для конвертации в base64, измеряется в КБ.
• spritesWidth: 500 — ширина объединенного спрайта sprites.png.
• codeCheck:
  • lintExclude: ['model', 'font', 'sprites'] — исключения для проверки качества кода HTML.
  • screenshots: true — включает создание скриншотов во время проверки.- isMobile: false — режим создания скриншотов для мобильной версии сайта. Установите значение true для проектов, предназначенных для мобильных устройств.
    }## 4. Модульное развитиеДля одной страницы помимо её собственного шаблона HTML, стилей и скриптов также включаются общие части, такие как header и footer. Чтобы использовать общий header, достаточно сослаться на модуль HTML, созданный для этого.

Создайте header.html в папке models, содержимое которого будет следующим:

<div class="header">Это общий верхний колонтитул</div>

Затем создайте index.html в папке src, с таким содержанием:

<body>
    <!-- include href="header.html" -->
    <p>Это текущий контент страницы</p>
</body>

Если сервер уже запущен командой server или watch, то в директории build будет создан файл index.html со следующим содержимым:

<body>
    <div class="header">Это общий верхний колонтитул</div>
    <p>Это текущий контент страницы</p>
</body>

Часто header.html требует небольших изменений для разных страниц, например, отображение текущего положения в меню навигации. При динамической загрузке достаточно передать параметры, а затем получить эти параметры в общем шаблоне, таком как header.html, и выполнить необходимую обработку. Для передачи параметров требуется полный URL.

Пример использования динамического шаблона:

<!-- include href="header.html?a=1" -->

Параметр a будет получен в header.html.Важно отметить, что поскольку используется URL для доступа, header.html должен иметь полную структуру HTML-страницы, включающую теги <html>, <head> и <body>. В противном случае при доступе могут возникнуть проблемы с отображением. Поэтому при использовании параметров в URL возвращается только содержимое внутри тега <div id="page">.Пример структуры HTML-страницы:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>индекс</title>
</head>
<body id="page">
    <div class="header">шапка</div>
</body>
</html>

5. Внимание к деталям

1. При сборке проекта браузеры, такие как 360, могут выдавать предупреждение о наличии вирусов. Это может быть связано с использованием системы файлов Node.js (fs). Поскольку вам потребуется копировать, перемещать и изменять файлы, можно смело использовать этот процесс;

2. Если у вас возникнут вопросы во время работы, оставьте свои замечания здесь: https://github.com/337547038/Automated-build-tools-for-front-end