Было бы полезно сохранить статические ресурсы в их исходном формате файла (например, favicon.ico
или github-icon.svg
) и использовать сценарий для их преобразования в код C, необходимый для WebStaticData.h
. Таким образом, ресурсы можно поддерживать, не копаясь в коде C и не забывая нулевой терминатор после редактирования CSS.
Дополнительным бонусом будет то, что можно оптимизировать файлы с помощью внешних плагинов, таких как svgo или jsmin, перед их записью в файл. Можно взглянуть на WI-PWN для вдохновения, хотя я бы использовал простой (bash / python / ...) скрипт для создания файла.
Это хорошее предложение, и нам нужно будет сделать что-то подобное в будущем. Спасибо за вопрос. : +1:
Это то, что будет добавлено в будущем.
Это также позволит пользователям самим добавлять новые значки.
Единственная причина, по которой этого еще не произошло, заключается в том, что я еще не был уверен в формате, и я также думал о загрузке этих ресурсов в виде файлов в SPIFF.
Спасибо за ссылки!
Для полноты картины: недавно я создал сценарий для этой задачи. По сути, это копия сценария Эрика Б. Тедески и Spacehuhn . Репо для esp8266_deauther также содержит другой скрипт (python) для этой задачи .
#!/bin/bash
#
# This script walks through the assets folder and minifys all JS, HTML, CSS and SVG files. It also generates
# the corresponding constants that are added to the data.h file on esp8266_deauther folder.
#
# <strong i="8">@Author</strong> Erick B. Tedeschi < erickbt86 [at] gmail [dot] com >
# <strong i="9">@Author</strong> Wandmalfarbe https://github.com/Wandmalfarbe
#
outputfile="$(pwd)/data_h_temp"
rm $outputfile
function minify_html_css {
file=$1
curl -X POST -s --data-urlencode "input@$file" http://html-minifier.com/raw > /tmp/converter.temp
}
function minify_js {
file=$1
curl -X POST -s --data-urlencode "input@$file" https://javascript-minifier.com/raw > /tmp/converter.temp
}
function minify_svg {
file=$1
svgo -i /Users/User/Desktop/icons/tools.svg -o - > /tmp/converter.temp
}
function ascii2hexCstyle {
file_name=$(constFileName $1)
result=$(cat /tmp/converter.temp | hexdump -ve '1/1 "0x%.2x,"')
result=$(echo $result | sed 's/,$//')
echo "const char DATA_${file_name}[] PROGMEM = {$result};"
}
function constFileName {
extension=$(echo $1 | egrep -io "(json|svg|css|js|html)$" | tr "[:lower:]" "[:upper:]")
file=$(echo $1 | sed 's/\.json//' | sed 's/\.svg//' | sed 's/\.css//' | sed 's/\.html//' | sed 's/\.js//' | sed 's/\.\///' | tr '/' '_' | tr '.' '_' | tr '-' '_' | tr "[:lower:]" "[:upper:]")
underscore="_"
echo $file$underscore$extension
}
cd assets
file_list=$(find . -type f)
for file in $file_list; do
echo "Processing: $file"
file_name=$(constFileName $file)
echo " Array Name: $file_name"
if [[ "$file" == *.min.js ]]; then
echo " JS already minified"
cat $file > /tmp/converter.temp
ascii2hexCstyle $file >> $outputfile
elif [[ "$file" == *.js ]]; then
echo " JS minify"
minify_js $file
ascii2hexCstyle $file >> $outputfile
elif [[ "$file" == *.min.css ]]; then
echo " CSS already minified"
cat $file > /tmp/converter.temp
ascii2hexCstyle $file >> $outputfile
elif [[ "$file" == *.html ]] || [[ "$file" == *.css ]]; then
echo " HTML and CSS minify"
minify_html_css $file
ascii2hexCstyle $file >> $outputfile
elif [[ "$file" == *.svg ]]; then
echo " SVG minify"
minify_svg $file
ascii2hexCstyle $file >> $outputfile
else
echo " without minifier"
cat $file > /tmp/converter.temp
ascii2hexCstyle $file >> $outputfile
fi
echo ""
sleep 1
done
Я постараюсь сделать это, чтобы мы могли минимизировать весь встроенный JavaScript.
Возможно, было бы также неплохо оставить код читаемым для сборок с 4 МБ флэш-памяти.
Оооо, сладкая музыка для моих ушей @ TD-er :)