Wyszukiwanie w witrynie

Gulp — zestaw narzędzi do automatyzacji bolesnych zadań programistycznych

Gulp to mały zestaw narzędzi, który automatyzuje powtarzalne zadania. Te powtarzalne zadania to zazwyczaj kompilacja plików CSS, JavaScript lub zasadniczo, gdy używasz frameworka obsługującego niestandardowe pliki JavaScript/CSS, będziesz chciał użyć narzędzia do automatyzacji, które przechwytuje te pliki, pakuje je razem i kompiluje wszystko, aby Twoja przeglądarka mogła łatwo zrozumieć To.

Gulp przydaje się do automatyzacji następujących zadań:

  • Kompilacja plików JS i CSS
  • Odświeżanie strony przeglądarki podczas zapisywania pliku
  • Uruchom test jednostkowy
  • Analiza kodu
  • Kopiowanie zmodyfikowanych plików do katalogu docelowego

Aby śledzić wszystkie pliki potrzebne do utworzenia pliku gulp, opracowania narzędzia automatyzacji lub automatyzacji zadań, musisz wygenerować plik package.json. Plik zasadniczo zawiera wyjaśnienie tego, co znajduje się w twoim projekcie, jakich zależności potrzebujesz, aby twój projekt działał.

W tym samouczku dowiesz się, jak zainstalować Gulp i jak zautomatyzować niektóre podstawowe zadania w swoich projektach. Będziemy używać npm – co oznacza menedżera pakietów węzłów. Jest instalowany z Node.js i możesz sprawdzić, czy masz już zainstalowany Nodejs i npm za pomocą:

node --version
npm --version

Jeśli nie masz go jeszcze zainstalowanego w swoim systemie, polecam zapoznać się z tutorialem: Zainstaluj najnowszą wersję Nodejs i NPM w systemach Linux.

Jak zainstalować Gulpa w systemie Linux

Instalację gulp-cli można zakończyć za pomocą npm za pomocą następującego polecenia.

npm install --global gulp-cli

Jeśli chcesz zainstalować moduł gulp lokalnie (tylko dla bieżącego projektu), możesz skorzystać z poniższych instrukcji:

Utwórz katalog projektu i nawiguj w nim:

mkdir myproject
cd myproject

Następnie użyj następującego polecenia, aby zainicjować projekt:

npm init

Po uruchomieniu powyższego polecenia zostaniesz poproszony o serię pytań, aby nadać projektowi nazwę, opis wersji i inne. Na koniec potwierdź wszystkie podane informacje:

Teraz możemy zainstalować w naszym projekcie pakiet gulp za pomocą:

npm install --save-dev gulp

Opcja --save-dev informuje npm, aby zaktualizował plik package.json o nowe devDependency.

Pamiętaj, że devDependency należy rozwiązać podczas programowania, natomiast Zależności w czasie wykonywania. Ponieważ gulp jest narzędziem pomagającym nam w rozwoju, należy go rozwiązać na etapie programowania.

Utwórz plik Gulp

Teraz utwórzmy plik gulp. Zadania, które chcemy uruchomić, znajdą się w tym pliku. Jest ładowany automatycznie po użyciu polecenie gulp. Za pomocą edytora tekstu utwórz plik o nazwie gulpfile.js. Na potrzeby tego poradnika stworzymy prosty test.

Możesz wstawić następujący kod do swojego gulpfile.js:

var gulp = require('gulp');

gulp.task('hello', function(done) {
        console.log('Hello world!');
        done();
});

Zapisz plik i teraz spróbuj go uruchomić za pomocą:

gulp hello

Powinieneś zobaczyć następujący wynik:

Oto co robi powyższy kod:

  • var gulp=require(‘gulp’); – importuje moduł gulp.
  • gulp.task(‘hello’,function(done) – definiuje zadanie, które będzie dostępne z linii poleceń.
  • console.log(‚Witaj świecie!’); – po prostu wyświetla na ekranie „Witaj świecie!”.
  • done(); – używamy tej funkcji wywołania zwrotnego, aby poinformować gulp, że nasze zadania zostały zakończone.

Oczywiście powyższy przykład był tylko przykładem pokazującym, jak można zorganizować plik gulpfile.js. Jeśli chcesz zobaczyć dostępne zadania w swoim gulpfile.js, możesz użyć następującego polecenia:

gulp --tasks

Wtyczki Gulpa

W Gulp dostępnych jest tysiące wtyczek, z których każda zapewnia inną funkcjonalność. Możesz je sprawdzić na stronie wtyczek Gulp.

Poniżej użyjemy wtyczki minify-html w bardziej praktycznym przykładzie. Za pomocą poniższej funkcji możesz zminimalizować pliki HTML i umieścić je w nowym katalogu. Ale najpierw zainstalujemy wtyczkę gulp-minify-html:

npm install --save-dev gulp-minify-html

Możesz sprawić, że Twój gulpfile.js będzie wyglądał tak:

cat gulpfile.js
Przykładowe wyjście
// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");

// task
gulp.task('minify-html', function (done) {
    gulp.src('./src/*.html') // path to your files
    .pipe(minifyHtml())
    .pipe(gulp.dest('./dest'));
    done()
});

Następnie możesz zminimalizować pliki HTML za pomocą następujących poleceń.

gulp minify-html
du -sh /src dest/

Wniosek

Gulp to przydatny zestaw narzędzi, który może pomóc Ci zwiększyć produktywność. Jeśli jesteś zainteresowany tym narzędziem, gorąco polecam sprawdzenie jego strony z dokumentacją, która jest dostępna tutaj.