tmslnz/gulp-shopify-theme

Question: Splitting gulp tasks

Closed this issue · 6 comments

shelldandy commented

Is it possible to achieve a usable workflow but splitting each task on its own file?

Just wondering because the actual magic happens on the theme.stream() action 🤔

I saw your gist snippet and its all on a big file that's why it got me wondering

tmslnz commented
shelldandy commented

Well for example i like to keep each gulp task on its own file like this: https://github.com/mike3run/ground-zero/tree/master/gulp/tasks
eg:

sass.js scripts.js fonts.js etc

The idea is to separate tasks or mix and match, to not have a 300 line single gulp file :)

but what i noted on your gist is that the last step of each task is to run theme.stream()

tmslnz commented

Well yes you need to stream the result of the pipeline (or any intermediate step, just like any other Gulp plugin).

You can try using it on a per-file basis. Although I am not sure how you would benefit by using Gulp like that (how do you handle dependent tasks? Composition?).

The plugin should handle throttling correctly (leaky bucket) by listening to the appropriate HTTP response from the Shopify API.

It is also meant to be instantiated multiple times (one may be working on multiple themes at once), but that's a different use-case than yours.

In short... try it out and see?

shelldandy commented

how do you handle dependent tasks? Composition?

Well until this shopify thing my tasks have all been independent pretty much i use gulp 4 so if need to run a task that depends on other first i use gulp.series and for browser-sync i do a reload function like you did on your gist.

I'll try it out thanks a lot for taking the time to respond.

Cheers mate

tmslnz commented

Interesting, thanks. I have not explored Gulp 4 yet. Have a go at it and let me know.

shelldandy commented

@tmslnz what i ended up doing is splitting all related shopify code in a single file.

So the workflow for example with sass would be:

  • the watch task starts theme.init()

  • sass process from src folder and outputs into theme folder

  • the upload task will upload the stuff inside the theme folder using gulp-change-in-place to only upload new stuff

  • after that trigger reload on proxy browser sync

  • profit?