分享一个基于 gulp 的前端模块化解决方案： gulpman，比 FIS 更简单、可控、灵活
xunuoi 2016-01-25 15:13:55 +08:00 6178 次点击这是一个创建于 3548 天前的主题，其中的信息可能已经有所发展或是发生改变。
像百度 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 这种涉及到前后端整合、各种配置语法的巨型框架~~
基于 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 ~
没有任何新的额外的东西去学习和遵循，比如像 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 等那一套东西。
［前端模块化］，好像现在专指 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
支持数组，如果传入数组，按照随机来分配
支持传入函数，开发者可以自定义分配策略
支持传入 string
支持数组，如果传入数组，按照随机来分配
支持传入函数，开发者可以自定义分配策略
 | 1 xunuoi OP 因为国内网络情况，如果直接 npm 安装，可能 node-sass 或者 gulp-sass 会安装失败~ 因此 gulpman 的脚本内置调用 cnpm 来安装 gulp-sass |
 | 2 shunia 2016-01-25 18:19:13 +08:00 兹词。 |
 | 3 amrio 2016-01-25 18:46:52 +08:00 via iPhone 不知道有没有做到 F.I.S 的子依赖收集？ 比如一个 js 依赖了一个 less ， less 依赖了一张图片，图片修改后这些文件都一起重新构建，也就是 F.I.S 的递归编译过程 |
| 4 xunuoi OP @amrio 并没有做子依赖收集，主要是跟 FIS 理念不一致， FIS 是用各种自己定义的注释、语法等，将 JS\CSS\其他资源做捆绑定位，已经脱离了 HTML 本身的规范。 gulpman 还是坚持 html 本身的原则，不将 css 等资源强行绑定到 js 中，如果修改了 scss 或者 less 或者图片，那么相应的输出资源会变动。这种前提下的开发，更可控、清晰、规范，不需要额外学习新的一套注释、编译规则等 |
 | 6 jeffjade 2016-01-26 00:01:49 +08:00 感谢分享；看着不错的样子； mark 下，之后抽空折腾看看。 |
| 8 xunuoi OP 下午更新了 gulpman 版本，新添加嵌入图片 Base64 编码到 html/CSS 的特性，使用方式也是很简单： 图片的 src 后面添加 ?base64=true 即可: <img src="./img/testb64.png?base64=true" /> CSS 类似， url()中的路径添加参数即可 这种方式会将 img 编码成 base64 直接嵌入到 html 或 css 中。一些下页面场景下会经常用到 |
| 9 xunuoi OP 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 都会自动编译(监视模式下) |
| 10 xunuoi OP 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 帮你自动完成! |
 | 11 ppwangs 2016-01-30 14:55:24 +08:00 楼主说的 FIS 是 FIS3 吗 |
 | 12 123s 2016-01-31 18:57:29 +08:00 via iPhone 楼主，有群吗？想问点东西 |
| 13 xunuoi OP |
| 14 xunuoi OP @123s Gulpman 1.4.2 更新 支持 html 中内联嵌入 CSS/Javascript 在资源 url 后面添加?_gm_inline 即可，比如： <link rel="stylesheet" type="text/css" href="./dialog.css?_gm_inline"> |
| 15 xunuoi OP 1.4.7 更新 * 新增对 cdn_prefix 的数组和函数的传参支持。 如果传入数组，将按照随机来分配 cdn_prefix 给资源 url |
Select Language