Guides for getting started

[msiebuhr]

I would be nice with some guides for getting stared with the various parts of assetgraph. Eg.

• Getting started with a basic static site.
• Using LESS in development/production.
• ...

[tcurdt]

This issue is way too old to be still open.
Especially the development part would be interesting:

• less/sass/stylus
• using es6/7
• browsersync (or even hot reloading of javascript)
• react
• templating (or should this be handled externally)

[Munter]

Take a look at what https://github.com/Munter/generator-greenfield scaffolds for you. A setup with livereloaded css/less/sass

assetgraph currently doesn't handle: stylus, es6, react

[tcurdt]

Thx! As for React - it says "it does all your preprocessing like Less, Sass, React Jsx and Autoprefixing"

[tcurdt]

Hm. Not a Grunt person here - where is the less/sass preprocessing defined?

[Munter]

React !== jsx.

It transpiles jsx, but currently can't pick up React.dom calls as possible outgoing static relations.

sass and less preprocessing is outsourced to https://github.com/One-com/livestyle in development and happens in https://github.com/assetgraph/assetgraph/blob/master/lib/transforms/compileLessToCss.js , https://github.com/assetgraph/assetgraph/blob/master/lib/transforms/compileScssToCss.js and https://github.com/assetgraph/assetgraph/blob/master/lib/transforms/compileStylusToCss.js (forgot that we actually did implement stylus support)

[Munter]

I'm personally not happy with the transpiler story inside assetgraph. I'm working on moving it out into https://github.com/Munter/tolk and https://github.com/Munter/fusile

[tcurdt]

Ah! Thanks for the clarification. I didn't get that livestyle is doing the preprocessing.

As for React: With webpack you need resources to be required to express the relation.
Would that work for assetgraph as well?

Is tolk completely independant?
So for a live update another process would have to pick up the file change?

Not sure I am a fan of the fusile approach. Feels a little too low level.

[Munter]

livestyle is what we use in development, where assetgraph doesn't live. It allows us all the convenience of transpilers with none of the downsides of heavy task runner configuration. Assetgraph also does the preprocessing when you move to a production build, since it can't hook into the livestyle functionality it has to reimplement it. This is why I want to move transpiling to a lower level with an api that more tools can interface with.

Assetgraph picks up any outgoing relation from html, css, rss, xml, svg etc. In javascript it picks up amd and commonjs outgoing relations. If you use neighter and have a custom script loader you need to wrap strings that represent urls in GETSTATICURL(...) in order for assetgraph to pick them up as relations.

Tolk is 100% independent. But assetgraph might eventually use it in its population lifecycle.

Live updates are not a concern of assetgraph-builder. We haven't implemented any stable file watching tools with assetgraph yet, but it is entirely possible to do so and have the graph model live in a service while you work. See https://github.com/Munter/expush and https://github.com/assetgraph/staticache

In general we feel that assetgraph would fit well closer to the development loop, but only when not running too many transforms. There is no good caching strategy for reusing unchanged parts of a graph because they are really hard to track when any transform can mutate anything. So for the bigger operations like bundling, spriting and compression we discourage use of assetgraph in development as it would slow you down.