V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
xunuoi
V2EX  ›  分享创造

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

  •  
  •   xunuoi · 2016-01-25 15:13:55 +08:00 · 5733 次点击
    这是一个创建于 3207 天前的主题,其中的信息可能已经有所发展或是发生改变。
    像百度 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
        1
    xunuoi  
    OP
       2016-01-25 16:26:16 +08:00
    因为国内网络情况,如果直接 npm 安装,可能 node-sass 或者 gulp-sass 会安装失败~
    因此 gulpman 的脚本内置调用 cnpm 来安装 gulp-sass
    shunia
        2
    shunia  
       2016-01-25 18:19:13 +08:00
    兹词。
    amrio
        3
    amrio  
       2016-01-25 18:46:52 +08:00 via iPhone
    不知道有没有做到 F.I.S 的子依赖收集?
    比如一个 js 依赖了一个 less , less 依赖了一张图片,图片修改后这些文件都一起重新构建,也就是 F.I.S 的递归编译过程
    xunuoi
        4
    xunuoi  
    OP
       2016-01-25 19:19:27 +08:00
    @amrio 并没有做子依赖收集,主要是跟 FIS 理念不一致, FIS 是用各种自己定义的注释、语法等,将 JS\CSS\其他资源做捆绑定位,已经脱离了 HTML 本身的规范。 gulpman 还是坚持 html 本身的原则,不将 css 等资源强行绑定到 js 中,如果修改了 scss 或者 less 或者图片,那么相应的输出资源会变动。这种前提下的开发,更可控、清晰、规范,不需要额外学习新的一套注释、编译规则等
    xunuoi
        5
    xunuoi  
    OP
       2016-01-25 20:05:38 +08:00
    @shunia 感谢兹词 :)
    jeffjade
        6
    jeffjade  
       2016-01-26 00:01:49 +08:00
    感谢分享;看着不错的样子; mark 下,之后抽空折腾看看。
    xunuoi
        7
    xunuoi  
    OP
       2016-01-26 23:52:40 +08:00
    @jeffjade 谢谢支持!
    xunuoi
        8
    xunuoi  
    OP
       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
        9
    xunuoi  
    OP
       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
        10
    xunuoi  
    OP
       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
        11
    ppwangs  
       2016-01-30 14:55:24 +08:00
    楼主说的 FIS 是 FIS3 吗
    123s
        12
    123s  
       2016-01-31 18:57:29 +08:00 via iPhone
    楼主,有群吗?想问点东西
    xunuoi
        13
    xunuoi  
    OP
       2016-01-31 22:24:00 +08:00
    @123s QQ 群: 62734799 , 加群请说明 gulpman

    另外还可以直接去 github 上开 issue: https://github.com/xunuoi/gulpman
    xunuoi
        14
    xunuoi  
    OP
       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
        15
    xunuoi  
    OP
       2016-02-05 23:01:13 +08:00
    1.4.7 更新

    * 新增对 cdn_prefix 的数组和函数的传参支持。
    如果传入数组,将按照随机来分配 cdn_prefix 给资源 url
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1062 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:31 · PVG 03:31 · LAX 11:31 · JFK 14:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.