{"id":90,"date":"2020-06-19T17:17:23","date_gmt":"2020-06-19T15:17:23","guid":{"rendered":"https:\/\/darkcity.fr\/blog\/?p=90"},"modified":"2020-06-19T17:25:30","modified_gmt":"2020-06-19T15:25:30","slug":"utilisez-npm-et-gulp-pour-eviter-les-cdn","status":"publish","type":"post","link":"https:\/\/darkcity.fr\/blog\/2020\/06\/19\/utilisez-npm-et-gulp-pour-eviter-les-cdn\/","title":{"rendered":"Utilisez NPM et Gulp pour \u00e9viter les CDN"},"content":{"rendered":"\r\n

L’id\u00e9e est ici de garder votre application compl\u00e8tement ind\u00e9pendante, et d’\u00e9viter mes CDN sur votre page Web.<\/p>\r\n

Nous allons utiliser le couple npm gulp pour ne prendre dans notre package que le n\u00e9cessaire.<\/p>\r\n

Pr\u00e9sentations<\/h2>\r\n

NPM est le gestionnaire de package le plus connu de nodeJS<\/p>\r\n

Gulp est une librairie tr\u00e8s utilis\u00e9e pour personaliser le d\u00e9ploiement et parfois pr\u00e9parer le package de livraison.<\/p>\r\n

Cr\u00e9ation du Projet<\/h2>\r\n

Nous allons utiliser dans notre application les librairies JQuery et Loglevel. Pour ne pas les utiliser nous allons les r\u00e9cup\u00e9rer avec NPM<\/p>\r\n

Pr\u00e9parez un fichier package.json \u00e0 la racine du projet comme suit : (Nous allons expliquer les scripts embarqu\u00e9s juste apr\u00e8s)<\/p>\r\n

\r\n
{\r\n  \"name\": \"mon-extension\",\r\n  \"version\": \"1.0.0\",\r\n  \"description\": \"\",\r\n  \"main\": \"index.js\",\r\n  \"scripts\": {\r\n    \"node-clean\": \"npm prune && npm install\",\r\n    \"build\": \"gulp build\",\r\n    \"test\": \"echo 'no test'\"\r\n  },\r\n  \"keywords\": [],\r\n  \"author\": \"DarkNoon\",\r\n  \"license\": \"GPL-2.0\",\r\n  \"devDependencies\": {\r\n    \"gulp\": \"^4.0.2\"\r\n  },\r\n  \"dependencies\": {\r\n    \"jquery\": \"^3.5.1\",\r\n    \"loglevel\": \"^1.6.8\"\r\n  }\r\n}\r\n<\/pre>\r\n<\/div>\r\n
Puis lancez npm install pour installer les packages dans le dossier node_modules.<\/p>\r\n
\r\n
npm install<\/pre>\r\n<\/div>\r\n
Vous obtenez :<\/p>\r\n
\"\"<\/p>\r\n
Gulp est mon ami<\/h2>\r\n
Nous allons cr\u00e9er une simple t\u00e2che de copie de fichiers avec Gulp. Nous faisons \u00e7a pour \u00e9viter de d\u00e9ployer le dossier node_moules qui est souvent bien trop rempli de d\u00e9pendances que l’on n’utilise pas.<\/p>\r\n
Voici le script :<\/p>\r\n
\r\n
const {  src, dest } = require('gulp');\r\n\r\nfunction update_jquery() {\r\n    return src([\"node_modules\/jquery\/dist\/jquery.min.js\"]).pipe(dest(\"contribs\"));\r\n}\r\n\r\nfunction update_loglevel() {\r\n    return src([\"node_modules\/loglevel\/dist\/loglevel.min.js\"]).pipe(dest(\"contribs\"));\r\n}\r\n\r\nfunction build(cb) {\r\n    update_jquery();\r\n    update_loglevel();\r\n    cb();\r\n}\r\nexports.build = build;\r\n<\/pre>\r\n<\/div>\r\n
Le script va simplement copier les fichers n\u00e9cessaires dans notre dossier contribs aveec la command build.<\/p>\r\n
\"\"<\/p>\r\n
Ce qui nous permettra par la suite de produire un package sans Node Modules et de rester l\u00e9ger \ud83d\ude42<\/p>\r\n
J’esp\u00e8re que ce petit tutoriel vous a plu : vous pourrez le trouvez sur GitHub \u00e0 cet endroit :\u00a0Github<\/a><\/p>\r\n","protected":false},"excerpt":{"rendered":"
L’id\u00e9e est ici de garder votre application compl\u00e8tement ind\u00e9pendante, et d’\u00e9viter mes CDN sur votre page Web. Nous allons utiliser le couple npm gulp pour ne prendre dans notre package que le n\u00e9cessaire. Pr\u00e9sentations NPM est le gestionnaire de package le plus connu de nodeJS Gulp est une librairie tr\u00e8s utilis\u00e9e pour personaliser le d\u00e9ploiement … Continuer la lecture de Utilisez NPM et Gulp pour \u00e9viter les CDN<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[11,9,10],"class_list":["post-90","post","type-post","status-publish","format-standard","hentry","category-non-classe","tag-github","tag-gulp","tag-npm"],"_links":{"self":[{"href":"https:\/\/darkcity.fr\/blog\/wp-json\/wp\/v2\/posts\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/darkcity.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/darkcity.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/darkcity.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/darkcity.fr\/blog\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":20,"href":"https:\/\/darkcity.fr\/blog\/wp-json\/wp\/v2\/posts\/90\/revisions"}],"predecessor-version":[{"id":128,"href":"https:\/\/darkcity.fr\/blog\/wp-json\/wp\/v2\/posts\/90\/revisions\/128"}],"wp:attachment":[{"href":"https:\/\/darkcity.fr\/blog\/wp-json\/wp\/v2\/media?parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/darkcity.fr\/blog\/wp-json\/wp\/v2\/categories?post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/darkcity.fr\/blog\/wp-json\/wp\/v2\/tags?post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}