Asset Pipeline

[niallobrien]

Hi all, I'd be interested in helping out with a Gulp based asset pipeline. My initial thoughts are to have Less, Stylus & Sass support but default to Sass due to popularity (not my first choice btw - but makes sense). I could also setup BrowserSync and Browserify with an initial client side JS setup. I haven't dug into ES6 just yet, so would probably need a little help in that regard. I also recommend Bootstrap 4 (though I prefer Foundation 6) again due to popularity and would mean users can prototype super-quick. Not sure how to handle static assets (such as images etc.) unless we develop locally assuming a production environment. I'd appreciate any thoughts on the above - thanks.

[niallobrien]

Regarding static files (images, CSS etc) we can easily append a hash to the files and output the assets to /public/images or whatever, but we just need to make sure we account for this when using images in the HTML or CSS etc. so it can always pull in the relevant file, regardless of the file name with the appended hash.

[thetutlage]

I have to clear my thoughts on asset pipeline first, will keep this thread open and will discuss more on this with you

[niallobrien]

Fantastic, I'm more than willing to help regardless on how you'd like to proceed. As soon as we have a plan, I can get to work on it. One difficulty will be how to manage this vs users who want to create a REST API backend, but personally, I'd keep the client & server separate anyways, so Adonis wouldn't have to handle the asset pipeline in this scenario. Following Laravel's setup would be a wish choice as both have many similarities already (IoC, service providers etc). Thanks again.

[RomainLanz]

We can maybe fork Laravel elixir and create our wrapper.

[niallobrien]

@RomainLanz No need. We can simply use Webpack or Gulp.

[RomainLanz]

Note that Laravel elixir is just a Gulp wrapper to have a better api.

[niallobrien]

Yeah, it's a PHP abstraction layer on top - something we don't need. I can quite happily build a Gulp asset pipeline for an Adonis.js project which will run when in dev, however I'd like to hear what @thetutlage has in mind before I do such a thing and submit a PR only to have it rejected.

[thetutlage]

I very much like Laravel elixir , but elixir itself has lot of missing stuff inside it. There reason Laravel elixir makes sense is.

Php world is not expected to understand gulp completely, so having something like elixir helps them as they do not have to get into gulp and understand what streams are.

But in NodeJs it is different, people use gulp before using Sass and wants more flexibility in order to do certain things. Frankly saying i have no clue on how to approach assets pipeline, as i do not want to restrict anyone by giving minimal functionality.

Finally let me express my views of what i am expecting out of Asset pipeline

1. Should be fluent with syntax ( this is what elixir is ).
2. Support for plugins, as gulp has endless possibilities and integrating everything simply does not makes sense, infact it should support the use of plugins, allowing others to contribute.
3. Plugins should have access to service providers, so that they have make use of project lifecycle.

Again this is a rough draft, as my ideas are not very clear and would love to approach it once i feel Adonis is stable

[niallobrien]

I'd be inclined to run the asset pipeline almost as a separate process. For example, take a look at a typical Sails.js project, it's very straight-forward to add Sass support by simply adding a new Gulp task. Creating a dependency between the framework and asset pipeline wouldn't be an ideal approach in my opinion, as some might want to replace Gulp with Webpack for example and a hard dependency would make that more difficult.

So I think so long as Gulp is setup to watch & compile assets within an Adonis project, I think that would be more than sufficient. This could include support for Sass, Less, Stylus, BrowserSync, Browserify etc. out of the box.

[thetutlage]

Yeah, as i said my views are very blurry on it right now, keeping this issue open and will catch you soon on it

[niallobrien]

Cool, I can possibly put something together and we could iterate from there if you'd like? Nothing's going to be perfect from the start.

[niallobrien]

@thetutlage For example, it could resemble something like what I did here: https://github.com/niallobrien/MVP-Boilerplate/tree/master/config/gulp-tasks

[thetutlage]

@niallobrien Sure you can start with something, but do make sure to keep syntax fluent with less curly braces. Adonis itself is all about readability.

:+1:

[niallobrien]

@thetutlage Thanks, will keep that in mind.

[thetutlage]

You can grab my email from my profile and share your details, i will add you to the slack channel for further communication

[bitkidd]

I've been playing a lot with Sails.js lately and its Grunt/Gulp integration seems pretty good and simple. As @niallobrien said, it is way more convenient when build processes are separated from the main app. Sails just runs default task on init and that's it.

[Vadorequest]

:+1: With @keeross. I also use Sails a lot and I had to change many things in there and it was possible because they put all tasks in a tasks folder. I could even remove all the files from it and use Gulp instead of Grunt and it would still work correctly. (Sails uses Grunt by default)

[RomainLanz]

@keeross, @Vadorequest has you can see in the Trello's Card about Asset Pipeline is that we want a simple, readable file to configure the asset (simpler than Grunt config file).

Does it seems good for you?

https://trello.com/c/34kKKWzw

[niallobrien]

I don't think so. I think the asset pipeline should be separate as there's people who might want to use Webpack instead of Gulp etc. Going the same route as Laravel is not something I'd like (personally).

[thetutlage]

Moving to gitter

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.