Outils pour utilisateurs

Outils du site


Discussion webdesign:package.json

Fichier package.json

Voici une commande à utiliser pour générer un fichier package.json basique en répondant à quelques questions et en appuyant directement sur ENTRÉE lorsque la valeur proposée par défaut entre parenthèses convient (voir ici pour les détails) :

PS D:\www.dev> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (namespaced)
version: (1.0.0)
description: Namespaced Dokuwiki's template CSS
entry point: (script.js)
test command:
git repository: github:geekitude/dokuwiki-template-namespaced
keywords:
author: Simon Delage
license: (ISC) GPL-3.0
About to write to U:\Simon\Documents\www.dev\doku\lib\tpl\namespaced\package.json:

{
  "name": "namespaced",
  "version": "1.0.0",
  "description": "Namespaced DokuWiki template CSS processing",
  "repository": "github:geekitude/dokuwiki-template-namespaced"
  "main": "script.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Simon Delage",
  "license": "GPL-3.0"
}


Is this ok? (yes) 

Il ne reste qu'à valider en tapant “y” puis à modifier le fichier pour y ajouter la section devDependencies (j'ai retiré le champs “main” qui n'a rien à voir avec ce projet d'optimisation de fichiers CSS mais qui est bien présent à cet endroit) :

package.json
{
  "name": "namespaced",
  "version": "1.0.0",
  "description": "Namespaced DokuWiki template CSS processing",
  "repository": "github:geekitude/dokuwiki-template-namespaced",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Simon Delage",
  "license": "GPL-3.0"
}

L'étape suivante consiste à ordonner à npm de télécharger les packages que l'on utiliseras par la suite. J'ai déjà indiqué que mon but premier est d'automatiser la gestion des fameux “préfixes vendeurs”, ce qui va nécessiter les packages grunt-postcss et autoprefixer, ce dernier se basant sur caniuse-db qui s'installerai automatiquement comme dépendance mais j'ai lu que pour garder la maîtrise des mises à jour de ce package il fallait l'installer manuellement. Viendront ensuite la “minification” avec grunt-cssnano et un système de surveillance avec grunt-contrib-watch.

Voici comment procéder :

PS D:\www.dev> npm install caniuse-db grunt-postcss autoprefixer grunt-cssnano grunt-contrib-watch --save

npm WARN peerDependencies The peer dependency grunt@>=0.4.0 included from grunt-cssnano will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency grunt@>=0.4.5 included from grunt-postcss will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
.../...

Humpf…
Après avoir renommé la section dependencies en devDependencies (pour s'approcher de ce que l'on trouve sur la toile) et relancé la commande d'installation des packages, les alertes ont disparu et voici à quoi ressemble maintenant le fichier :

package.json
{
  "name": "namespaced",
  "version": "1.0.0",
  "description": "Namespaced DokuWiki template CSS processing",
  "repository": "github:geekitude/dokuwiki-template-namespaced",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Simon Delage",
  "license": "GPL-3.0",
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "caniuse-db": "^1.0.30000488",
    "grunt": "^1.0.1",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-cssnano": "^2.1.0",
    "grunt-postcss": "^0.8.0"
  },
  "dependencies": {
    "autoprefixer": "^6.3.6",
    "caniuse-db": "^1.0.30000488",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-cssnano": "^2.1.0",
    "grunt-postcss": "^0.8.0"
  }
}

Normalement, npm a créé un dossier node_modules pour y mettre tous les packages nécessaires (il va vite devenir très gros et ne devrait pas être synchronisé vers Github par exemple).

webdesign/package.json.txt · Dernière modification: 2016/06/27 00:13 par Simon