Minify Scripts/CSS en mode de production avec node.js

J'ai une application web qui s'exécute dans le nœud. Tous les (client) Javascript/CSS fichiers ne sont pas minimisé au moment de le rendre plus facile à déboguer.

Quand je vais dans la production, je tiens à rapetisser ces scripts. Il serait agréable d'avoir quelque chose comme:

node app.js -production

Comment puis-je me servir de la version compacte de mes scripts sans modifier les balises de script dans mes fichiers html? Il devrait y avoir quelque chose comme: si je suis dans la production, l'utilisation de ces 2 minimisé(combiné) les scripts, sinon utiliser tous mes unminified scripts..

Est-ce possible? Peut-être que je pense trop compliqué?

OriginalL'auteur Christian | 2013-02-12

18

Vous pourriez être intéressé par Piler. C'est un Node.js module qui offre tout le JavaScript (et CSS) les fichiers que vous spécifiez comme d'habitude en mode débogage, mais concaténés et minimisé lorsque dans le mode de production.

Comme une fonction spéciale, vous pouvez forcer CSS mises à jour via Socket.io en temps réel s'affichent dans votre navigateur (appelé "CSS mis à Jour en Direct" dans Piler), ce qui est tout à fait génial :-).

Le truc, c'est qu'à l'intérieur de votre modèle, vous avez seulement des espaces réservés pour les script et link éléments, et Piler rend ces éléments au moment de l'exécution - comme de simples éléments en mode debug, et généré dynamiquement, un seul élément dans le mode de production.

De cette façon, vous pouvez oublier sur la création de concaténés et minimisé les versions de vos actifs manuellement ou à l'aide d'un outil de construction, il est juste là au moment de l'exécution, mais vous avez toujours séparés, les versions complètes lors du développement et de débogage.

Merci, cela a l'air prometteuse..
Vous êtes les bienvenus :-)!

OriginalL'auteur Golo Roden
4

vous pouvez utiliser 2 endroits distincts pour vos fichiers statiques

Voici quelques exprimer code:
```
if (process.env.MODE === "production") {
  app.use(express['static'](__dirname + '/min'));
} else {
  app.use(express['static'](__dirname + '/normal'));
}
```
et le nœud de départ avec
```
MODE=production node app.js
```
En outre, si vous ne voulez pas de dupliquer l'ensemble de vos fichiers, vous pouvez prendre avantage du fait qu'exprimer statique routeur s'arrête à la première fichier, et faire quelque chose comme ceci à la place:
```
if (process.env.MODE === "production") {
  app.use(express['static'](__dirname + '/min'));  //if minized version exists, serves it
}
app.use(express['static'](__dirname + '/normal'));  //fallback to regular files
```
Utiliser le même nom pour minimiser ou pas va causer des problèmes avec le cache du navigateur, cependant.

eh bien, je vous remercie. 🙂
petite question - êtes-vous ce qui suggère que la minifiés js fichier doit être présent dans ce dossier? Si c'est le cas, vous aurez à construire sur votre système à chaque fois il y a un changement et utiliser git etc de le pousser à la production qui ne semble pas être une très bonne idée.
non, le minifiés fichier doit généralement pas être stockés dans le dépôt git. Soit le serveur lui-même, ou quelque chose comme grunt peut être utilisé sur le serveur de production pour générer la version compacte.
Pour démarrer en mode de production utilisation suivantes NODE_ENV=production nœud app.js

OriginalL'auteur Pascal Belloncle

Je veux partager ma dernière solution avec vous les gars.

- Je utiliser JSHTML pour l'Express (entrez description du lien ici)

Dans mon principal nœud de fichier j'utilise un itinéraire spécial:

app.get('/**:type(html)', function (req, res, next) {
var renderingUrl = req.url.substring(1, req.url.lastIndexOf("."));
//TODO: Find a better solution
    try{
        var assetUrl = req.url.substring(req.url.lastIndexOf("/") + 1, req.url.lastIndexOf("."));
        var assets = config.getResourceBundle(assetUrl);
        assets.production = config.getEnviroment() === "production";
        res.locals(assets);
        res.render(renderingUrl);
    }catch(e){
        res.redirect("/");
    }
});

Comme vous pouvez le voir, je reçois mon actifs de config.getResourceBundle. C'est tout simplement une fonction:

exports.getResourceBundle = function(identifier){
    switch(enviroment){
        case "development":
            return devConfig.getResourceBundle(identifier);
        case "production":
            return prodConfig.getResourceBundle(identifier);
        default:
            return devConfig.getResourceBundle(identifier);
    }
}

Et enfin un exemple pour un actif d'une collection de fichiers est ici:

exports.getResourceBundle = function (identifier) {
    return resourceBundle[identifier];
};


resourceBundle = {
    index:{
        cssFiles:[
            "resources/dev/css/login.css",
            "resources/dev/css/logonDlg.css",
            "resources/dev/css/footer.css"
        ],
        jsFiles:[
            "resources/dev/js/lib/jquery/jquery.183.js",
            "resources/dev/js/utilities.js",
            "resources/dev/js/lib/crypto.3.1.2.js"
        ]
    },
    register:{
        cssFiles:[
            "resources/dev/css/login.css",
            "resources/dev/css/modalDialog.css",
            "resources/dev/css/footer.css"
        ],
        jsFiles:[
            "resources/dev/js/lib/jquery/jquery.183.js",
            "resources/dev/js/utilities.js",
            "resources/dev/js/lib/crypto.3.1.2.js",
            "resources/dev/js/lib/jquery.simplemodal.js",
            "resources/dev/js/xfiles.register.js"
        ]
    }
(...)

J'ai 2 dossiers. dev /prod. grunt va copier les fichiers minifiés en prod/.. et supprime les fichiers de dev/...
Et si le NODE_ENV variable est définie à la production, je vais expédier le minimisé les versions de mes scripts/css.
Je pense que c'est la solution la plus élégante pour le moment.

OriginalL'auteur Christian

1

Il y a des outils de construction des plugins pour vous, peut vous aider gracieusement à résoudre ce problème:

Pour Gulp:
https://www.npmjs.org/package/gulp-useref/

Pour Grunt:
https://github.com/pajtai/grunt-useref

OriginalL'auteur Dickeylth
0

Un autre Node.js module qui pourrait être pertinent, c'est connectez-cachify.

Il ne semble pas faire l'minification pour vous, mais il ne laisse vous servir de la version compacte de la production, ou l'original de tous les scripts dans le développement, sans modifier les templates (grâce à cachify_js et cachify_css).

Semble qu'il n'est pas aussi riche en fonctionnalités que Piler, mais probablement un peu plus simple, et doit répondre à toutes les exigences mentionnées dans la question.

OriginalL'auteur Tomty

Vous devez vous connecter pour publier un commentaire.