Example for build hooks

[Peter StJ]

We have been stuck in a totally different set of tool chain for the past 2 years (namely closure tools) and finally I had the time to explore what is hew out there and what would make my development easier. I was amazed to find this project and I am shocked it has not gain enormous attention on the Internet yet. I realize most developers do not have the stagnated tool chain as me for so long and might not be as impressed but still I think this is great project.

For the last years we have accumulated dozen of reusable, highly optimized, highly portable and really self contained components derived from the projects we have developed. However those are written for the closure compiler and as such are unusable outside of a compile. I have been looking for a method to "open" those components for use in any project for several reasons, one of the primary ones being to make it more accessible to the new developers joining our teams and accustom to other set of tools. I believe this project is a perfect fit as it allows management and choice without restrains in tools.

In order all this to work I need to automate some pre-processing of the files. From the documentation I see there is a notion of hook for the component-builder. An example would be nice as I need to make sure I understand how it was designed to be used instead of making a mess out of it. Also would be great to include how to integrate it so that other devs in the team can continue to use 'component build' transparently. Initially I have a small script that needs to be run before the concatenation (to remove any traces of the closure library require and defines - Ideally this should not generate new files but instead the output should be used at the next step) and a separate case is to build typescript files - again without producing additional files if possible. A good next step would be also to run uglify in case we want to test for production. A small example of a hook from external package would be very helpful.

Also it was mentioned somewhere that more tan one build file can be produced. I am especially interested how this can be achieved with css as we have an app candidate for test project with components but it uses themes heavily and requires at least 3 separate stylesheets in which styles overlap, if those are included all in one file it would not work.

Thanks.

[Tj]

Thanks! I've learned so far that it's usually the more familiar tool arhat get popular (bower etc) but that's ok, I like what we are doing. As far as the build command goes I don think we will end up allowing it to be manipulated from the outside, but my end goal is to make the builder's API much nicer and easier to use directly. I'll try and get some examples soon. 

Sent from my iPhone

--
You received this message because you are subscribed to the Google Groups "component" group.
To unsubscribe from this group, send email to componentjs...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Ronan Berder]

Same here: would be interested in seeing how to use build hooks properly. In the meantime, I am just relying on a Makefile to handle some of the simpler operations. For example for compiling LESS files in my components on a project (where my local components where in `lib/`):

SRC = $(wildcard lib/*/*.js)

HTML = $(wildcard lib/*/*.html)

TEMPLATES = $(HTML:.html=.js)

LESS = $(wildcard lib/*/*.less)

CSS = $(LESS:.less=.css)

build: components $(SRC) $(TEMPLATES) $(CSS)

@component build --verbose --out . --name assets

components: component.json

@component install

%.js: %.html

@component convert $<

%.css: %.less

@lessc $< $@

clean:

rm -fr build components $(TEMPLATES)

.PHONY: clean

[Ian Fuller]

Hi Ronan,

I've been deliberating over using component io because I couldn't see how to introduce a build step for less. I don't suppose you could expand on the makefile changes you've made, or reference any docs? I am going to get up to speed on makefiles in general but whilst assessing component.io more broadly I'd like to know how much these additions break from the standard component.io workflow (essentially, how difficult I'd be making things if I adopted this approach).

Thanks in advanced,

Ian