- The headers we don’t want by Andrew Betts | May 10, 2018
Docker for Gulp Build Tasks et version PDF pour la postérité. Cet article m’a permis de mettre en place un Docker pour compiler mes sources Front-End via NPM (workflow utilisant Bower et Gulp). Et ça marche!!!
Mes sources pour ce billet:
Dans home/intlangf/docker/ je fais un git clone https://github.com/zurb/foundation-zurb-template.git fzt (pour récupérer les sources du framework CSS Foundation).
Ensuite, cd fzt pour entrer dans le dossier créé par Git. Puis touch Dockerfile et vim Dockerfile pour créer et éditer un fichier Dockerfile dans lequel je place le code ci-dessous:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
FROM ubuntu:16.04 WORKDIR /home/app/ COPY . /home/app/ ADD setup_8.x /tmp/setup_8.x RUN bash /tmp/setup_8.x RUN apt-get update RUN apt-get install -y build-essential RUN apt-get install -y nodejs RUN /usr/bin/npm install -g yarn RUN /usr/bin/npm install -g gulp RUN /usr/bin/npm install -g babel-core RUN /usr/bin/npm install -g babel-preset-env RUN /usr/bin/npm install -g babel-register RUN /usr/bin/npm install -g babel-loader RUN /usr/bin/npm install -g gulp-babel RUN yarn #VOLUME ["/home/app/"] CMD ["yarn", "start"] |
Pour builder le container (que je vais appeler « fzt »), j’exécute la commande: docker build -t fzt .
Commande à exécuter obligatoirement avant toute autre pour récupérer les dépendances NPM du projet (dossier node_modules) en local.
Pour exécuter npm install à l’intérieur de mon container (et ainsi récupérer les dépendances node propres au projet Foundation en local sur ma machine, à la racine du dossier home/intlangf/docker/fzt/ où se trouve le fichier package.json), j’exécute la commande docker run --rm -v ~/docker/knacss:/home/app/ fzt npm install.
yarn startLes sources dans Foundation se compilent via la commande yarn start qu’on exécute ainsi: docker run --rm -v ~/docker/knacss:/home/app/ fzt.
Ici on ne précise pas de commande à la suite du nom de l’image Docker, car la commande par défaut dans le fichier Dockerfile est CMD ["yarn", "start"].
Résultat: un dossier dist/ est généré en local avec les sources CSS, JS, etc, compilées via notre image Docker!
Dans home/intlangf/docker/ je fais un git clone https://github.com/alsacreations/KNACSS.git knacss (pour récupérer les sources du framework CSS Knacss).
Ensuite, cd knacss pour entrer dans le dossier créé par Git. Puis touch Dockerfile et vim Dockerfile pour créer et éditer un fichier Dockerfile dans lequel je place le code ci-dessous:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
# Use an official node runtime as a parent image FROM node:10 # Set the working directory to /home/app WORKDIR /home/app/ # Bundle app source COPY . /home/app/ # If you are building your code for production # RUN npm install --only=production RUN npm install # Make port 8000 available to the world outside this container EXPOSE 8000 CMD npm run dev |
Pour builder le container (que je vais appeler « test »), j’exécute la commande: docker build -t test .
Pour exécuter npm install à l’intérieur de mon container (et ainsi récupérer les dépendances node propres au projet Knacss en local sur ma machine, à la racine du dossier home/intlangf/docker/knacss/ où se trouve le fichier package.json), j’exécute la commande docker run --rm -v ~/docker/knacss:/home/app/ test npm install.
Container with ready-to-run gulp-tasks sur hub.docker.com.
|
1 2 3 |
git clone https://github.com/ipunkt/docker-gulp-tasks.git; cd docker-gulp-tasks; docker build -t ipunktbs/gulp-tasks . |
4. make the gulp-File executable
Well you can make it by doing as chmod +x filename.sh so it will execute when you call it will ./filename.sh.
5. run ./gulp build:dev or ./gulp watch
see gulp running for you, without having to worry with nodejs, module dependencies, complex tasks configuration
How To Remove Docker Images, Containers, and Volumes
|
1 2 3 4 5 |
#!/bin/bash # Delete all containers docker rm $(docker ps -a -q) # Delete all images docker rmi $(docker images -q) |