Gulpan-简单灵活的前端模块化构建和开发方案

Author image Cloud on 前端
Gulpman(https://github.com/xunuoi/gulpman)是基于前端的组件化理念(并非js的module)的工程构建和开发方案,可以像百度FIS一样,组织具有清晰模块化的前端资源结构。主要基于gulp及常用插件,简单、灵活,容易扩展和修改,懂点gulp的童鞋都可以自己修改、组合、使用。Gulpman不需要任何服务端的整合工作,这个与FIS有很大不同,不需要修改服务端代码来适配,就像正常的html一样,去引用你的js、css、img、fonts等资源,无侵入。同时gulpman整合了SCSS、 ES6 、Reactjs、Brows


Gulpman(https://github.com/xunuoi/gulpman)是基于前端的组件化理念(并非js的module)的工程构建和开发方案,可以像百度FIS一样,组织具有清晰模块化的前端资源结构。主要基于gulp及常用插件,简单、灵活,容易扩展和修改,懂点gulp的童鞋都可以自己修改、组合、使用。


Gulpman不需要任何服务端的整合工作,这个与FIS有很大不同,不需要修改服务端代码来适配,就像正常的html一样,去引用你的js、css、img、fonts等资源,无侵入。


同时gulpman整合了SCSS、 ES6 、Reactjs、Browserify、Imagemin、Rev、Iconfont、Karma、Usemin等前端常用套件,支持异步js加载,支持md5版本戳控制,同时有监视文件变动功能(watch),支持子模块模式监视开发, 同时具有可配置的发布目录、资源目录、CDN等,方便开发,傻瓜式配置,简单易用,一站式搞定,无需折腾即可使用前端常用的框架、语言和新特性。



更新说明:

gulpman 1.4.6版本更新:
新增支持cdn_prefix的数组/函数/字符串传参方式,更灵活和强大
新增支持内联嵌入CSS/JS到html。 只需要再url后面添加 ?_gm_inline
完善内联资源嵌入后的自动更新引用文件(html和CSS)
完善文档
gulpman 1.3.6版本更新:

新增对React/jsx支持,可以直接写ReactJS了
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都会自动编译(监视模式下)



先来个大致的介绍:

  • 使用gulpman按照模块划分后,模块根目录可以是./components(默认,可配置),如果你有个模块是foo,那么应该有如下目录:./components/foo,然后跟foo模块相关的html|js|css|fonts|image等资源文件都放到foo下,这个结构下,做开发时非常清晰、高效,便于模块组织、资源定位等。
  • 通过gm:publish命令构建后,会自动生成模板views目录,和静态资源assets目录。



Github源码: https://github.com/xunuoi/gulpman


Introduction 说明

  • 支持Mac、Linux环境下安装、使用
  • Windows环境未做测试,由于安装脚本使用到shell,windows不支持sh,可能需要手动安装gulp-sass等模块。


Install 安装

cd into your project dir and install:

npm install gulpman --save-dev

Linux环境下安装,可能需要安装pngquant相关的资源

Usage 使用说明


一、In Your gulpfile:

只需要require gulpman模块,就会自动加载gm:publish、gm:develop(开发监视模式)等预置的task,使用时在命令行直接输入gulp gm:publish即可执行


/**
 * Gulpfile.js
 */


var gulp = require('gulp'),
    gman = require('gulpman')


// your other tasks ...你的其他task




// 设置路径、CDN、资源URL前缀等,API超级简单。
// 你也可以不设置,全部采用默认值!
// if you want to set the dir, you can use config API:

gman.config({

    // 是否使用绝对路径,默认true,推荐使用,方便服务器配置。比如`/static/home/main.js`这种风格。
    // 如果is_absolute是false, 那么可能是`../../assets/static/home/main.js`这种风格。
    // 具体取决于项目情况、服务端配置等。
    // if set the assets url prefix as absolute or relative, default: true
    'is_absolute': true,

    // cdn prefix 配置CDN
    'cdn_prefix': '', 

    // 配置资源URL前缀,建议 /xxx这种
    // usually set as /static, this involves the server config ,such as the static path of nginx
    'url_prefix': '/static' 


    // 模块COMPONENTS目录,同一个模块的html和资源文件在一起。默认 'components'即可
    'components': 'components',

    // develop和publish下的views目录,跟服务端框架的views目录配置一致,比如express
    'runtime_views': 'views',
    'dist_views': 'views_dist',

    // develop和publish下的assets静态目录,跟服务器配置有关,比如nginx的static目录指向
    'runtime_assets': 'assets',
    'dist_assets': 'assets_dist',

    // 第三方JS类库、模块的目录,推荐设置为`lib`或`bower_components`(这样bower可以直接安装到这个目录)
    // 这个目录默认打包时为全局模块目录,可以直接`require('xxx')`,而不用加相对路径
    // the js library dir, set as a global module. Also you can set as bower_components
    'lib': 'lib', 

    // 可以添加一个自定的全局模块目录,该目录下的js模块,也作为全局模块来require,不需要相对路径。
    // the global module dir
    'global': 'common' 
})



二、全局模块介绍:


1. config的配置中,lib和global都是全局模块目录。举个例子说明:你的components/lib目录下有一个模块 foo.js,就是: components/lib/foo.js,那么你在你的es6文件中,就可以这样使用:` import foo from 'foo' `,不需要写成 ` import foo from '../lib/foo' `。 

2. 同理global那个配置也是这样的,推荐将lib目录设置成跟bower一致的,全部来存放第三方类库,而global设置的目录,比如common,可以存放自己的 公用模块。

3. 这样开发会更加灵活、方便。注意全局模块不要用同名冲突。



三、In Your CLI 命令行中调用:

就是普通的调用gulp 的task

# 初始化目录,建立components目录并添加一份html的demo文件
# init components dir and a html demo
gulp gm:init

# publish 发布资源,包括合并、压缩资源、rev产生MD5等
gulp gm:publish

# develop and watch 开发模式,监视相关文件变动,增量更新
gulp gm:develop

# clean 清理构建输出的目录和文件
gulp gm:clean

# 编译输出一份运行时资源文件,但是不进入监视状态
# compile for develop, not watch
gulp gm:compile


四、使用karama完成单元测试和coverage

  • 初次使用先安装,运行gulp gm:karma:install,会安装依赖和生成karma.conf.js文件
  • 在您的components中的对应模块目录下,建立一个spec文件夹,将对应的spec文件放在里面,文件拓展名是.es6
  • 运行 gulp gm:karma:start 来启动单元测试(watch模式),将会运行各spec文件,完成后可在生成的coverage文件夹中查看覆盖率结果
  • 指定spec目录、browsers等karma的选项,可以在karma.conf.js中设置、定制等

五、使用iconfont来转换svg图标到font

  • 可以将svg转换成icon-font,用@font-face方式引用
  • 初次使用先安装,运行gulp gm:iconfont:install
  • 将svg文件放到components/iconfonts/source目录下,运行gulp gm:iconfont即可
  • 自动生成的icon-font和css文件将会在iconfonts/gmicon目录下

六、关于Usemin

跟usemin正常使用一致,通过<!-- -->来使用,同时gulpman增加了自动计算usemin的输出文件名特性,比如可以<!-- build:js -->,不需要指定输出的js名称,gupman会根据合并的文件名自动生成文件名。


七、如何使用ReactJS

  • 在环境中安装React: npm install react react-dom
  • 在ES6文件中使用
import React from 'react';
import ReactDOM from 'react-dom';

// xxx

或者通过script标签引入reactjs的库也可以。


更多详细文档: https://github.com/xunuoi/gulpman