运行 Gulp 的 Docker 容器运行任务，但在“观看”时不运行

Question

我已将 Gulp 内容放入 Dockerfile 中：

FROM node:14
WORKDIR /app
COPY package*.json ./
COPY gulpfile.js ./
...
RUN npm install
RUN npm install -g gulp
EXPOSE 3000
CMD ["gulp"]

当我运行以下构建并运行它时，它可以工作并生成文件：

docker build . -t webteam/gulp
docker run --rm -it -v ${pwd}/src:/app/src -v ${pwd}/dist:/app/dist -p 3000:3000 webteam/gulp styles

这是 gulpfile 中的

styles

任务：

const styles = () => src(SASS_SRC)
  .pipe(sourcemaps.init())
  .pipe(sass().on('error', sass.logError))
  .pipe(autoprefixer({
    cascade: false,
  }))
  .pipe(sourcemaps.write())
  .pipe(dest('./dist/css'));

这非常有效。

但是，当我运行写入“监视”文件更改的默认任务时，该任务似乎启动正常。 Browsersync 甚至可以从容器到我的主机。它在终端中看起来不错......但没有检测到任何文件更改。

这是我的

default

任务：

exports.default = () => {
  browserSync.init({
    server: {
      baseDir: './dist/',
    },
    startPath: '/homepage.html',
    ghostMode: false,
  });

  // watch the src files and html files for changes
  watch(SASS_SRC, exports.styles);
  watch(JS_SRC, exports.scriptsDev);
  watch(JS_SRC, exports.scriptsProd);

  // watch the dist files, and browser sync when changes
  watch(['./dist/**/*', './demo/**/*']).on('change', browserSync.reload); // TODO remove demo at some stage
};

Docker环境需要什么才能注意到链接目录（src）的文件变化来触发watch功能？

Answer 1

Docker 的文件共享并不总是传播文件系统事件（特别是在 Windows 或 Mac 上），导致依赖这些事件来检测更改的工具失败。

要解决此问题，您可以使用轮询作为文件监视的后备机制。这意味着Gulp将定期检查文件更改，而不是依赖文件系统事件。
这会产生更高的 CPU 使用率，但在 Windows 或 Mac 上的 Docker 容器中工作时，这是一个可靠的解决方法。

您可以通过指定 watch

 选项来修改您的 

Gulp usePolling

 任务

以使用轮询。
那么您的

default

任务将是：

const { watch, series } = require('gulp');
const browserSync = require('browser-sync').create();

// Assuming exports.styles, exports.scriptsDev, and exports.scriptsProd are defined elsewhere

exports.default = () => {
  browserSync.init({
    server: {
      baseDir: './dist/',
    },
    startPath: '/homepage.html',
    ghostMode: false,
  });

  // Enable polling
  const watchOptions = {
    usePolling: true,
  };

  // watch the src and html files for changes with polling
  watch(SASS_SRC, watchOptions, exports.styles);
  watch(JS_SRC, watchOptions, exports.scriptsDev);
  watch(JS_SRC, watchOptions, exports.scriptsProd);

  // watch the dist files, and browser sync when changes
  watch(['./dist/**/*', './demo/**/*'], watchOptions).on('change', browserSync.reload);
};

这引入了带有

watchOptions

的

usePolling: true

对象，该对象作为参数传递给 Gulp 的

watch

方法。