loading...

Gulp Build-Prozess in einem Docker-Container

Markus Meier Gulp, Docker

Wie kann man den Gulp-Build-Prozess so vereinheitlichen, dass er auf jedem Computer läuft

Wir hatten/haben das Problem, dass in unserer Firma die unterschiedlichsten Systeme und Setups laufen. Somit war eine Vereinheitlichung der lokalen Umgebungen fast nicht machbar.
Dank Docker kann man aber ein Umgebung schaffen, die für alle gleich ist, egal, welches System man hat.

So haben wir einen minimalen Docker-Container gebaut, um Gulp-Build-Prozesse laufen zu lassen.

Dockerfile
FROM alpine:latest

MAINTAINER Markus Meier

WORKDIR /opt

RUN apk add --no-cache make
RUN apk add --no-cache gcc
RUN apk add --no-cache g++
RUN apk add --no-cache git
RUN apk add --no-cache python2
RUN apk add --no-cache yarn
RUN /usr/bin/yarn global add gulp

VOLUME ["/opt"]
CMD ["gulp", "build"]
Der Container basiert auf Alpine Linux, mit einem minimalen Setup der nötigsten Libs




Als Unterstützung hier das package.json für die gängigsten gulp-plugins, die wir regelmässig benutzen.

package.json
{
 "name": "demotemplate",
 "version": "0.0.1",
 "description": "Demo Template",
 "repository": {
   "type": "git",
   "url": "..............git"
 },
 "author": "Markus Meier",
 "devDependencies": {
   "browser-sync": "^2.8.2",
   "del": "^1.1.1",
   "gulp": "^3.9.0",
   "gulp-autoprefixer": "^2.2.0",
   "gulp-clean-css": "^3.0.3",
   "gulp-concat": "^2.2.0",
   "gulp-file-include": "^0.9.0",
   "gulp-html-replace": "^1.4.5",
   "gulp-htmlmin": "^2.0.0",
   "gulp-if": "^1.2.5",
   "gulp-imagemin": "^3.0.1",
   "gulp-load-plugins": "0.10.0",
   "gulp-plumber": "^1.1.0",
   "gulp-rename": "^1.2.2",
   "gulp-sass": "^2.1.0",
   "gulp-sourcemaps": "^1.6.0",
   "gulp-task-listing": "^1.0.0",
   "gulp-uglify": "^1.5.3",
   "gulp-util": "^2.2.14",
   "panini": "^1.3.0",
   "run-sequence": "^1.2.1",
   "yargs": "^3.8.0"
 }
}


Um die Befehle zu vereinheitlichen, benutzen wir ein Makefile.

Makefile
MAKEFLAGS += --silent

ls:
    sh -c "echo; $(MAKE) -p no_targets__ | awk -F':' '/^[a-zA-Z0-9][^\$$#\/\\t=]*:([^=]|$$)/ {split(\$$1,A,/ /);for(i in A)print A[i]}' | grep -v '__\$$' | grep -v 'Makefile'| sort"

#############################
# Docker machine states
#############################

up:
    docker build -t gulp-builder .

install:
    docker run --rm -v `pwd`:/opt gulp-builder yarn install

#############################
# Gulp
#############################

gulp: gulp-build

gulp-build:
    docker run --rm -v `pwd`:/opt gulp-builder gulp build

gulp-watch:
    docker run -i -t --rm -p 3000:3000 -v `pwd`:/opt gulp-builder gulp watch

gulp-clean:
    docker run --rm -v `pwd`:/opt gulp-builder gulp clean

#############################
# Argument fix workaround
#############################
%:
    @:


  • make ls: Liste alle make Befehle (nach bedarf)
  • make up: Erstellen des Docker-Containers (einmalig)
  • make install: yarn install um alle nötigen libraries zu holen (einmalig)
  • make gulp ...: Diverse build Befehle starten (nach bedarf)


Den effektiven Gulp-Build habe ich hier nicht abgebildet, da sich dieser je nach Projekt sehr unterscheidet.

Mehr

  • Valiant Geschäftsbericht 2017
  • Valiant Geschäftsbericht 2016
  • Valiant Geschäftsbericht 2015
  • Valiant Geschäftsbericht 2014
  • Valiant Geschäftsbericht 2013

Valiant Geschäftsbericht 2017

Markus Meier projekt, kampagne

Wir freuen uns, nun schon zum 5. Mal in Folge den Online-Geschäftsbericht der Valiant Bank AG gemeinsam mit HIGHFIVE realisiert zu haben. Valiant ist eine unabhängige, ausschliesslich in der Schweiz tätige Retail- und KMU-Bank, die sich zum Ziel gesetzt hat ein einfach verständliches Angebot in allen Finanzfragen anzubieten. Diese Kundennähe spiegelt sich auch im Online Report wider, der unter anderem aufgrund seiner Benutzerfreundlichkeit bereits im Schweizer Geschäftsberichte-Rating 2014 als "Newcomer des Jahres" ausgezeichnet wurde und im darauf folgenden Jahr den 2. Platz im Bereich „Design Online“ (Usability, Informationsarchitektur etc.) ebenfalls in der Bewertung aller Schweizer Online-Geschäftsberichte erreichte.

Neben den Online-Geschäftsberichten der Valiant Bank AG haben wir in den vergangenen Jahren noch etliche andere Online Reports realisiert, bspw. für Zalando, Greenpeace und DATEV. Wer daher Bedarf an einem erfolgreich realisierten Online-Geschäftsbericht hat, darf sich vertrauensvoll an benaja - web solutions wenden.

Valiant 2017
Zalando 2015 / DATEV 2015 / Greenpeace Schweiz 2014

  • QUO AG
  • QUO AG
  • ES Agro Consulting

QUO AG und ES Agro Consulting

Tobias Donath TYPO3, projekt

Für die QUO AG aus dem Kanton Zürich (Schweiz) haben wir die von uns und der Highfive Agentur vor einigen Jahren gebaute Website einem TYPO3 Update plus Redesign unterzogen. QUO ist spezialisiert auf die Vorentwicklung von Produkten, Verfahren und Technologien von der Bedürfnisanalyse bis zum Prototyp.

Eine neue Website mit dem CMS TYPO3 haben wir für ES Agro Consulting aus dem Kanton Bern (Schweiz) entwickelt. ES Agro Consulting bietet unabhängige Dienstleistungen in den Bereichen Unternehmensberatung, Nachfolgeregelungen und Hofübernahmen, Treuhand, Projektbegleitung sowie Gutachtertätigkeiten.

QUO AG
ES Agro Consulting

Ältere Posts

phone +49 3581 3229016 - fax +49 3581 6847164

Rauschwalder Straße 17, 02826 Görlitz