0

With node.js projects using Grunt/Gulp its common to see a src and dist folders. But lets say you are building a static site and have folders of other non-compiled files like fonts and pdfs. Do these go inside dist?

That way you can upload one directory and have all of your production assets. Thank you for the help.

JacobLett
  • 427
  • 6
  • 18

1 Answers1

0

In short, there is no real right or wrong answer to your question.

FWIW - I always store fonts and pdfs in the src folder and ultimately they get copied to the dist folder during my build process. One of the benefits of doing that is as you've already mentioned...

That way you can upload one directory and have all of your production assets.

Another justified reason for copying those assets from src to the dist folder is that I typically define relative paths to other asset in the source code. For example.

html 

<img src="./images/icons/logo.gif" alt="logo">

css

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato/Lato-Regular.eot');
    src: url('../fonts/Lato/Lato-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Lato/Lato-Regular.woff') format('woff'),
    url('../fonts/Lato/Lato-Regular.ttf') format('truetype'); 
    font-style: normal;
    ...
}

By copying all referenced assets and replicating the necessary subfolders of the src directory to the dist folder, it avoids the need to redefine the asset paths in the distributable code.

For example, take the @font-face shown above. If the fonts folder and the font files are not copied to the dist folder it results in having to redefine the url in the distributable .css code. (Either new 'relative' or new 'absolute' paths).

Whilst there are build tools that can replace the path references I like to consider the dist folder as a job bag that includes all the necessary assets independently of the src folder.

Again, there is no wright or wrong answer. Consider the pros and cons of either copying the assets (pdf's and fonts) to the dist folder and choose the approach that best suits your workflow and/or business requirements.

RobC
  • 22,977
  • 20
  • 73
  • 80
  • Hi @RobC thanks for sharing your workflow. I also see some projects with a "src" folder and some without it. I am trying to teach beginners how to follow a best practice so I appreciate your perspective. – JacobLett Jan 27 '17 at 19:48
  • could you please explain what the dot in front of ./images does? I have seen ../ and ~/ but not that one. – JacobLett Jan 31 '17 at 15:11
  • 1
    `./images` means the _images_ folder in the current directory. I.e. The _images_ folder which resides in the same folder as the `.html` file which is making the reference to it. Further info [here](http://stackoverflow.com/questions/7591240/what-does-dot-slash-refer-to-in-terms-of-an-html-file-path-location#27264246). – RobC Jan 31 '17 at 17:17
  • Thank you. Learned something new today : ) – JacobLett Jan 31 '17 at 17:18