Gulp Watch Task Not Working With Docker

Docker Hub
1

Hi friends :slight_smile:

I’m trying to run a gulp watch task in my dockerfile and gulp isn’t catching when my files are getting changed.

Quick Notes:

  • This set up works when I use it for my locally hosted wordpress installs

  • The file changes reflect in my docker container according to pycharm’s docker service

  • Running the “styles” gulp task works, it’s just the file watching that does not

  • It’s clear to me that there’s some sort of disconnect between how gulp watches for changes, and how Docker is letting that happen.

Github link

Here’s someone else successfully compiling sass

[Gulpfile Excerpt]

export const watchForChanges = () => {

  watch('scss-js/scss/**/*.scss', gulp.series('styles'));
  watch('scss-js/js/**/*.js', scripts);
  watch('scss-js/scss/*.scss', gulp.series('styles'));
  watch('scss-js/js/*.js', scripts);
  // Try absolute path to see if it works
  watch('scss-js/scss/bundle.scss', gulp.series('styles'));
}
...
// Compile SCSS through styles command
export const styles = () => {
    // Want more than one SCSS file? Just turn the below string into an array
  return src('scss-js/scss/bundle.scss')
      // If we're in dev, init sourcemaps. Any plugins below need to be compatible with sourcemaps.
    .pipe(gulpif(!PRODUCTION, sourcemaps.init()))
      // Throw errors
    .pipe(sass().on('error', sass.logError))
      // In production use auto-prefixer, fix general grid and flex issues.
    .pipe(
      gulpif(
        PRODUCTION,
        postcss([
          autoprefixer({
            grid: true
          }),
          require("postcss-flexbugs-fixes"),
          require("postcss-preset-env")
        ])
      )
    )
    .pipe(gulpif(PRODUCTION, cleanCss({compatibility:'ie8'})))
      // In dev write source maps
    .pipe(gulpif(!PRODUCTION, sourcemaps.write()))
      // TODO: Update this source folder
    .pipe(dest('blog/static/blog/'))
    .pipe(server.stream());
}
...
export const dev = series(parallel(styles, scripts), watchForChanges);

Docker-Compose:

version: "3.7"

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8002:8000"
      - "3001:3001"
      - "3000:3000"
    volumes:
      - ./django_project:/django_project
    command: >
      sh -c "python manage.py runserver 0.0.0.0:8000"
    restart: always
    depends_on:
      - db
  db:
    image: postgres
    environment:
      POSTGRES_PASSWORD: example1
    ports:
      - "5432:5432"
    restart: always

Dockerfile:

ROM python:3.8-buster
MAINTAINER Austin

ENV PYTHONUNBUFFERED 1

# Install node
RUN apt-get update && apt-get -y install nodejs
RUN apt-get install npm -y

# Replace shell with bash so we can source files
RUN rm /bin/sh && ln -s /bin/bash /bin/sh

# Update Node
# Install base dependencies
RUN apt-get update && apt-get install -y -q --no-install-recommends \
        apt-transport-https \
        build-essential \
        ca-certificates \
        curl \
        git \
        libssl-dev \
        wget

ENV NVM_DIR /usr/local/nvm
ENV NODE_VERSION 12.14.0

WORKDIR $NVM_DIR

RUN curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash \
    && . $NVM_DIR/nvm.sh \
    && nvm install $NODE_VERSION \
    && nvm alias default $NODE_VERSION \
    && nvm use default

ENV NODE_PATH $NVM_DIR/versions/node/v$NODE_VERSION/lib/node_modules
ENV PATH      $NVM_DIR/versions/node/v$NODE_VERSION/bin:$PATH


# What PIP installs need to get done?
COPY django_project/requirements.txt /requirements.txt
RUN pip install -r /requirements.txt



# Copy local directory to target new docker directory
RUN mkdir -p /django_project
WORKDIR /django_project
COPY ./django_project /django_project


# Make Postgres Work
EXPOSE 5432/tcp


WORKDIR /django_project

RUN npm install gulp-cli -g

What do you think could be going on?

2

EDIT: Gulp “Watch” doesn’t work on windows with a mounted volumes because no “file change” event is sent. My current solution is to run Docker Windows Volume Watcher on my local machine while I see if I can integrate this solution into my code.

3

The only way I could get this to work is to use usePolling like below

gulp.watch('./**/*', {interval: 1000, usePolling: true}, gulp.series('superTask'));
1 Like
4

yes, use the polling option in watch options it’s work…
thankyouu