分享一个基于 gulp 的前端模块化解决方案： gulpman，比 FIS 更简单、可控、灵活

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3233 天前的主题，其中的信息可能已经有所发展或是发生改变。

像百度 FIS 一样，按照模块化的方式来前端开发，更加清晰、简单、轻量级

基于 gulp ，简单、灵活，容易扩展和修改，懂点 gulp 的童鞋都可以自己修改、使用、组合。
不需要任何服务端的整合工作，这个与 FIS 有很大不同，不需要修改服务端代码来适配，就像正常的 html 一样，去引用你的 js 、 css 、 img 、 fonts 等资源，无侵入。

整合 SCSS ES6 Browserify|cssnano|uglify|imagmein|rev 等前端常用套件，同时有监视文件变动功能(watch)，可配置的发布目录、资源目录、 CDN 等，方便开发，简单易用，一站式搞定。

安装就是 npm install gulpman --save-dev

安装完后，无需任何配置、整合，直接执行 gulp gm:init 就能立刻初始化项目，通过 gulp gm:publish 就可以立刻发布资源了。 gulp 的插件都可以随意组合进去，没有学习门槛。

详细使用可以看下： http://karat.cc/article/56a351c3e48d2d05682aa0ac

附上 github ： https://github.com/xunuoi/gulpman

前端童鞋可以通过 gulpman 感受下前端模块化开发的便利、又不用折腾 FIS 这种涉及到前后端整合、各种配置语法的巨型框架~~

第 1 条附言 · 2016-01-25 20:13:26 +08:00

gulpman 本身没有添加一堆注释语法、自定义语法糖之类，就保持原汁原味的 html/js/css 开发，支持 ES6\Browserify 等特性以及各种打包、压缩、合并、 MD5 等，懂 gulp 就会使用！

没有任何新的额外的东西去学习和遵循，比如像 FIS 中的 js ，用注视中的 @require 来添加 css ，这种方式并不符合 gulpman 的理念，不在 html 引入而去在 js 中声明 css 资源引用，在 gulpman 的理念中是不可控的、黑盒子的。

gulpman 中，比如对于 css ，就是用 scss 来实现模块、合并、复用等，对于 es6 就是用 babel 、 browserify 来完成模块打包等。而资源的引用，就是在 html 中通过 link 、 script 、 img 等标签。

gulpman 要做的不是颠覆和震撼，而是为提高开发效率、可维护性、透明性而做的一套实用构建工具~

你操作的，就是简简单单的 html 、 js 、 css ~

第 2 条附言 · 2016-01-29 11:57:01 +08:00

准确地说，应该叫做［前端组件化］开发， html 、 js 、 css 等放在某组件的统一目录下～

［前端模块化］，好像现在专指 amd 、 cmd 、 define 等那一套东西。

第 3 条附言 · 2016-02-04 15:26:55 +08:00

Gulpman 1.4.2 更新，支持内联嵌入 CSS/Javascript

在资源 url 后面添加?_gm_inline即可

<script src="./plugin.js?_gm_inline" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="./dialog.css?_gm_inline">

第 4 条附言 · 2016-02-05 16:21:31 +08:00

已增加对 cdn_prefix 的多类型传参支持：

支持传入 string

支持数组，如果传入数组，按照随机来分配

支持传入函数，开发者可以自定义分配策略

15 条回复 • 2016-02-05 23:01:13 +08:00

xunuoi

2016-01-25 16:26:16 +08:00

因为国内网络情况，如果直接 npm 安装，可能 node-sass 或者 gulp-sass 会安装失败~
因此 gulpman 的脚本内置调用 cnpm 来安装 gulp-sass

shunia

2016-01-25 18:19:13 +08:00

兹词。

amrio

2016-01-25 18:46:52 +08:00 via iPhone

不知道有没有做到 F.I.S 的子依赖收集？
比如一个 js 依赖了一个 less ， less 依赖了一张图片，图片修改后这些文件都一起重新构建，也就是 F.I.S 的递归编译过程

