10 Sie 2018

Gulp workflow: minimalizacja zdjęć i konwersja na webp

Kiedyś w zamierzchłych czasach używałem perla + lib ImageMagick do konwersji zdjęć, ale mamy XXI wiek i Node 😉
Od jakiegoś czasu zmienił się mój workflow dotyczący obróbki zdjęć na potrzeby stron internetowych.
Do tej pory używałem gulp-image, gulp-imagemin i wiele innych, ale zawsze coś było nie tak, zawsze czegoś brakowało.
Ostatnio używam takiego zapisu jak poniżej

<picture>
    <source class="img-responsive" srcset="./images/thumbnail/IMG_5600.webp" type="image/webp"/>
    <source class="img-responsive" srcset="./images/thumbnail/IMG_5600.jpg" type="image/jpeg"/>
    <img class="img-responsive" src="./images/thumbnail/IMG_5600.jpg" alt=""/>
</picture>

i potrzebowałem również webp, no i co następna biblioteka gulp-webp jest potrzebna 🙁
Mały research i okazało się że jest biblioteka sharp, która bardzo dobrze zastępuje ImageMagick więcej na tej stronie. Biblioteka ta jest w stanie zastąpić wszystko co do tej poru używałem.

Obecnie korzystam z pluginu gulp-responsive który pod spodem używa tejże biblioteki sharp.
Zmiana rozmiaru obrazu za pomocą tej biblioteki jest zazwyczaj 4x-5x szybsza niż w przypadku najszybszych ustawień ImageMagick i GraphicsMagick, a więc czemu jej nie używać. Oczywiście ta bibliotek nie tylko do zmniejsza grafiki ale również przycina, zmieniania formatu, zapisu do grayscale czyli szarości i wiele innych użytecznych rzeczy potrafi 🙂

Dobra zaczynamy cały proces.
Oczywiście musimy mieć zainstalowane node w naszym środowisku ale to nie temat na ten artykuł.

Na początek tworzymy package.json

npm init -y

Instalujemy wszystkie potrzebne biblioteki

npm i -D gulp gulp-responsive gulp-load-plugins
24 Lip 2008

Uruchomienie tinyMCE zmożliwością edycji tabel

<script language=”javascript” type=”text/javascript” src=”../edytor/jscripts/tiny_mce/tiny_mce.js” mce_src=”../edytor/jscripts/tiny_mce/tiny_mce.js”></script>
<script language=”javascript” type=”text/javascript”>
tinyMCE.init({
 mode : „exact”,
 elements : „strona_fragment”,
 theme : „simple”
});

tinyMCE.init({
 mode : „exact”,
 elements : „strona_tresc”,
 theme : „advanced”,theme_advanced_styles
    theme_advanced_buttons3_add : „separator,fullscreen”,
    theme_advanced_buttons3_add_before : „tablecontrols,separator”,
 theme_advanced_styles : „Tabela Podstawowa=table”,
    plugins : „advimage, fullscreen, table”,
    external_image_list_url : „../edytor/example_image_list.js”
});

za edycję tabel odpowiada plugins table

plugins : „advimage, fullscreen, table”,