julianxhokaxhiu/mockups-creator

mockups-creator v2 镜像说明

镜像概述

mockups-creator是一个NodeJS应用，通过Grunt工具快速生成静态HTML原型。它旨在帮助开发者以最快速度启动原型项目，提供灵活且强大的生成能力，支持多种开源技术栈，独立于CMS或其他平台。

核心功能

后端功能

• 可自定义的Gruntfile.js配置
• Swig模板引擎（类Twig的Javascript模板）
• 通过JSON文件定制模板数据
• Web字体生成（支持TTF/OTF格式）
• SVG图标生成
• SCSS支持（含源映射）
• CSS自动前缀处理
• CSS压缩（YUI）、JS压缩（Google Closure Compiler）
• 文件修改自动重建+Live Reload
• 静态文件服务器（无需依赖Apache/Nginx）
• 每日自动更新NPM包

前端集成

• jQuery 3.x、Bootstrap 4.x、Fontawesome 4.x、Ion Icons 3.x
• Modernizr + Detectizr（浏览器/设备检测）
• bootstrap-toolkit（JS媒体查询）
• 兼容IE10+及主流浏览器的默认模板

部署与输出

• Rsync部署支持
• TYPO3扩展输出（含Grunt构建脚本）

使用场景

• 快速构建网页原型，验证设计方案
• 开发独立于CMS的静态页面
• 需要自动构建、实时预览的前端项目
• 生成可部署的静态资源或TYPO3扩展

配置说明

通过项目内的app.json文件配置项目参数，主要包括：

• output: 输出路径（默认_release）
• livereload: 实时重载端口/主机（默认35729/localhost）
• server: 静态服务器端口（-1表示禁用）
• deploy: Rsync远程部署路径/主机
• typo3: TYPO3扩展输出路径及后缀

Docker部署示例

生成新项目

bash
docker run -v $(pwd)/my-proto:/app -w /app julianxhokaxhiu/mockups-creator \
  sh -c "npm install && grunt make --app=my-proto"

开发模式（实时预览）

bash
docker run -v $(pwd)/my-proto:/app -w /app -p 35729:35729 -p 8080:8080 julianxhokaxhiu/mockups-creator \
  grunt build --app=my-proto

部署到远程服务器

bash
docker run -v $(pwd)/my-proto:/app -w /app julianxhokaxhiu/mockups-creator \
  grunt deploy --app=my-proto