209

I'm looking at a Git repository for a jQuery plugin. I want to make a few changes for use in my own project, but when I opened up the repository it had a structure I've never seen before. I'm not sure which files to use / copy into my own project.

There is a "dist" and a "src" folder. What purpose do these serve? Is this something specific for Grunt or maybe jQuery plugins?

The Git repository I'm curious about: https://github.com/ducksboard/gridster.js

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Don P
  • 60,113
  • 114
  • 300
  • 432

1 Answers1

286

src/ stands for source, and is the raw code before minification or concatenation or some other compilation - used to read/edit the code.

dist/ stands for distribution, and is the minified/concatenated version - actually used on production sites.

This is a common task that is done for assets on the web to make them smaller.

You can see an example here in Combine multiple JS files into one using JavaScript, Node.js and Grunt.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
dmullings
  • 7,070
  • 5
  • 28
  • 28
  • 4
    Why do we put files such as `index.html`, `style.css` or even `bundle.js` in the dist folder, don't they belong in the src folder along with the other source files? - since they are "raw code" (eg. raw html or javascript file ?), afterall they have not been processed for production yet. – Sebastian Nielsen Jul 27 '18 at 11:31
  • 4
    @SebastianNielsen because those files that the web browser will be retrieve and use to display. They are not src files that will be transpiled to something else. Those are the distribution files. – dmullings Jul 28 '18 at 18:25
  • When using sass I usually put both style.css and style.min.css in the dist folder. Is that wrong? My idea is that the admin can choose to use the minified css or the unminified css. Both are accepted by the browser. – Jens Törnell Nov 14 '18 at 15:57
  • 3
    @Jens Törnell I think that is fine. They are both valid to browser as they have been already compiled to css. What would not belong in the `dist` folder are source .scss or .sass files that were used to create the .css files – dmullings Nov 15 '18 at 14:06
  • 8
    Why not spell out the entire folder name? If that was the case we would not have to ask this question... Instead we have abbreviated folder names that are not abbreviated well enough to infer their purpose. – Marko Nov 22 '19 at 01:10
  • 7
    @Marko Cryptic names are a relic of the early days of computing when memory and storage space was limited. It's mostly a cultural thing, I can't find any other good reason for upholding the custom. There's nothing wrong in using `source/`, `public/`, `binaries/` and `libraries/`. But some people will scowl at you. – ximo Dec 27 '19 at 21:58