Pakiety kilku łyków na początek

Oprogramowanie takie jak Gulp i inne narzędzia nie są nowe. Dla tych, którzy nie używali ich wcześniej, rozpoczęcie pracy może być trochę trudne (ale tak naprawdę nie powinno być).

W porównaniu z narzędziami takimi jak CodeKit (które nadal lubię i polecam, w zależności od projektu), mają one trochę więcej narzutu na ich konfigurację, konfigurację i gotowość do pracy.

Ale kiedy już to wszystko skonfigurujesz, może to być naprawdę przydatne w rozproszonym zespole, niezależnie od systemu operacyjnego, i może pomóc w ulepszeniu procesu kompilacji.

Nie taki jest jednak cel postu. Zamiast tego, oto lista kilku pakietów na początek.

Pomyśl o nich w ten sposób: jeśli szukasz sposobów na pracę z Sass, JavaScript i optymalizacją obrazów, to są dobre biblioteki.

Pakiety łyków na początek

Zanim przejdziemy do każdego z poniższych pakietów, chcę zauważyć, że ważne jest, aby przeczytać każdą z linkowanych stron. Dokumentacja pomaga przejść przez opcje oferowane przez biblioteki, których nie pokazuje podany przeze mnie kod.

Oznacza to, że nie należy po prostu kopiować i wklejać tego, co podałem. Użyj go jako punktu wyjścia, ale przeczytaj również dokumentację. Możesz nie znaleźć nic nowego.

Z drugiej strony może się okazać, że istnieją opcje dostosowywania konkretnego projektu.

1 Sass

Możesz zdecydować się na współpracę z Less (tak naprawdę nie jestem ani tu, ani tam), ale mam tendencję do faworyzowania Sassa. Dlatego używam biblioteki gulp-sass, specjalnie do kompilowania plików Sass do CSS.

Zwykle mam  katalog asset, aw tym katalogu znajdują się podkatalogi dla obrazów, stylów i skryptów.

W  katalogu styles mam dwa podkatalogi:

1. scss
2. css

Trzymam wszystkie moje pliki SCSS w odpowiednim katalogu, a następnie używam gulp-sass do wyprowadzania skompilowanych plików do CSS.

gulp.task('sass', function(){
  return gulp.src('assets/styles/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('assets/styles/css'))
});

Stamtąd kolejkuję pliki CSS za pomocą niezbędnej funkcji WordPress API.

2 Minimalizacja JavaScript

W tym momencie korzyści z minifikacji plików JavaScript zostały udowodnione raz za razem, więc nie zamierzam dalej omawiać tej kwestii.

Jest kilka pakietów, które wypróbowałem, ponieważ dotyczą one pracy z minifikacją JavaScript, a gulp-uglify jest tym, którego używam najbardziej.

Przypomnij sobie z poprzedniej sekcji, że mam swój katalog assetów, a w nim podkatalog skryptów. Ten katalog zawiera jeden własny podkatalog: dev.

Biorę pliki JavaScript znajdujące się w dev i wyprowadzam je do katalogu głównego  katalogu scripts.

gulp.task('minify-js', function() {
  return gulp.src('assets/scripts/dev/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('assets/scripts'));
});

Stamtąd, tak jak powyżej, kolejkuję je za pomocą tej samej funkcji API WordPress.

3 Optymalizacja obrazu

Wreszcie, jedna rzecz, która może pomóc w szybkim wczytaniu stron, to zapewnienie optymalizacji zasobów graficznych.

Oczywiście, istnieje kilka narzędzi, których możesz użyć ręcznie, aby to zrobić, ale jeśli często dodajesz, zmieniasz lub modyfikujesz zasoby graficzne i chcesz zautomatyzować proces kompilacji optymalizacji, polecam użycie gulp-imagemin.

[obraz]

Istnieje kilka zależności dla tej konkretnej biblioteki, więc musisz się upewnić, że są one również uwzględnione. Obejmują one

• obraz-gifsicle,
• imagein-jpegtran,
• imagein-optipng,
• imagein-svgo.

Można je ręcznie dodać do plików konfiguracyjnych, zainstalować z wiersza poleceń lub w inny sposób. Niezależnie od tego upewnij się, że je masz, zanim spróbujesz zoptymalizować obrazy.

gulp.task('image-optimization', function() {
    return gulp.src('assets/images/*')
      .pipe(imagemin())
      .pipe(gulp.dest('assets/images'))
  }
);

Zauważ z powyższego kodu (i tego, o czym wspomniałem wcześniej), że mój katalog obrazów znajduje się w zasobach, więc po uruchomieniu zadania, jak wspomniano powyżej, zoptymalizuje on dowolny z obsługiwanych typów obrazów w tej lokalizacji.

Pliki pakietów, pliki Gulp i wszystko inne?

Jeśli jesteś nowicjuszem w Gulp, Node lub innych systemach kompilacji, jest trochę więcej do omówienia, jeśli chodzi o instalowanie i konfigurowanie Node i Gulp.

Zdecydowałem się na razie to pominąć, ponieważ istnieje wiele dokumentacji na ten temat, ale być może przyjrzę się temu, czego używamy za każdym razem, gdy włączamy to do naszych projektów.