Skip to content

Commit 56ab547

Browse files
committed
Updated README
1 parent dfbc4f0 commit 56ab547

File tree

1 file changed

+118
-150
lines changed

1 file changed

+118
-150
lines changed

README.md

Lines changed: 118 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,172 +1,168 @@
1-
[![Build Status](https://travis-ci.org/wearefractal/gulp.png?branch=master)](https://travis-ci.org/wearefractal/gulp)
2-
[![Dependency Status](https://david-dm.org/wearefractal/gulp.png)](https://david-dm.org/wearefractal/gulp)
1+
# gulp [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][depstat-image]][depstat-url]
2+
> The streaming build system
33
4-
## Information
5-
6-
<table>
7-
<tr>
8-
<td>Package</td><td>gulp</td>
9-
</tr>
10-
<tr>
11-
<td>Description</td>
12-
<td>Simple stream-y build helper</td>
13-
</tr>
14-
<tr>
15-
<td>Node Version</td>
16-
<td>>= 0.8</td>
17-
</tr>
18-
</table>
4+
## Usage
195

20-
This project is in its early stages. If something is not working or you would like a new feature please use the issues page.
6+
### 1. Install gulp globally:
217

22-
## Links
8+
```
9+
npm install -g gulp
10+
```
2311

24-
[Slideshow](http://slid.es/contra/gulp)
12+
### 2. Install gulp in your project devDependencies:
2513

26-
[Twitter for updates](http://twitter.com/eschoff)
14+
```
15+
npm install --save-dev gulp
16+
```
2717

28-
[Company twitter](http://twitter.com/wearefractal)
18+
### 3. Create a `gulpfile.js` at the root of your project:
2919

30-
## Plugin List
20+
```javascript
21+
/*
22+
This is an EXAMPLE gulpfile.js
23+
You'll want to change it to match your project.
24+
Find plugins at https://npmjs.org/browse/keyword/gulpplugin
25+
*/
26+
var gulp = require('gulp');
27+
var uglify = require('gulp-uglify');
3128

32-
You can view a list of plugins by going to [this npm search](https://npmjs.org/search?q=gulpplugin).
29+
gulp.task('scripts', function() {
30+
// Minify and copy all JavaScript (except vendor scripts)
31+
gulp.src(['client/js/**/*.js'])
32+
.pipe(uglify())
33+
.pipe(gulp.dest('build/js'));
3334

34-
## Usage
35+
// Copy vendor files
36+
gulp.src('client/js/vendor/**')
37+
.pipe(gulp.dest('build/js/vendor'));
38+
});
3539

36-
This code would go in your `Gulpfile.js` (case insensitive) at the root of your project. For more information on how to use other languages check the [compilers](#compilers) section.
40+
// Copy all static assets
41+
gulp.task('copy', function() {
42+
gulp.src('client/img/**')
43+
.pipe(gulp.dest('build/img'));
3744

38-
```javascript
39-
var gulp = require('gulp');
40-
var jade = require('gulp-jade');
41-
var coffee = require('gulp-coffee');
42-
var minify = require('gulp-minify');
45+
gulp.src('client/css/**')
46+
.pipe(gulp.dest('build/css'));
4347

44-
// compile, minify, and copy templates
45-
gulp.task('templates', function(){
46-
gulp.src("./client/templates/*.jade")
47-
.pipe(jade())
48-
.pipe(minify())
49-
.pipe(gulp.dest("./public/templates"));
48+
gulp.src('client/*.html')
49+
.pipe(gulp.dest('build'));
5050
});
5151

52-
gulp.task('scripts', function(){
53-
54-
// compile, minify, and copy coffeescript
55-
gulp.src(["./client/js/*.coffee". "!./client/js/vendor/**"])
56-
.pipe(coffee())
57-
.pipe(minify())
58-
.pipe(gulp.dest("./public/js"));
52+
// The default task (called when you run `gulp`)
53+
gulp.task('default', function() {
54+
gulp.run('scripts', 'copy');
5955

60-
// copy vendor files
61-
gulp.src("./client/js/vendor/**")
62-
.pipe(minify())
63-
.pipe(gulp.dest("./public/js/vendor"));
56+
// Watch files and run tasks if they change
57+
gulp.watch('client/js/**', function(event) {
58+
gulp.run('scripts');
59+
});
6460

61+
gulp.watch([
62+
'client/img/**',
63+
'client/css/**',
64+
'client/*.html'
65+
], function(event) {
66+
gulp.run('copy');
67+
});
6568
});
69+
```
6670

67-
// copy all static assets
68-
gulp.task('copy', function(){
69-
gulp.src("./client/img/**")
70-
.pipe(gulp.dest("./public/img"));
71+
### 4. Run gulp
7172

72-
gulp.src("./client/css/**")
73-
.pipe(gulp.dest("./public/css"));
73+
```
74+
gulp
75+
```
7476

75-
gulp.src("./client/*.html")
76-
.pipe(gulp.dest("./public"));
77+
The default tasks will run and gulp will watch for changes.
7778

78-
gulp.src("./client/*.ico")
79-
.pipe(gulp.dest("./public"));
79+
To run individual tasks, use `gulp <task> <othertask>`
8080

81-
});
8281

83-
// default task gets called when you run the `gulp` command
84-
gulp.task('default', function(){
85-
gulp.run('templates', 'scripts', 'copy');
82+
## Available Plugins
8683

87-
// watch files and run scripts if they change
88-
gulp.watch("./client/js/**", function(event){
89-
gulp.run('scripts');
90-
});
84+
The gulp community is growing, with new plugins being added daily. See the [npm search results][plugin search] for a complete list.
9185

92-
gulp.watch("./client/templates/**", function(event){
93-
gulp.run('templates');
94-
});
9586

96-
});
97-
```
87+
## gulp API
9888

99-
### gulp.src(globs[, opt])
89+
### gulp.src(globs[, options])
10090

101-
Takes a glob and represents a file structure. Can be piped to plugins. You can specify a single glob or an array of globs (see docs). All options are passed directly through to [glob-stream](https://github.com/wearefractal/glob-stream). See the [glob-stream documentation](https://github.com/wearefractal/glob-stream) for more information.
91+
Takes a glob and represents a file structure. Can be piped to plugins. You can specify a single glob or an array of globs (see docs). All options are passed directly through to [glob-stream]. See the [glob-stream documentation] for more information.
10292

10393
```javascript
104-
gulp.src("./client/templates/*.jade")
94+
gulp.src('./client/templates/*.jade')
10595
.pipe(jade())
10696
.pipe(minify())
107-
.pipe(gulp.dest("./public/minified_templates"));
97+
.pipe(gulp.dest('./build/minified_templates'));
10898
```
10999

110-
##### Options
100+
#### options.buffer
101+
Type: `Boolean`
102+
Default: `true`
103+
104+
Setting this to `false` will return `file.contents` as a stream and not buffer files. This may not be supported by many plugins.
111105

112-
`buffer: false` will return file.content as a stream and not buffer files. This may not be supported by many plugins.
106+
#### options.read
107+
Type: `Boolean`
108+
Default: `true`
113109

114-
`read: false` will return file.content as null and not read the file at all.
110+
Setting this to `false` will return `file.contents` as null and not read the file at all.
115111

116-
### gulp.dest(path[, opt])
112+
### gulp.dest(path[, options])
117113

118114
Can be piped to and it will write files. Re-emits all data passed to it so you can pipe to multiple folders.
119115

120116
```javascript
121-
gulp.src("./client/templates/*.jade")
122-
.pipe(jade())
123-
.pipe(gulp.dest("./public/templates"))
124-
.pipe(minify())
125-
.pipe(gulp.dest("./public/minified_templates"));
117+
gulp.src('./client/templates/*.jade')
118+
.pipe(jade())
119+
.pipe(gulp.dest('./build/templates'))
120+
.pipe(minify())
121+
.pipe(gulp.dest('./build/minified_templates'));
126122
```
127123

128124
### gulp.task(name[, deps], fn)
129125

130126
Tasks that you want to run from the command line should not have spaces in them.
131127

132-
The task system is [Orchestrator](https://github.com/robrich/orchestrator) so check there for more detailed information.
128+
The task system is [Orchestrator] so check there for more detailed information.
133129

134130
```javascript
135-
gulp.task('somename', function(){
136-
// do stuff
131+
gulp.task('somename', function() {
132+
// Do stuff
137133
});
138134
```
139135

140-
##### Task dependencies
136+
#### Task dependencies
141137

142138
This lets you specify tasks to be executed and completed before your task will run.
143139

144140
```javascript
145-
gulp.task('somename', ['array','of','task','names'], function(){
146-
// do stuff
141+
gulp.task('somename', ['array', 'of', 'task', 'names'], function() {
142+
// Do stuff
147143
});
148144
```
149145

150146
If the dependencies are asynchronous it is not guaranteed that they will finish before `'somename'` is executed. To ensure they are completely finished, you need to make sure the dependency tasks have asynchronous support through one of the methods outlined below. The most simple method is to return the stream. By returning the stream, Orchestrator is able to listen for the end event and only run `'somename'` once each dependencies' stream end event has been emitted. You can also use callbacks or promises to do your own cool stuff.
151147

152-
##### Async tasks
148+
#### Async tasks
153149

154150
With callbacks:
155151

156152
```javascript
157-
gulp.task('somename', function(cb){
158-
// do stuff
153+
gulp.task('somename', function(cb) {
154+
// Do stuff
159155
cb(err);
160156
});
161157
```
162158

163159
Wait for stream to end:
164160

165161
```javascript
166-
gulp.task('somename', function () {
162+
gulp.task('somename', function() {
167163
var stream = gulp.src('./client/**/*.js')
168164
.pipe(minify())
169-
.pipe(gulp.dest('/public');
165+
.pipe(gulp.dest('/build');
170166
return stream;
171167
});
172168
```
@@ -176,11 +172,11 @@ With promises:
176172
```javascript
177173
var Q = require('q');
178174

179-
gulp.task('somename', function(){
175+
gulp.task('somename', function() {
180176
var deferred = Q.defer();
181177

182-
// do async stuff
183-
setTimeout(function () {
178+
// Do async stuff
179+
setTimeout(function() {
184180
deferred.resolve();
185181
}, 1);
186182

@@ -197,7 +193,7 @@ gulp.run('scripts', 'copyfiles', 'builddocs');
197193
```
198194
199195
```javascript
200-
gulp.run('scripts', 'copyfiles', 'builddocs', function (err) {
196+
gulp.run('scripts', 'copyfiles', 'builddocs', function(err) {
201197
// All done or aborted due to err
202198
});
203199
```
@@ -209,7 +205,7 @@ Use gulp.run to run tasks from other tasks. You will probably use this in your d
209205
glob can be a standard glob or an array of globs. cb is called on each fs change with an object describing the change.
210206
211207
```javascript
212-
gulp.watch("js/**/*.js", function(event){
208+
gulp.watch('js/**/*.js', function(event) {
213209
gulp.run('scripts', 'copyfiles');
214210
});
215211
```
@@ -218,11 +214,12 @@ gulp.watch("js/**/*.js", function(event){
218214
219215
gulp.env is an optimist arguments object. Running `gulp test dostuff --production` will yield `{_:["test","dostuff"],production:true}`. Plugins don't use this.
220216
221-
## gulp cli
217+
218+
## gulp CLI
222219
223220
### Tasks
224221
225-
Tasks can be executed by running `gulp <taskname> <othertask> <somethingelse>`. Just running `gulp` will execute the task you registered called `default`. If there is no `default` task gulp will error.
222+
Tasks can be executed by running `gulp <task> <othertask>`. Just running `gulp` will execute the task you registered called `default`. If there is no `default` task gulp will error.
226223
227224
### Compilers
228225
@@ -235,59 +232,15 @@ gulp dosomething --require coffee-script
235232
```
236233
237234
238-
## Writing a plugin
239-
240-
This is a simple plugin that adds a header to the beginning of each file. It takes one argument (a string). Let's call it `gulp-header`. I recommend event-stream as a utility for creating these plugins.
235+
## Write your own gulp plugins
241236
242-
#### Code
237+
See the [Writing a gulp plugin] wiki page for guidelines and an example to get you started.
243238
244-
```javascript
245-
var es = require('event-stream');
246-
247-
module.exports = function(header){
248-
// check our options
249-
if (!header) throw new Error("header option missing");
250239
251-
// our map function
252-
function modifyContents(file, cb){
253-
// remember that contents is ALWAYS a buffer
254-
file.contents = new Buffer(header + String(file.contents));
240+
## More information
255241
256-
// first argument is an error if one exists
257-
// second argument is the modified file object
258-
cb(null, file);
259-
}
242+
See [the wiki][wiki] for more information and [the FAQ][FAQ] for more answers to common questions.
260243
261-
// return a stream
262-
return es.map(modifyContents);
263-
}
264-
```
265-
266-
#### Usage
267-
268-
```javascript
269-
var gulp = require('gulp');
270-
var header = require('gulp-header');
271-
272-
// Add a copyright header to each file
273-
gulp.src('./client/scripts/*.js')
274-
.pipe(header('// This file is copyrighted'))
275-
.pipe(gulp.dest("./public/scripts/"))
276-
```
277-
278-
## Plugin Guidelines
279-
280-
A gulp plugin is exclusively something that deals with file streams. If your library is not for streaming files but is still made for use with gulp, just tag it as `gulpfriendly` instead of `gulpplugin`.
281-
282-
1. file.contents should always go out the same way it came in
283-
- Respect buffered, streaming, and non-read files as well as folders!
284-
1. Do not pass the file object downstream until you are done with it
285-
1. Make use of the gulp-util library. Templating, CLI colors, logging. Do you need to change a file's extension or do some tedious fs crap? Try looking there first and add it if it doesn't exist
286-
1. Remember: Your plugin should only do one thing! It should not have a complex config object that makes it do multiple things. It should not concat and add headers/footers. This is not grunt. Keep it simple.
287-
1. Do not throw errors. Emit them from the stream (or pass them to the callback if using event-stream's .map).
288-
1. Add "gulpplugin" as a keyword in your package.json so you show up on our search
289-
290-
If you don't follow these guidelines and somebody notices your plugin will be shitlisted from the ecosystem.
291244
292245
## LICENSE
293246
@@ -317,3 +270,18 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
317270
318271
[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/wearefractal/gulp/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
319272
273+
274+
[glob-stream documentation]: https://github.com/wearefractal/glob-stream
275+
[glob-stream]: https://github.com/wearefractal/glob-stream
276+
[Orchestrator]: https://github.com/robrich/orchestrator
277+
[plugin search]: https://npmjs.org/browse/keyword/gulpplugin
278+
[wiki]: /wearefractal/gulp/wiki
279+
[FAQ]: /wearefractal/gulp/wiki/FAQ
280+
[Writing a gulp plugin]: /wearefractal/gulp/wiki/Writing-a-gulp-plugin
281+
282+
[npm-url]: https://npmjs.org/package/gulp
283+
[npm-image]: https://badge.fury.io/js/gulp.png
284+
[travis-url]: https://travis-ci.org/wearefractal/gulp
285+
[travis-image]: https://travis-ci.org/wearefractal/gulp.png?branch=master
286+
[depstat-url]: https://david-dm.org/wearefractal/gulp
287+
[depstat-image]: https://david-dm.org/wearefractal/gulp.png

0 commit comments

Comments
 (0)