Arbeta med filer i Gulp

Gulp gör det möjligt att ta en grupp filer, utföra en operation med denna grupp och sedan placera de ändrade filerna på en ny plats.

För detta är speciella funktioner src och dest avsedda. Låt oss först importera dem från vårt bibliotek:

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

Funktionen src gör det möjligt att erhålla den angivna filen:

javascriptfunction task(cb) {
  return src('src/styles.css'); // return istället för att anropa cb
}

Med denna fil kan man sedan i en kedja utföra olika operationer med funktionen pipe. Schematiskt ser det ut så här:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operation1)
    .pipe(operation2)
    .pipe(operation3)
}

Det sista anropet till pipe i kedjan avslutas med funktionen dest, som anger mappen där resultatet av de utförda operationerna ska skickas:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operation1)
    .pipe(operation2)
    .pipe(operation3)
    .pipe(dest('dist')); // skicka till mappen dist
}

Varje operation utför en manipulation med vår fil. Till exempel kan man först omvandla LESS till CSS, sedan lägga till prefix till CSS-egenskaper, därefter minimera den resulterande CSS:en och så vidare.

För varje operation finns en specifik npm- plugin för Gulp avsedd. Plugins måste installeras och kopplas till vår fil. Vi kommer att ägna oss åt att studera olika plugins i kommande lektioner.

Låt oss för att värma upp ta vår fil och skicka en kopia av den till mappen dist, som om vi hade utfört några operationer på den:

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

Array med sökvägar till filer

Funktionen src kan ta inte en fil som parameter, utan flera på en gång i form av en array:

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