Hinweis: Diese Frage ist nur für Grunt 0.3.x relevant und wurde als Referenz hinterlassen. Hilfe zur neuesten Version von Grunt 1.x finden Sie in meinem Kommentar unter dieser Frage.
Ich versuche derzeit, mit Grunt.js einen automatischen Erstellungsprozess einzurichten, um zuerst CSS- und JavaScript-Dateien zu verketten und dann zu minimieren.
Ich konnte meine JavaScript-Dateien erfolgreich verketten und minimieren, obwohl jedes Mal, wenn ich grunze, nur an die Datei angehängt zu werden scheint, anstatt sie zu überschreiben.
Was das Minimieren oder sogar Verketten von CSS betrifft, konnte ich dies bisher nicht tun!
In Bezug auf grunzende CSS-Module habe ich versucht consolidate-css
, grunt-css
& cssmin
aber ohne Erfolg. Ich konnte mir nicht vorstellen, wie man sie benutzt!
Meine Verzeichnisstruktur ist wie folgt (eine typische node.js-Anwendung):
- app.js.
- grunt.js
- /public/index.html
- / public / css / [verschiedene CSS-Dateien]
- / public / js / [verschiedene Javascript-Dateien]
So sieht meine grunt.js-Datei derzeit im Stammordner meiner Anwendung aus:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: '<json:package.json>',
concat: {
dist: {
src: 'public/js/*.js',
dest: 'public/js/concat.js'
}
},
min: {
dist: {
src: 'public/js/concat.js',
dest: 'public/js/concat.min.js'
}
},
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
node: true
},
globals: {
exports: true,
module: false
}
},
uglify: {}
});
// Default task.
grunt.registerTask('default', 'concat min');
};
Um es zusammenzufassen, ich brauche Hilfe bei zwei Fragen:
- So verketten und minimieren Sie beispielsweise alle meine CSS-Dateien unter dem Ordner
/public/css/
in einer Dateimain.min.css
- Warum hängt grunt.js weiterhin an die verketteten und minimierten Javascript-Dateien
concat.js
undconcat.min.js
darunter an,/public/js/
anstatt sie bei jedergrunt
Ausführung des Befehls zu überschreiben ?
Aktualisiert am 5. Juli 2016 - Upgrade von Grunt 0.3.x auf Grunt 0.4.x oder 1.x.
Grunt.js
wurde in eine neue Struktur verschoben Grunt 0.4.x
(die Datei heißt jetzt Gruntfile.js
). Weitere Informationen zum Einrichten eines Erstellungsprozesses für finden Sie in meinem Open Source-Projekt Grunt.js SkeletonGrunt 1.x
.
Der Wechsel von Grunt 0.4.x
nach Grunt 1.x
sollte nicht viele wesentliche Änderungen mit sich bringen .
quelle
concat
in denjs
Sinn gekommen, dass ich es in denselben Ordner aufnehmen würde, in dem es aufgenommen und angehängt würde! Ich habe angefangen, cssmin zu verwenden und es funktioniert großartig! Danke noch einmal.concat.min.css
undconcat.min.js
. Wenn ich etwas ändere, erneut ausführe und bereitstelle, erhalten die Benutzer nicht die neueste Version, da der Browser sie bereits zwischengespeichert hat. Es gibt eine Möglichkeit , zufällig die Datei zu benennen und Glied nach ihnen in den richtigen<link>
und<script>
Tags?concat.min-<%= pkg.version %>.js
.dest
wie folgt verwendencssmin: { css:{ src: '<%= concat.css.dest %>', dest: './css/all.min.css'
}} `Es ist das Ergebnis der Operationconcat -> css
Ich möchte hier eine sehr, SEHR interessante Technik erwähnen, die in großen Projekten wie jQuery und Modernizr zum Verketten von Dingen verwendet wird.
Beide Projekte wurden vollständig mit requirejs-Modulen entwickelt (das sehen Sie in ihren Github-Repos) und verwenden dann den requirejs-Optimierer als sehr intelligenten Verketter. Das Interessante ist, dass, wie Sie sehen können, weder jQuery noch Modernizr Anforderungen benötigen, um zu funktionieren, und dies geschieht, weil sie das syntaktische Ritual von requirejs löschen, um requirejs in ihrem Code loszuwerden. So erhalten sie eine eigenständige Bibliothek, die mit requirejs-Modulen entwickelt wurde! Dank dessen sind sie unter anderem in der Lage, maßgeschneiderte Builds ihrer Bibliotheken durchzuführen.
Für alle, die an einer Verkettung mit dem Optimierer requirejs interessiert sind, lesen Sie diesen Beitrag
Es gibt auch ein kleines Tool, das die gesamte Kesselplatte des Prozesses abstrahiert : AlbanilJS
quelle
Ich stimme der obigen Antwort zu. Hier ist jedoch eine andere Möglichkeit der CSS-Komprimierung.
Sie können Ihr CSS mithilfe des YUI-Kompressors verknüpfen :
quelle
Sie müssen das concat-Paket nicht hinzufügen, Sie können dies über cssmin wie folgt tun:
Und für js verwenden Sie uglify wie folgt:
quelle
Ich denke, kann automatischer sein, Grunzaufgabe usemin kümmern sich darum, all diese Jobs für Sie zu erledigen, brauchen nur einige Konfiguration:
https://stackoverflow.com/a/33481683/1897196
quelle