Gulp

sthlm.js

April 23, 2014

Gulp is three things

Streams

Vinyl

Orchestrator

Streams

Vinyl:

File meta data

Path & Content

Orchestrator:

A way to define and run tasks

Gulp:

Fast

Code over configuration

What are we trying to achieve?

Immediate feedback

"Creation is about discovery"

- Bret Victor

Dual screens - code and output

Live reload


	gulp.task "_reveal_include", ->
		gulp.src "src/slides/**/*.html"
			.pipe includer()
			.pipe gulp.dest 'app/'
			.pipe livereload()
		return

	gulp.task '_reveal', ->
		gulp.watch "src/slides/**/*.*", ['_reveal_include']


	gulp.task "_dist-styles", ->
		gulp.src file
			.pipe sass
				includePaths: includePaths
				outputStyle: "compressed"
				sourceComments: "normal"
				file: file
			.on "error", logExit
			.pipe prefix "last 2 versions", "ie 10", "Android 4"
			.pipe csso()
			.pipe gulp.dest target + "css/"

DEMO!

Verdict

Benefits

+ SPEED

+ Code > config

Concerns

- Maturity

- Small ecosystem

The future process

THE

code-compile-run

LOOP

We are still a bit stuck in the code-compile-run loop. There are initiatives on many fronts to make tools for us to create digital things in new ways. Projects that try to break out of the code-compile-run loop. Some are taking a visual approach, like Macaw and Weld. They make it possible to modify the "interface", but at the same time they break the connection to the code. Some, like Brackets, LightTable and NoFlo enhance they way we work with code. Either by visualizing code structure and data flow or by bringing more visual tools into the editor. I think we need tools that do both. To go back to the example of the pen. We need to both be able draw freely, to see what we draw immediately and to easily modify the output directly. That is, we need to get immediate feedback on the code we write, and we ALSO need to be able to change the code by modifying the output. If we view both the code that we write and the output, whatever it way be, as representations of the same object, then we should be able to modify both. The code is a representation of the UI as much as the other way around. When we can do that I would be a lot happier.

abc

→

abc

abc

↔

abc

Questions?