gulp - Kody, triki, sztuczki

19 lut 2020

Usuwamy nadmiarowy Bootstrap + purgecss + webpack + pug template

Dzisiaj będzie krótko. Usuniemy nadmiarowe style z Bootstrap. Do tego zadania potrzebne nam będzie webpack, plugin purgecss-webpack-plugin, a za template posłuży nam pug oraz html.

Do testów użyłem dwóch przykładów ze strony bootstrapa, album oraz sign-in. Tak aby móc porównać czy działanie jest identyczne w wersji html i pug.

Najpierw tworzymy package.js

yarn init -y

Następnie dodamy wszystkie pluginy:

yarn add -D @babel/core @babel/preset-env autoprefixer babel-loader clean-webpack-plugin core-js cross-env css-loader cssnano html-webpack-plugin mini-css-extract-plugin node-sass postcss-cli postcss-loader pug pug-loader purgecss-webpack-plugin sass-loader style-loader terser-webpack-plugin webpack webpack-cli webpack-dev-server

Czytaj dalej

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 decoding="async" 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.

Czytaj dalej

8 cze 2018

Gulp ES6 z Babel

Do gulp instalujemy:

npm install babel-core babel-preset-es2015 --save-dev

W głównym folderze tworzymy plik:

.babelrc

W nim dodajemy zapis:

{
  "presets": [
    "es2015"
  ]
}

Aby zadziałał nam baabel z gulp należy zmodyfikować nazwę gulpfile.js na gulpfile.babel.js
Ja na wszelki wypadek duplikuję plik i zmieniam nazwę tak na wszelki wypadek i później dokonuję odpowiednich zmian w gulpfile.babel.js

'use strict';

import gulp from 'gulp';
import sass from 'gulp-sass';
import autoprefixer from 'gulp-autoprefixer';
import sourcemaps from 'gulp-sourcemaps';

const dir = {
  src: 'src',
  dest: 'build'
};

const sassPaths = {
  src: `${dir.src}/style.scss`,
  dest: `${dir.dest}/style/`
};

gulp.task('style', () => {
  return gulp.src(sassPaths.src)
    .pipe(sourcemaps.init())
    .pipe(sass.sync().on('error', plugins.sass.logError))
    .pipe(autoprefixer())
    .pipe(gulp.dest(sassPaths.dest));
});

...

30 lip 2017

Rozwijane menu

Najpierw budujemy strukturę html. Wszystko jest robione w scss, js w wersji ES6 i gulp
Do ES6 używam gulp-babel aby przekonwertować js do es2015

<div class="container">
  <div id="accorions">
    <div class="accordion">Section 1</div>
    <div class="panel">
      <p>Sauerkraut can be garnished with cored avocado, also try decorateing the cake with hollandaise sauce.
        Asparagus can be marinateed with crushed lettuce, also try flavoring the loaf with salsa verde.
        with lobsters drink cream.</p>
    </div>

    <div class="accordion">Section 2</div>
    <div class="panel">
      <p>Aww, raid me parrot, ye dead landlubber! Swashbuckling, coal-black whales cowardly vandalize a mighty, gutless
        scabbard.
        Scabbards sing on booty at port degas! Small, dead tobaccos darkly fight a black, lively dagger.
        seashells fall with love.</p>
    </div>

    <div class="accordion">Section 3</div>
    <div class="panel">
      <p>Turbulence at the bridge was the adventure of mineral, lowered to a gravimetric mermaid.
        Moon at the universe was the mystery of coordinates, feeded to a real planet.
        wisely handle a processor.</p>
    </div>
  </div>
</div>

Czytaj dalej

7 cze 2015

Gulp.js - menadżer zadań

Gulp.js jest menadżerem zadań opartym na node, w skrócie mamy kilka czynności do zrobienia w projekcie. I żeby nie robić tego ręcznie gulp wykonuje za nas te operacje.
Oprę się na małym projekcie, chcę less zamienić na css, skopiować do foldera css, zminimalizować i zmienić jego nazwę na style.min.css

1. Instalacja

Do tego oczywiście potrzebny najpierw jest zainstalowany node, jak już jest zainstalowany to instalujemy gulp.

// najpierw instalujemy globalnie - zainstaluje się w folderze C:\Users\Uzytkownik\AppData\Roaming\npm\node_modules\gulp

npm install -g gulp

// następnie instalujemy lokalnie w moim wypadku wchodzimy do D:\xampp\htdocs\test-gulp i tam instalujemy gulp jak i pluginy

npm install gulp --save-dev

Teraz aby móc z gulp skorzystać należy utworzyć plik konfiguracyjny gulpfile.js - musi być on umieszczony w katalogu głównym naszego projektu.

W naszym projekcie będziemy korzystać z gulp-less, gulp-minify-css oraz gulp-rename możemy je zainstalować pojedynczo jak i za jednym razem jak kto woli.

// wszystko instalujemy lokalnie

npm install gulp-less gulp-minify-css gulp-rename install --save-dev

Struktura naszego projektu:
mamy folder "test-gulp" w nim foldery css oraz less, w less jest plik style.less 🙂
W test-gulp znajduje się plik gulpfile.js (nasze taski) oraz package.json (plik generujemy automatycznie lub ręcznie 😉 - zawiera on dependencies itd.)

test-gulp/
|  css/
|  less/
|  |  style.less
gulpfile.js -- ad3
package.json -- ad2

Czytaj dalej