Gulp workflow suggestion

[Timan Veteran]

I'm currently trying to setup a "static" frontend/styleguide of sorts for a project, and needing some help/direction on where I should go with what type of workflow/plugins/etc I should use.

Basically right now I'm using gulp + handlebars, converting templates into static html, and using sample json data to create placeholder examples on pages. This works great, however what I have currently, limits the project structure I can use/want.

So without going into detail (this is still pretty much all new ground for me), I am trying to do the following structure for this project. I just have no clue where to begin, what type of workflows/frameworks/gulp plugins etc could potentially allow this.

Ignore the current folder/file names:

• dist - compiled static version of site
• src - where all assets are stored, images, scss, templates, data etc
  • assets
    • scss - global styling
    • js - global js
    • media
      • images
      • video
      • audio
  • pages
    • index
    • page
    • gallery
      • single image
  • components
    • gallery - component directory that contains the template, example data, component specific css/js
      • template.hbs - the handlebars or whatever template
      • data.json - example data
      • style.scss - standalone scss
      • javascript.js - standalone js
      • info.md - info about component
  • layouts
    • 1 column
    • 2 column
    • modal

 

Basically the idea is, this project has 100+ components, that each may have different variants that require alot of component specific styling/functionality. With this structure, it allows everything to be pretty modular, and allows for other projects to take the component folder, and plop in and it'd just work (for the most part of course).

Has anyone had any experience with something like this? If so any sort of suggestions/input would be appreciated it. Doesn't seem to be too much out there, or its some wonky thing that requires non-html type templates.

Anyway, thanks.

[pqt]

Even though you're shooting for static, is there anything that would stop you from using the Laravel Framework in PHP? In comes with Gulp functionality (although I don't use it since I just watch SCSS assets with the ruby command line) and then you also have access to the blade templating system which is actually really, really, REALLY easy to add generated content and throw in conditional statements for loading. (Video showing some basics)

You'd be able to do everything you wanted with a bit of tinkering around and using the vendor folder for additional components.

Alternatively, what about using Jekyll, it's what Github Pages is build using and I haven't looked into it very much, but it may be exactly what you're looking for.

[game_over]

Even though you're shooting for static, is there anything that would stop you from using the Laravel Framework in PHP? In comes with Gulp functionality (although I don't use it since I just watch SCSS assets with the ruby command line) and then you also have access to the blade templating system which is actually really, really, REALLY easy to add generated content and throw in conditional statements for loading. (Video showing some basics)

You'd be able to do everything you wanted with a bit of tinkering around and using the vendor folder for additional components.

Alternatively, what about using Jekyll, it's what Github Pages is build using and I haven't looked into it very much, but it may be exactly what you're looking for.

Wasn't sure I understood his question correctly so I didn't bother replying but this is pretty much what I was thinking also.

Is there a particular reason you are using Gulp to convert to static? Why do you need static pages? Another alternative is stick all of your components online using Gists and then you can use plugins within your code editor to quick pull down any bits of code (e.g. Fetch for Sublime Text)

[pqt]

Wasn't sure I understood his question correctly so I didn't bother replying but this is pretty much what I was thinking also.

Is there a particular reason you are using Gulp to convert to static? Why do you need static pages? Another alternative is stick all of your components online using Gists and then you can use plugins within your code editor to quick pull down any bits of code (e.g. Fetch for Sublime Text)

It's really difficult to suggest anything when we don't know the complete end goal  

[Timan Veteran]

Yep, so basically this static frontend code, is then taken and used by another team of people to incorporate it into whatever project they're doing. Its also used as a sandbox, where they can go back and see if something is rendered correctly or not (as it would be the hub of clean/correct markup & design).

So even with looking at things like jekyll, are there any example workflows, or anything that kinda works with the structure I have in the first post?

Btw thanks for the responses, its a bit overwhelming/confusing at times wrapping your head around all this stuff, so sorry if it wasn't detailed.