• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

JedWatson/react-component-gulp-tasks: Common Gulp tasks I use across my React Co ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

JedWatson/react-component-gulp-tasks

开源软件地址(OpenSource Url):

https://github.com/JedWatson/react-component-gulp-tasks

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

react-component-gulp-tasks

This package provides common gulp tasks for building react components with:

  • Browserify for transforming JSX and creating distribution builds
  • Watchify for automatic, efficient rebundling on file changes
  • Connect for serving examples during development, with live-reload integration
  • LESS stylesheets for examples
  • Publishing examples to Github Pages
  • Publishing packages to npm and bower

You control the settings for the tasks by providing a config object, as described below.

Project setup

The tasks assume you are following the following conventions for your project:

  • Package source has a single entry point in a source folder
  • The package will be published to both npm and bower
  • A transpiled version will be published to a lib folder (for Node.js, Browserify and Webpack)
  • A standalone package will be published to a dist folder (for Bower)
  • Examples consist of
    • Static file(s) (e.g. html, images, etc)
    • One or more stylesheets to be generated with LESS
    • One or more scripts to be bundled with Browserify
  • Examples will be packaged into an examples dist folder, and published to github pages

Example project structure

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

For a complete example see JedWatson/react-component-starter

Usage

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

In your gulpfile, call this package with your gulp instance and config. It will add the tasks to gulp for you. You can also add your own tasks if you want.

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

initGulpTasks(gulp, taskConfig);

Task Config

You can customise the tasks to match your project structure by changing the config.

Required config keys are:

Component

  • component.file - the source (entry) file for the component
  • component.name - controls the standalone module name
  • component.src - the directory to load the source file from
  • component.dist - the directory to build the distribution to
  • component.pkgName - the name of the package that will be exported by the component (must match the name of your package on npm)
  • component.dependencies[] - array of common dependencies that will be excluded from the build, and included in a common bundle for the examples
  • component.less.entry - the entrypoint for the component stylesheet, if you're using less to provide one
  • component.less.path - the path of the less files. everything with a .less extension in this directory will be watched in for changes in development

Example

  • example.src - the directory to load the source files from
  • example.dist - the directory to build the distribution to
  • example.files[] - files will be copied as-is into the example.dist folder
  • example.scripts[] - scripts will be transpiled with babel and bundled by browserify
  • example.less[] - stylesheets will be generated with LESS. Remember to update css file references on html.
  • example.port - port to serve examples on, defaults to 8000

Example

This is an example of the config.js file for the project structure above:

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);

Contributing

I wrote this package because maintaining my build process across multiple packages became a repetitive chore with large margin for error.

Although its quite opinionated, hopefully it will be a useful resource for other package authors. It's got all the nice things I found to component development easy and fun, like a lightning-quick rebuild process with gulp-reload, consolidated publishing, and automated deployment to github pages.

Please let me know if you think anything could be done better or you'd like to see a feature added. Issues and PR's welcome.

License

MIT. Copyright (c) 2014 Jed Watson.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
jonkemp/gulp-inline-css: Inline linked css in an html file. Useful for emails.发布时间:2022-06-21
下一篇:
rogeriopvl/gulp-ejs: 发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap