Git Product home page Git Product logo

docker-frontend's Introduction

Dockerfile for any gulp & gulp-sass ruby-free Drupal theme.

Recommended usage is pull container from the skilldlabs/frontend Docker Hub

docker pull skilldlabs/frontend

Then add shell alias

alias front="docker run --rm -it -v $(pwd):/work skilldlabs/frontend"

Run commands within theme directory with package.json file.

  • Run gulp by default - front
  • Update local node_modules - front npm update
  • Run watch task - front gulp watch (to stop container use separate console)

Also alias could have user mapping to create files owned by current user

docker run --rm -it -v $(pwd):/work -u www-data:www-data skilldlabs/frontend gulp watch

Build local container

docker build -t front latest

Then add shell alias including browsersync ports(3000 for site and 3001 for browsersync UI)

alias n='docker run -p 3000:3000 -p 3001:3001 --rm -it -v $(pwd):/work front '

Finally use for build

  • n npm update
  • n gulp watch

Known issues: Gulp watch is not interupable so use docker stop <hash> from other console Gulp watch will not reload browser in this case cause of ports issue(localhost required).

For old projects managed with ruby and gems use tag omega_4_3 (for compass 0.12) and omega_4_4 (for compass 1+)̨. For 4_3:

alias omega_4_3='docker run --rm -it -v $(pwd):/work skilldlabs/frontend:omega_4_3 '

then go to theme folder and run:

omega_4_3

it will execute "compass compile -e production -s compact" Or you can use "omega_4_3 compass watch" etc. Same for 4_4

docker-frontend's People

Contributors

andriyun avatar andypost avatar finnsky avatar iberdinsky-skilld avatar koskinpark avatar pabloguerino avatar roni5 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.