Mimosa-fubumvc 是一种基于 Node.js 的模块化工具，主要用于 Frontend 相关任务的自动化构建，包括但不限于 JavaScript/CSS/HTML 文件合并压缩、图片处理、静态文件发布等工作。本篇文章将介绍 mimosa-fubumvc 使用方法及相关注意事项。
安装
使用 mimosa-fubumvc 首先需要安装 Node.js 环境，并在命令行工具中运行以下命令进行全局安装：
npm install -g mimosa-fubumvc
安装成功后，可以在命令行工具中输入 mimosa 或 mim 测试是否安装成功。
使用
创建项目
使用 mimosa-fubumvc 可以快速创建一个前端项目模板。在命令行中运行以下命令：
mimosa create myproject其中 myproject 为项目名称，创建成功后，文件目录如下：
myproject /-- mimosa-config.js |-- package.json |-- source /-- index.html |-- images |-- javascripts |-- stylesheets |-- spec |-- vendor
其中，mimosa-config.js 文件为 mimosa 配置文件，package.json 文件为项目依赖清单，source 目录为项目源码存放目录，spec 目录为项目测试脚本存放目录，vendor 目录为第三方库存放目录。
运行项目
进入项目目录，运行以下命令即可启动项目：
mimosa watch --server
该命令会监听项目变动，自动编译构建并加载项目页面。如果需要同时开启本地服务器，可以加上 --server 参数，默认为 8080 端口。
mimosa 配置文件
mimosa 配置文件 mimosa-config.js 决定了 mimosa 的执行行为，包括但不限于构建任务、打包任务、目录监听等功能。可以在该文件中配置任务，或者修改已有任务的配置。
以下是一个简单的 mimosa 配置文件例子：
-- -------------------- ---- ------- -------------- - - ----------- - -------- ----- -- ------ - ---------- --------- -------------- --------------- -------------- --------------- -------- ---------- --------- ---------- -- ------- - -------- ----- -- --展开代码
构建任务
使用 mimosa-fubumvc，可以配置一些构建任务，用于对项目文件进行处理、压缩和合并。可以在 mimosa-config.js 文件中的 mimosa 的 modules 中找到构建任务选项。以下是一个简单的构建任务配置：
-- -------------------- ---- ------- --------------- - - -------- - --------- ------------ ------------- -- ------- - ------ - - ---- ---------------------------- ----- ------------------------------ - - -- ------------ - -------- ----- -------- - ------- ----- --------- ----- ---------- ---- - -- ------------- - ---- -------------------------- -------- ---- - --展开代码
其中，concat 模块用于将多个 JavaScript 文件合并为一个文件（这里是 bundle.js），minify-js 和 minify-css 模块用于压缩 JavaScript 和 CSS 文件。
示例代码
以下示例代码展示了如何使用 mimosa-fubumvc，将多个 JavaScript 文件和 CSS 文件合并压缩，生成一个 bundle.js 和一个 bundle.css 文件。
-- -------------------- ---- ------- --------------- - - -------- - --------- ------------ ------------- -- ------- - ------ - - ---- ---------------------------- ----- ------------------------------ -- - ---- ----------------------------- ----- ------------------------------- - - -- ------------ - -------- ----- -------- - ------- ----- --------- ----- ---------- ---- - -- ------------- - ---- -------------------------- -------- ---- - --展开代码
总结
mimosa-fubumvc 是一款非常方便、易用的 Frontend 自动化构建工具，不仅可以加快项目构建速度，还可以提高项目的可维护性。本文介绍了 mimosa-fubumvc 的安装、使用、配置以及示例代码，希望能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f491d8e776d0804122a
