Deka87 Deka87 - 7 days ago 5
Javascript Question

Where do I store third party plugins when setting up gulp?

I am learning to use Gulp for web development, and has successfully set it up to optimize my assets for a production website. My folder structure looks like:

|- app/
|- less/
|- img/
...
|- plugins/
|- dist/
|- node_modules/
|- gulpfile.js
|- package.json


So currently my plugins are in the
/app
folder, whereas the whole site is being compiled in
/dist
for production. I could think of two options:


  1. Move the
    /plugins
    folder outside the
    /app
    folder, however
    .html
    files inside the
    dist
    folder would have to link to files outside the
    dist
    in this case (e.g.
    ../plugins/...
    ) which doesn't seem logical.

  2. Copy the whole
    plugins
    folder every time I compile the project with
    gulp build
    which seems to take a while. Not sure if that's a right way to do it.



Any advice would be appreciated.

Answer

I'm a little surprised that I couldn't find this in their docs, but third party plugins should be managed by using npm.

'npm install --save plugin-name'

Arguably you might use the --save-dev flag instead

EDIT

As for third party clientside libraries, you can still use npm, but some folks prefer to use bower or other tools instead.

It is generally considered best practice to not minify the third party scripts further, but instead you'd leave them in node_modules and make that servable, copy them to your dist folder or concatenate them with your other files as appropriate to your requirements.

As for how you let index.html know where to find them, that's going to be the same as how you do it for other files and depends on your workflow. Some folks object all their scripts through a function on the server which either provides he location of the one concatenated and minified production file or an array of the separate source files and renders scripts for each as appropriate.