Gulp

Snippets » JavaScript » NodeJS » Gulp » Gulp

Gulp er et build-system til NodeJS, der kan automatisere en masse processer. Det kan f.eks. være at samle stylesheets, js-filer og lignende, transpile dem til understøttelse i flere browsere og minifie dem.

Gulp er ret nemt at bruge og der findes, ifølge https://gulpjs.com/ , mere end 4.000 plugins til gulp.

Der findes en række alternativer til Gulp. Her bl.a. Grunt og Webpack

Installation

Gulp installeres både globalt og i projektmappen. Globalt skal Gulp kun installeres 1 gang, hvor det skal installeres 1 gang for hvert projekt i projektmappen. Det kræver, at enten npm init eller yarn init allerede er kørt for at installere den lokale version.

Med npm

npm i gulp-cli -g
npm i gulp -D

Med yarn

yarn add gulp-cli
yarn add gulp

Plugins

Der findes mere end 4.000 plugins til Gulp. Plugins er de packages, der gør det man vil have gjort ved filer. F.eks. kan pluginnet gulp-concat bruges til at samle flere filer i en.

Alle plugins installeres separat

npm i gulp-concat -D

gulpfile.js

gulpfile.js skal oprettes i roden af projektmappen. Det er i denne fil indstillinger for Gulp i projektet sættes.

//gulpfile.js
const
  gulp = require("gulp"),
  concat = require("gulp-concat")
;

//kilder, der skal bruges i processen
const sources = {
  css: "./src/css/**/*.css"
}

//processen, der skal køre
gulp.task("default", function(){
  //kilderne hentes ind i denne task
  return gulp.src(sources.css)
    //den samlede fil oprettes med navnet core.css
    .pipe(concat("core.css"))
    //filen gemmes i mappen dist
    .pipe(gulp.dest("./dist"))
});

Da denne task er navngivet “default” kan man nøjes med at skrive kommandoen gulp i shell’en. Havde man navngivet den core-styles skulle man køre Gulp med kommandoen gulp core-styles.

Hvis man ønsker at bruge flere plugins i samme task kan man bruge .pipe flere steder. Læs dokumentationen for hvert plugin ved npm eller yarn

ES6+ syntaks

Ønsker man at bruge ES6+ syntaks er der enkelte ændringer man laver. Bl.a. skal Babel installeres

npm i gulp-babel babel-core babel-preset-env babel-polyfill -D

gulpfile.js skal ændres til gulpfile.babel.js og den ser lidt anderledes ud:

import {src, dest, watch, parallel, series} from 'gulp'
import concat from 'gulp-concat'

const sources = {
  css: "./src/css/**/*.css"
}

export const default = () => src(sources.css)
  .pipe(concat("core.css"))
  .pipe(dest("./dist"))

Her efter kan man køre Gulp som vist tidligere

Flere plugins

Da der findes mere en 4.000 plugins til gulp er det langt fra sikkert, at man kommer til at bruge dem alle. Men her er flere lister over Gulp-plugins andre bruger:

</> Snippets