Gulp oraz Webpack - jak je połączyć?

W ostatnim moim wpisie zaprezentowałem Wam podstawy konfiguracji narzędzia Webpack. Przy okazji tamtego artykułu wspomniałem też, że sam Webpack (w połączeniu ze skryptami NPM) jest w stanie w pełni zastąpić Gulpa. Myślę jednak, że to wcale nie znaczy, że temat użycia Webpacka razem z Gulpem jest już całkowicie przestarzały i nie ma racji bytu. Dlatego też postanowiłem, że dziś przedstawię Wam jak połączyć Gulp oraz Webpack, tak aby możliwe było uruchamianie “bundlowania” Webpackiem z poziomu zadania w Gulpie.

Gulp oraz Webpack - przykładowa konfiguracja

Na potrzeby tego wpisu zakładam, że posiadasz już wiedzę na temat konfiguracji zadań Gulpa. Jeśli nie, daj znać w komentarzu - chętnie napiszę osobny wpis na ten temat ;) Możesz też po prostu zajrzeć do dokumentacji Gulpa. Podstawy konfiguracji Webpack powinieneś już znać z mojego poprzedniego wpisu.

No dobra, w takim razie zobaczmy na kawałku przykładowego kodu, jak połączyć Gulp oraz Webpack:

var
    gulp = require('gulp'),
    gutil = require('gulp-util'),
    webpack = require('webpack');

gulp.task('webpack', function(done) {
  // run webpack
  webpack({
    entry: './app/app.js',
    output: {
      path: __dirname + '/dist',
      filename: 'bundle.js';
    },
    module: {
      loaders: [
        {
          test: /\.js?$/,
          loader: 'babel',
          exclude: /node_modules/
        }
      ]
    }
  }, function(error) {
    var pluginError;

    if (error) {
      pluginError = new gulpUtil.PluginError('webpack', error);

      if (done) {
        done(pluginError);
      } else {
        gulpUtil.log('[webpack]', pluginError);
      }

      return;
    }

    if (done) {
      done();
    }
  });
});

gulp.task('default', ['webpack']);

Więc tak… Na samym początku importujemy trzy moduły node.js, które wcześniej zainstalowaliśmy za pomocą komendy npm. Myślę że, moduły gulp oraz webpack są w tym przypadku więcej niż oczywiste. Natomiast trzeci z nich - gulp-util - pomoże nam za chwilę w śledzeniu błędów zgłaszanych przez Webpack i przekazywaniu ich do Gulpa w trakcie trwania wykonywania zadania.

W kolejnych liniach widzimy definicję zadania Gulp, które nazwane zostało (niespodzianka!) webpack. Jak wiadomo, definiując zadanie w Gulp, jako drugi parametr podajemy funkcję wywołania zwrotnego, która wywołuje to zadanie. W powyższej implementacji po prostu wywołujemy funkcję webpack przekazując jej jako parametr, obiekt zawierający konfigurację. Myślę, że sama konfiguracja Webpacka nie wymaga w tym przypadku komentarza. Jeśli czytałeś mój poprzedni wpis, to na pewno jesteś już z tym tematem zaznajomiony. Jeśli nie, to zachęcam do zapoznania się ze wspomnianym postem lub zajrzenia do dokumentacji.

To co jest bardziej tutaj interesujące to to, że funkcja webpack może przyjmować dodatkowy parametr. Jest to funkcja wywołania zwrotnego, która wywoływana jest kiedy Webpack zakończy działanie - czy to z sukcesem czy też nie. Dzięki temu mamy możliwość przechwycenia tychże ewentualnych błędów Webpacka i przekazania ich do Gulpa do obsługi. Właśnie do tego potrzebny był nam moduł gulp-util. Pozwala on między innymi na zdefiniowanie komunikatów, które Gulp wyświetli na ekranie.

Podsumowanie

W zasadzie to wszystko - dzisiejszy wpis nie na należał do tych specjalinie długich i rozbudowanych… Mam jednak nadzieję, że będzie pomocny. Oczywiście w prawdziwych projektach, powyższa konfiguracja może być znacznie bardziej rozbudowana. W swojej karierze pracowałam z bardzo różnymi front-endowymi stosami technologicznymi. Gulp oraz Webpack to, w dzisiejszych czasach, dwa dość ważne jego elementy, których znajomość na pewno jest kluczowa do zbudowania przyjaznego środowiska pracy z front-endem.