Praca z plikami w Gulp

Gulp pozwala pobrać grupę plików, wykonać na tej grupie pewną operację, a następnie umieścić zmodyfikowane pliki pod nowym adresem.

Służą do tego specjalne funkcje src i dest. Najpierw zaimportujmy je z naszej biblioteki:

javascriptlet {src, dest} = require('gulp');

Funkcja src pozwala uzyskać określony plik:

javascriptfunction task(cb) {
  return src('src/styles.css'); // return zamiast wywołania cb
}

Następnie na tym pliku można wykonywać po kolei różne operacje za pomocą funkcji pipe. Schematycznie wygląda to następująco:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operacja1)
    .pipe(operacja2)
    .pipe(operacja3)
}

Ostatnie wywołanie pipe w łańcuchu kończy się funkcją dest, określającą folder, do którego trafi wynik przeprowadzonych operacji:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operacja1)
    .pipe(operacja2)
    .pipe(operacja3)
    .pipe(dest('dist')); // wyślemy do folderu dist
}

Każda operacja wykonuje pewną manipulację na naszym pliku. Na przykład, można najpierw przekształcić LESS w CSS, następnie dodać prefiksy do właściwości CSS, potem zminimalizować otrzymany CSS i tak dalej.

Dla każdej operacji przeznaczona jest własna wtyczka npm dla Gulpa. Wtyczki należy instalować i podłączać do naszego pliku. Zajmiemy się nauką różnych wtyczek w kolejnych lekcjach.

Na rozgrzewkę weźmy nasz plik i wyślijmy jego kopię do folderu dist, tak jakbyśmy wykonali na nim jakieś operacje:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(dest('dist'));
}

Tablica ścieżek do plików

Funkcja src jako parametr może przyjmować nie jeden plik, a od razu kilka w postaci tablicy:

javascriptfunction task(cb) {
  let files = [
    'src/styles1.css',
    'src/styles2.css'
  ];
  
  return src(files)
    .pipe(dest('dist'));
}