- The headers we don’t want by Andrew Betts | May 10, 2018
Mois : mai 2018
[Docker] Utiliser node, npm, grunt, gulp, webpack, bower, yarn, etc.
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:
Avec Foundation Zurb Template
Création de la Dockerfile
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"] |
Builder le container
Pour builder le container (que je vais appeler « fzt »), j’exécute la commande: docker build -t fzt .
Exécuter une commande à l’intérieur du container: récupérer les paquets NPM
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.
Exécuter une commande à l’intérieur du container: yarn start
Les 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!
Avec KNACSS
Création de la Dockerfile
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 |
Builder le container
Pour builder le container (que je vais appeler « test »), j’exécute la commande: docker build -t test .
Exécuter une commande à l’intérieur du container
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.
Expériences plus anciennes
Avec une Dockerfile
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 . |
- copy the contents of the example directory to your project.
- change the gulpfile.js to meet your requirements (sass or less, copy included?)
- change the gulp_config.js to meet your requirements
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
Avec Docker Compose
- Using Docker Compose for NodeJS Development
- docker-compose-nodejs-examples – Express app with Gulp.js build system
- Running gulp in Docker compose – does not create files
- Develop on Docker Without Slow Dependencies – docker, containers, nodejs, gulp, nodemon, volumes
- docker-node-gulp – fichiers très proches de ce qu’on trouve dans Foundation
- Comment installer gulp sur un docker avec docker-compose
- Here’s my minimal setup to write a piece of typescript code
- An Exhaustive Guide to Writing Dockerfiles for Node.js Web Apps
- A basic workflow for Docker (Compose) with MEAN stack – dev/prod
Bonus:
How To Remove Docker Images, Containers, and Volumes
Remove all images and containers
|
1 2 3 4 5 |
#!/bin/bash # Delete all containers docker rm $(docker ps -a -q) # Delete all images docker rmi $(docker images -q) |
- Workflow front-end : un nouvel espoir (partie 1), Workflow front-end : un nouvel espoir (partie 2), Workflow front-end : un nouvel espoir (partie 3) et versions PDF pour la postérité troopers.agency-Workflow front-end un nouvel espoir partie 1, troopers.agency-Workflow front-end un nouvel espoir partie 2, troopers.agency-Workflow front-end un nouvel espoir partie 3.
- Utiliser NPM/Gulp sous Docker (18 janvier 2018). petegore.fr-Utiliser NPMGulp sous Docker (PDF).
- docker-npm sous Git. node, npm, bower, grunt, gulp, yarn, etc.