Kopieren von NPM-Modul/Bibliothek in den Distributionsordner unter Verwendung von Gulp

Question

Die meisten Webanwendungen umfassen heutzutage verschiedene vordefinierte Bibliotheken, z. Backbone.js.

Ich möchte, wenn ich meine Webanwendung mit Gulp kompiliere, eine einzelne komprimierte JavaScript-Datei der Bibliothek/des Moduls ausgeben, die ich unter Verwendung von NPM z. backbone-min.js.

Zum Beispiel, wenn Sie Backbone.js von NPM installieren Sie das folgende in den node_modules Ordner installiert ist:

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

Ich möchte in der Lage sein gulp compile zu laufen und das folgende Ergebnis in meiner Web-Anwendung Distributionsordner erhalten :

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

So wie ich es muss entweder Gulp siehe entweder:

• Kompilierung und minify die Bibliothek/Modul und schreiben Sie es genannt zu einer Datei backbone-min.js zum scripts Ordner oder
• die backbone-min.js im Backbone-Modul-Ordner in den scripts Ordner kopieren.

Was ist der beste Weg, dies zu tun?

Answer 1

Kurzantwort

gulp-useref verkettet alle Dateireferenzen in der Haupt .html Datei von <!--build:js /lib.js--> für Javascript-Dateien gekapselt und <!--build:css /lib.css--> gefolgt von <!--endbuild-->

Das Ergebnis wird sein:

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

wie Sie und jeder gute Entwickler will es Sein.

Lange Antwort

würde meine Empfehlung Bower als App Abhängigkeiten Manager und npm als Entwicklungs Abhängigkeiten Manager zu verwenden sein.

Verwenden Sie gulp-wiredep, um Abhängigkeiten automatisch zu injizieren, wenn Sie sie installieren/deinstallieren, und auf diese Weise müssen Sie die Bibliotheken css und js in Ihrer index.html nicht verwalten.

Uset gulp-inject automatisch injizieren Sie Ihre eigenen CSS-und JS-Dateien als Ihre hinzufügen/entfernen sie. Dies führt dazu, dass nie jemals Anwendungsabhängigkeiten manuell pflegen müssen.

Mit Drahtdep, inject und useref müssen Sie nie wieder Ihre Abhängigkeiten berühren.

Dies ist, was mein Indexkopf und Ende des Körpers wie folgt aussehen:

<!---------------------------- 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--> 

Die Kommentare werden Tags, die von den Werkzeugen verwendet ich, um nur erwähnen, für sie zu wissen, wo die Abhängigkeiten von Interesse einzufügen.

Mein Anwendungseintrag ist eine einzelne Vorlagenreferenz. Unnötig zu sagen, dass ich index.html nie besuche. Ich habe nie einen Verweis auf eine Datei, die nicht existiert. Ich habe nie eine Datei, die keine Referenz hat.