Интерфейсный инструмент обработки файлов на базе Electron.

внешний интерфейс Electron CSS Gulp

адрес проекта

Github, добро пожаловать Звезда ~ ╰(´︶`)╯♡

splice

GUI workflow for Front-End developers based on Electron
Добро пожаловать на загрузку и использование, если вам интересен код, вы можете его прочитать (письмо грязное, вы можете его использовать, закройте лицо "(￣▽￣)""")
Решите болевые точки: нет необходимости писать и запускать, когда некоторые файлы интерфейса нужно срочно обработать.gulpкод или откройте онлайн-сайт: вставка кода => сжатие (или другая обработка) => копирование, используйте этоElectronКлиент может напрямую выбирать нужную операцию, перетаскивать файлы обработки (в пакетном режиме), перезаписывать исходные файлы по умолчанию после обработки, добавлять операции переименования и т. д.~

Функция

Реализуйте функции обработки файлов, обычно используемые во внешнем интерфейсе:

  1. HTML:
    • сжать html
    • Слияние css/js через комментарии в html
  2. CSS:
    • добавить префикс совместимости
    • сжатый css
    • Изображение в base64
    • спрайт
      • Обработка файлов css и создание соответствующих спрайтов
  3. js:
    • сжатый js
  4. ИЗОБРАЖЕНИЕ:
    • Сжать изображение
    • Объедините несколько изображений в спрайты и создайте соответствующий CSS
  5. JSON:
    • сжатый json
  6. Универсальный:
    • формат
      • Форматирование файлов, таких как JavaScript, JSON, HTML и CSS
    • переименовать файл
    • Пользовательские настройки
      • Установите каталог экспорта для файлов

разное:

  • горячая клавиша:
    • обновить страницу:Ctrl+Alt+R
    • Чтобы включить или выключить инструменты разработчика:Ctrl+Alt+T
  • Меню правой кнопки мыши:
    • обновить: обновить страницу
    • Инструменты разработчика: включение и отключение инструментов разработчика
    • Проверить наличие обновлений: Проверить наличие новых версий
    • Перезапустите приложение: перезапустите, если обновление не может решить проблему.
  • Онлайн обновление:
    • После открытия приложение проверяет наличие обновлений по умолчанию.Вы также можете нажать «Проверить наличие обновлений» в контекстном меню.
    • Когда на github существует более новая версия, покажитеОбновление в один кликкнопка
    • Идея обновления: заменить файл, автоматически установить новый модуль npm (установка может завершиться неудачно, можно перейти в корневую директорию приложения...resources/app/ручная установка)

снимок экрана

интерфейс:

WIN
MAC

Простое управление:

压缩并重命名图片

ссылка на скачивание

  • win zip(несжатый и найденныйsplice.exeДважды щелкните, чтобы открыть)
  • win installer(Дважды щелкните файл для установки, отличие от стандартной версии в том, что установщик на 5 МБ меньше, (#￣▽￣#))
  • mac

развивать

  1. вытащить проект
git clone https://github.com/SuperAL/splice.git --depth=1
# 解释一下那个 `--depth=1`，代表只获取最新的 commit 记录。 
# 因为之前的一些误操作，不小心将打包后的文件也上传到了 git，即使文件删掉了记录还是存在，因此记录文件超级大，直接导致 `clone` 超级慢。
# 加上 `--depth=1` 可以解决 `clone` 慢的问题。
  1. Установить зависимости
npm install
  1. запустить проект
npm run start
  1. Упаковать проект
# win 64位
npm run pack:win

# win 32位
npm run pack:win32

# mac，需要使用 mac 电脑
npm run pack:mac

Второй способ упаковки (с использованиемelectron-forge, упакованный таким образомexeсоотношение версийelectron-packagerбольше)

# 全局安装 electron-forge
npm install electron-forge -g

# 打包你当前使用的平台的版本
electron-forge package

# 制作安装器（installer） 
electron-forge make

Используемые модули, связанные с файловыми операциями

Инструменты

HTML-сжатие

Обработка слияния файлов css и js через файлы html

сжатие css, добавить совместимый префикс

Преобразование изображений, импортированных по URL-адресу в CSS, в base64

Эльфийская диаграмма через CSS

JS сжатие

Сжатие изображения

обработка спрайтов

сжатие json-файлов

Форматирование кода JavaScript, JSON, HTML и CSS

переименовать файл

Отслеживайте изменения файлов и отображайте эффект загрузки

протокол

GNU General Public License v3.0
Этот проект предназначен только для обмена знаниями и частного использования, коммерческое использование запрещено.

Категории