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:

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:

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. copy the contents of the example directory to your project.
  2. change the gulpfile.js to meet your requirements (sass or less, copy included?)
  3. 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

Bonus:

How To Remove Docker Images, Containers, and Volumes

Remove all images and containers