eksponent/node Docker 镜像 - 轩辕镜像 | Docker 镜像高效稳定拉取服务

Dockerfiles-compile-scss-js

镜像概述

Dockerfiles-compile-scss-js是一个提供前端构建工具环境的Docker镜像集合，主要用于SCSS和JS文件的编译处理。该镜像包含Gulp和Grunt两种主流构建工具的配置，并针对不同Node.js版本提供了结构化的环境支持，同时提供集成compass工具的Gulp版本，满足多样化的前端构建需求。

核心功能与特性

• 多构建工具支持：集成Gulp和Grunt两种主流前端构建工具，满足不同项目的构建流程需求。
• 多Node版本适配：在Gulp和Grunt目录下分别设有不同Node.js版本的子文件夹，可根据项目需求选择对应版本的构建环境。
• compass集成：提供Gulp compass版本，在基础Gulp环境上额外集成compass工具，增强SCSS编译能力。
• 结构化目录设计：按构建工具类型（Gulp、Gulp compass、Grunt）划分目录，每个工具目录下再按Node版本细分，便于管理和使用。

使用场景

• 前端项目的SCSS预编译和JS打包处理。
• 需要在不同Node.js版本环境下测试构建流程的场景。
• 需使用compass工具进行SCSS编译的项目。
• 希望快速搭建标准化前端构建环境的开发或CI/CD流程。

目录结构

Dockerfiles-compile-scss-js/
├── Gulp/                # Gulp构建工具环境
│   └── [node-version]/  # 各Node.js版本对应的Gulp配置（如node14、node16等）
├── Gulp compass/        # 集成compass的Gulp环境
│   └── [node-version]/  # 各Node.js版本对应的Gulp compass配置
└── Grunt/               # Grunt构建工具环境
    └── [node-version]/  # 各Node.js版本对应的Grunt配置

使用方法

构建镜像

根据所需构建工具和Node版本，进入对应目录构建镜像。以Gulp（Node 16版本）为例：

bash
# 进入Gulp的Node 16版本目录
cd Gulp/node16

# 构建镜像
docker build -t compile-scss-js:gulp-node16 .

对于Gulp compass或Grunt，操作类似，只需进入对应目录执行构建命令。

运行容器

构建完成后，可通过挂载项目目录运行容器进行构建操作。以Gulp环境为例：

bash
# 运行Gulp容器，挂载当前项目目录并执行构建命令
docker run -v $(pwd):/app -w /app compile-scss-js:gulp-node16 gulp build

对于Grunt环境，将命令中的gulp build替换为grunt build即可。

选择Node版本

根据项目所需的Node.js版本，选择对应子目录进行构建。例如，若项目需要Node 14环境，使用Gulp/node14或Grunt/node14目录下的Dockerfile进行构建。