react-component-gulp-tasks, 我在反应组件项目中使用的常见吞咽任务

分享于 

6分钟阅读

GitHub

  繁體 雙語
Common Gulp tasks I use across my React Component projects
  • 源代码名称:react-component-gulp-tasks
  • 源代码网址:http://www.github.com/JedWatson/react-component-gulp-tasks
  • react-component-gulp-tasks源代码文档
  • react-component-gulp-tasks源代码下载
  • Git URL:
    git://www.github.com/JedWatson/react-component-gulp-tasks.git
    Git Clone代码到本地:
    git clone http://www.github.com/JedWatson/react-component-gulp-tasks
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/JedWatson/react-component-gulp-tasks
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    react-component-gulp-tasks

    这里软件包为构建响应组件提供了常见的吞咽任务:

    • 用于转换JSX和创建分发版本的Browserify
    • Watchify用于文件更改的自动高效 rebundling
    • 在开发期间连接示例,使用实时重新加载集成
    • 示例的样式表更少
    • 将示例发布到Github页面
    • 将软件包发布到npm和 Bower

    你可以提供 config 对象来控制任务的设置,如下所述。

    项目设置

    任务假定你对项目遵循以下约定:

    • 包源在源文件夹中有一个入口点
    • 软件包将发布到npm和 Bower
    • transpiled版本将发布到lib文件夹( 用于 node.js,Browserify和 web pack )
    • 独立软件包将发布到dist文件夹( 用于 Bower )
    • 示例包括
      • static 文件( 比如。html,图像等)
      • 要生成的一个或者多个样式表
      • 一个或者多个要与Browserify绑定的脚本
    • 示例将打包到dist文件夹中,并发布到github页面

    示例项目结构

    
    bower.json
    
    
    package.json
    
    
    gulpfile.js
    
    
    src
    
    
     MyComponent.js
    
    
    less
    
    
     my-component.less
    
    
    lib
    
    
    //contains transpiled source
    
    
     MyComponent.js
    
    
    dist
    
    
    //contains packaged component
    
    
     my-component.js
    
    
     my-component.min.js
    
    
     my-component.css
    
    
    example
    
    
     dist
    
    
    //contains built examples
    
    
     src
    
    
     app.js
    
    
     app.less
    
    
     index.html
    
    
    
    

    有关完整示例,请参见 jedwatson/react-component-starter

    用法

    
    npm install --save-dev gulp react-component-gulp-tasks
    
    
    
    

    在gulpfile中,使用 gulp 实例和 config 调用这个包。 它将把任务添加给你。 你也可以添加自己的任务如果你想要。

    var gulp =require('gulp');var initGulpTasks =require('react-component-gulp-tasks');var taskConfig =require('./config');initGulpTasks(gulp, taskConfig);

    任务配置

    你可以通过更改配置来定制任务以匹配你的项目结构。

    需要的配置密钥包括:

    Component

    • component.file - 组件的源( 条目) 文件
    • component.name - 控制独立模块名称
    • component.src - 要从中加载源文件的目录
    • component.dist - 要生成分发的目录
    • ( component.pkgName - 组件将要导出的软件包的名称( 必须与npm的软件包名称匹配)
    • 将从生成中排除的公共依赖项的component.dependencies[] - array,并包含在示例的公共包中
    • component.less.entry - 组件样式表的入口点,如果你使用 LESS 提供一个
    • component.less.path - LESS 文件的路径。 这个目录中的. less 扩展都将被监视以便在开发中进行更改

    Example

    • example.src - 从中加载源文件的目录
    • example.dist - 要生成分发的目录
    • example.files[] - 文件将被复制到 example.dist 文件夹中
    • example.scripts[] - 脚本将是transpiled的,并由browserify绑定
    • example.less[] - 将使用 LESS 生成样式表。 请记住在html上更新的css文件引用。
    • example.port - 提供示例的端口,默认为 8000

    示例

    这是上述项目结构的config.js 文件的一个示例:

    var gulp =require('gulp');var initGulpTasks =require('react-component-gulp-tasks');var taskConfig = {
     component: {
     name:'MyComponent',
     dependencies: [
     'blacklist',
     'classnames',
     'react',
     'react/addons' ],
     less: {
     path:'less',
     entry:'my-component.less' }
     },
     example: {
     src:'example/src',
     dist:'example/dist',
     files: [
     'index.html' ],
     scripts: [
     'app.js' ],
     less: [
     'app.less' ]
     }
    };initGulpTasks(gulp, taskConfig);

    因为在多个包中维护构建过程,所以我编写这个包是一个重复的任务,它具有大量的margin。

    尽管它非常固执,希望它对其他包作者来说是一个有用的资源。 我发现组件开发简单而有趣,就像闪电快速重新生成过程,并且自动发布和自动部署。

    如果你认为可以做得更好,或者你想看到增加的特性,请让我知道。 公关问题及欢迎。

    许可证

    麻省理工学院版权所有( c ) 2014 Jed Watson。


    COM  COMM  proj  react  component  Projects  
    相关文章