droptica/gulp

docker-gulp 镜像文档

镜像概述

docker-gulp是一个预配置Gulp前端构建工具的Docker镜像，基于Node.js基础镜像构建，旨在提供隔离、一致的前端自动化构建环境。通过容器化方式，避免本地环境依赖冲突，简化前端项目的构建流程，支持在开发、测试及CI/CD场景中快速执行Gulp任务。

核心功能与特性

• Gulp工具集成：内置Gulp CLI及核心依赖，可直接运行各类Gulp任务（如代码编译、文件合并、资源压缩等）。
• 多版本支持：提供不同Gulp版本的镜像标签（如latest对应最新稳定版，4.x指定主版本），适配不同项目的Gulp版本需求。
• 轻量级基础：基于官方Node.js slim镜像构建，体积小巧，启动快速，减少资源占用。
• 环境隔离：容器化运行确保构建环境与宿主环境隔离，避免因本地依赖版本差异导致的构建问题。
• 灵活挂载：支持将宿主项目目录挂载至容器，直接对本地项目文件执行构建操作，构建结果实时同步至宿主。

使用场景

• 本地前端项目构建：开发者无需在本地安装Node.js、Gulp及项目依赖，通过容器快速启动构建流程。
• CI/CD流程集成：作为持续集成/部署 pipeline 的构建步骤，确保跨环境（开发、测试、生产）构建行为一致。
• 多项目并行构建：利用容器隔离特性，同时为不同Gulp版本依赖的项目提供独立构建环境，避免版本冲突。
• 开发环境标准化：团队统一使用指定镜像版本，消除"环境差异导致构建失败"的协作问题。

使用方法与配置说明

基本使用（docker run）

1. 拉取镜像

从Docker仓库拉取指定版本镜像（以latest为例，实际使用时需替换为具体仓库地址，如官方或社区维护的镜像）：

bash
docker pull [镜像仓库地址]/docker-gulp:latest

如需指定Gulp版本，使用标签（如4.0）：

bash
docker pull [镜像仓库地址]/docker-gulp:4.0

2. 运行Gulp任务

进入前端项目根目录（确保目录下存在gulpfile.js及package.json），通过以下命令挂载项目目录并执行Gulp任务：

bash
docker run --rm -v $(pwd):/app -w /app [镜像仓库地址]/docker-gulp:latest gulp [任务名]

参数说明：

• --rm：任务执行完成后自动删除容器，避免残留
• -v $(pwd):/app：将当前目录（宿主项目根目录）挂载至容器内/app目录
• -w /app：设置容器工作目录为/app（即项目根目录）
• [任务名]：替换为实际Gulp任务名（如build、watch，不指定则执行默认任务）

示例1：执行默认Gulp任务

bash
docker run --rm -v $(pwd):/app -w /app [镜像仓库地址]/docker-gulp:latest gulp

示例2：执行指定任务build

bash
docker run --rm -v $(pwd):/app -w /app [镜像仓库地址]/docker-gulp:latest gulp build

docker-compose配置示例

在项目根目录创建docker-compose.yml，定义Gulp服务：

yaml
version: '3'
services:
  gulp-build:
    image: [镜像仓库地址]/docker-gulp:latest
    volumes:
      - ./:/app  # 挂载项目目录
    working_dir: /app  # 设置工作目录
    environment:
      - NODE_ENV=production  # 指定环境变量（可选）
    command: gulp build  # 运行的Gulp任务

启动服务（执行构建任务）：

bash
docker-compose up

环境变量配置

注意事项

• 依赖安装：容器启动时不会自动安装package.json中的项目依赖（除非镜像预配置），需确保宿主机项目目录已通过npm install安装依赖，或在Gulp任务中添加依赖安装步骤。
• 权限问题：若构建生成的文件在宿主机中出现权限异常，可通过-u $(id -u):$(id -g)指定用户ID，避免容器内root用户创建文件导致的权限问题：

  bash
  docker run --rm -u $(id -u):$(id -g) -v $(pwd):/app -w /app [镜像仓库地址]/docker-gulp:latest gulp build
  

• gulpfile路径：确保gulpfile.js（或gulpfile.babel.js）位于项目根目录（挂载的/app目录下），否则Gulp无法识别任务配置。