xunuoi

2016-01-25 19:19:27 +08:00

@amrio 并没有做子依赖收集，主要是跟 FIS 理念不一致， FIS 是用各种自己定义的注释、语法等，将 JS\CSS\其他资源做捆绑定位，已经脱离了 HTML 本身的规范。 gulpman 还是坚持 html 本身的原则，不将 css 等资源强行绑定到 js 中，如果修改了 scss 或者 less 或者图片，那么相应的输出资源会变动。这种前提下的开发，更可控、清晰、规范，不需要额外学习新的一套注释、编译规则等

xunuoi

2016-01-25 20:05:38 +08:00

@shunia 感谢兹词：）

jeffjade

2016-01-26 00:01:49 +08:00

感谢分享；看着不错的样子； mark 下，之后抽空折腾看看。

xunuoi

2016-01-26 23:52:40 +08:00

@jeffjade 谢谢支持！

xunuoi

2016-01-26 23:53:34 +08:00

下午更新了 gulpman 版本，新添加嵌入图片 Base64 编码到 html/CSS 的特性，使用方式也是很简单：

图片的 src 后面添加 ?base64=true 即可:

<img src="./img/testb64.png?base64=true" />

CSS 类似， url()中的路径添加参数即可

这种方式会将 img 编码成 base64 直接嵌入到 html 或 css 中。一些下页面场景下会经常用到

xunuoi

2016-01-27 21:52:16 +08:00

gulpman 1.3.3 版本更新：

1 、新增对复杂目录和多级目录设定支持:

比如下面这种模板、静态文件复杂的、多级的路径：

gulpman.config({

'components': 'components/cc',

'runtime_views': 'runtime_views/rv',
'dist_views': 'dist_views/dv/dv',

'runtime_assets': 'runtime_assets/ra/ra',
'dist_assets': 'dist_assets/da'

})

2 、增加彩色 log

3 、增加 base64 关联的资源文件的自动关联编译，比如跟这个 base64 图片有关的 html 、 css 都会自动编译(监视模式下)

xunuoi

2016-01-28 19:48:29 +08:00

gulpman 已更新到 1.3.6

更详细使用参见： https://github.com/xunuoi/gulpman

如何用 gulpman 来支援 Reactjs 的开发?

首先安装 gulpman ： npm install gulpman --save-dev

在 gulpman 中启用 React ：

方法一： [推荐] 通过 script 标签引入 React 类库到 HTML(文件路径根据实际配置或有不同)

<script type="text/javascript" src="./lib/react-0.14.6/build/react.min.js"></script>
<script type="text/javascript" src="./lib/react-0.14.6/build/react-dom.min.js"></script>

方法二：直接在 ES6/JSX 文件中引入 React 模块:

import 'react'

然后就可以在 es6/jsx 文件中写你的 ReactJS 的代码了! 其他的配置、 babel 转换、 browseirfy 等都会由 gulpman 帮你自动完成!

ppwangs

2016-01-30 14:55:24 +08:00

楼主说的 FIS 是 FIS3 吗

123s

2016-01-31 18:57:29 +08:00 via iPhone

楼主，有群吗？想问点东西

xunuoi

2016-01-31 22:24:00 +08:00

@123s QQ 群： 62734799 ，加群请说明 gulpman

另外还可以直接去 github 上开 issue: https://github.com/xunuoi/gulpman

xunuoi

2016-02-04 15:33:17 +08:00

@123s Gulpman 1.4.2 更新

支持 html 中内联嵌入 CSS/Javascript

在资源 url 后面添加?_gm_inline 即可，比如：
<link rel="stylesheet" type="text/css" href="./dialog.css?_gm_inline">

xunuoi

2016-02-05 23:01:13 +08:00

1.4.7 更新

* 新增对 cdn_prefix 的数组和函数的传参支持。
如果传入数组，将按照随机来分配 cdn_prefix 给资源 url