Copy NPM module/library to distribution folder using Gulp

Question

Most web applications these days include various prebuilt libraries e.g. Backbone.js.

I want, when I compile my web application with Gulp, to output a single compressed JavaScript file of the library/module I installed using NPM e.g. backbone-min.js.

For example, when you install Backbone.js from NPM the following is installed into the node_modules folder:

.
├── backbone
│   ├── LICENSE
│   ├── README.md
│   ├── backbone-min.js
│   ├── backbone-min.map
│   ├── backbone.js
│   └── package.json

I want to be able to run gulp compile and get the following result in my web application distribution folder:

.
├── index.html
├── scripts
│   ├── backbone-min.js // this is the file I want to copy or generate
│   ├── main.min.js

The way I see it Gulp either needs to either:

• compile and minify the library/module and write it to a file called backbone-min.js to the scripts folder, or
• copy the backbone-min.js in the backbone module folder to the scripts folder.

What is the best way of doing this?

Answer 1

Short Answer

gulp-useref concatenates all the file references in your main .html file encapsulated by <!--build:js /lib.js--> for javascript files and <!--build:css /lib.css--> followed by <!--endbuild-->

The result will be:

index.html
├── scripts
│   ├── backbone-min.js // this is the file I want to copy or generate
│   ├── main.min.js

as you and every good developer wants it to be.

Long Answer

My recommendation would be to use Bower as your app dependencies manager and npm as your development dependencies manager.

Use gulp-wiredep to automatically inject dependencies as you install/uninstall them and that way you don't have to maintain library css and js files in your index.html.

Uset gulp-inject to automatically inject your own css and js files as your add/remove them. This will result in never ever having to maintain application dependencies manually.

With wiredep, inject and useref you never have to touch your dependencies again.

This is what my index header and end of body look like:

 <!---------------------------- Bower Managed Styles ----------------------------->

<!--build:css css/lib.css-->
<!--bower:css-->

<link rel="stylesheet" href="../bower_components/..."

<!--endbower -->
<!--endbuild -->

<!---------------------------- Application Styles ------------------------------->

<!--build:css css/app.css-->
<!--inject:css-->

<link rel="stylesheet" href="content/css/bootstrap ..."

<!--endinject-->
<!--endbuild-->


 <!--------------------------- Bower Managed Javascript ------------------------->

    <!--build:js js/lib.js-->
    <!--bower:js -->

    <script src="../bower_components/ ..."> </script>

    <!--endbower -->
    <!--endbuild -->

    <!-------------------------- Application Javascript --------------------------->

    <!--build:js js/app.js-->
    <!--inject:js-->

    <script src="app/ ..."> </script>

    <!--endinject-->
    <!--inject:templates:js-->
    <!--endinject-->
    <!--endbuild-->

The comments are tags used by the tools I just mention in order for them to know where to insert the dependencies of interest.

My application entry is a single template reference. Needless to say I never visit index.html. I never have a reference to a file that does not exist. I never have a file that does not have a reference.