0

I've been looking for a nice way to organize my website, and I've found Grunt, npm, Gulp, and a handful of other great things. I'm going for something that can organize a webpage by using modules in HTML, CSS, and JavaScript, or a way to do this in the methods I previously listed. For example:

+-- files
| +-- html
| |  +-- header.html
| |  +-- footer.html
| |  +-- content.html
| +-------
|
| +-- styles
| |  +-- stylesheet.scss
| |  +-- fonts.css
| +---------
|
| +-- scripts
| |  +-- base.js
| |  +-- jquery.min.js
| |  +-- bootstrap.min.js
| +----------
+-------------

And then (magic tool) would magically merge the javascript files together into one file, merge the styles into one file, and merge the HTML components into one file.

TL;DR: Organizing my files is getting complicated, magical way to organize files is needed, or project will explode violently.

Cheers,

A very disorganized Captain Crunch

Captain Crunch
  • 37
  • 1
  • 7

2 Answers2

2

Tools like Grunt, npm, Gulp you've mentioned are build tools... I use such tool called webpack to bundle up all my css and js files into one big js file and minify it... Find Link to webpack css bundler here
What kind of languages you use: static html? jQuery? angular? react?
File structures will vary according to language you're using.
For static html web pages you can use index.html and give links to other web pages. Refer this stackoverflow answer for simple website struture
However there are advanced file structures when developing with frameworks/libraries like Angular and React... So depends on what you're are developing with.

Community
  • 1
  • 1
udarabibile
  • 503
  • 1
  • 6
  • 16
  • Thanks! Webpack did look like an interesting option along with Browserify. I think that's what I'm going for, and I typically use a suite of HTML, CSS, JavaScript, and sometimes BootStrap and JQuery. – Captain Crunch Dec 23 '16 at 16:27
1

That is a pretty organised design I suppose. You can have a nice design on your IDE but there is no guarantee the magic tools will generate CSS that will not leak or the Javascript with no global namespace pollution.

If you wanna do it better, you might wanna consider using web components with Shadow DOMs (with polyfills if you need to) and have your code organised in run-time as well. Shadow DOMs are pretty much the light weight replacement for IFrames. You can think of IFrames are like traditional Virtual Machines (like Virtual Box, VMWare) etc and Shadow DOMs are like Docker and BSD jails.

If you are new to Javascript, I recommend you to not to use the magic tools and as they have their own learning curves and might confuse you more than help you.

If you wanna get away with all the front end complexities but still want most of the benefits of Single Page Apps you might wanna consider using techniques like TurboLink (https://github.com/turbolinks/turbolinks) or HTML-5 history API (for handling routes) with Server Side rendering and passing special HTTP tokens to fetch the pre-rendered contents from the server side.

Disclaimer: The last approach I mentioned is not necessarily the best approach if you have a lot of moving parts on the front end but if it fits your use case it can significantly reduce the complexities and help you get organised.

I highly encourage you to use Profilers, measure different approaches and work out the biggest bang for your buck. One size does not fit all.

Eddie
  • 1,043
  • 8
  • 14
  • Not too new to javascript, organization is becoming big at this point as making stuff stay together is getting out of hand. I'm looking at node and grunt and all the others at the same time and my head is exploding. I'm very familiar with VanillaJS, JQuery, and all the other basics. I really want to know how to convert a clean developer version of my pages to a smaller, more compact version for usage. – Captain Crunch Dec 23 '16 at 05:28
  • 1
    You are not alone. My head is exploding as well. Too many confusing Javascript tools and frameworks. You might wanna consider using Javascript 2015 as it has an elegant module loading system like Python. – Eddie Dec 23 '16 at 05:38