Générer un projet Javascript avec NPM

Par /

Imaginez que vous ayez un projet front end, par exemple personnalisation d’un thème d’une boutique Magento, cela ne concerne que le CSS et HTML (voire du javascript), les fichiers sont gros, pouvant faire dix milles lignes en CSS, hors de question de le faire directement en CSS, il y a beaucoup mieux le Sass. Le Sass est un « langage » qui va se compiler en CSS, l’avantage est qu’il est facilement  compréhensible, car sa syntaxe est structurée.

/* Sass */
div > p {
  color:blue;
  a {
    color : red;
  }
}

/* converti en CSS */

div > p {
  color: blue;
}
div > p a {
  color: red;
}

L’exemple ci-dessus illustre la lisibilité de la notation en Sass, hiérachisée mais pas forcément plus concise, en revanche très lisible, la syntaxe Sass est beaucoup plus riche et plus puissante que ne le montre l’exemple ci-dessus. En comparaison, la notation CSS est plus plate et répétitive, et bien sûr moins lisible.

NPM va nous permettre d’installer les dépendances, et dans le cas du Sass, on va installer node-sass pour compiler le Sass en CSS à chaque fois qu’on enregistre le fichier Sass (extension .scss).

Initialisation d’un projet NPM

npm init

Après cette commande vous devez répondre à un tas de questions comme le nom du projet, le propriétaire, la licence, pas mal de champs sont optionnels rassurez-vous etc.

Un fichier package.json est généré.

Ensuite installons le paquet node-sass. Ce dernier permet de surveiller les modifications d’un fichier Sass et de compiler en CSS automatiquement.

$ npm install -D node-sass nodemon
#le D signifie une dev dependency

Dans votre package.json, ajoutez ces lignes

“scripts”: {
  “build-css”: “node-sass --include-path scss scss/main.scss   public/css/main.css”
}

#Pour lancer la compilation
$ npm run build-css

Mieux encore watcher pour automatiquement compiler au moindre changement puis sauvegarde du fichier sass.

“scripts”: {
 “build-css”: “node-sass --include-path scss scss/main.scss public/css/main.css”,
 “watch-css”: “nodemon -e scss -x \”npm run build-css\””
},

lien : https://medium.com/@brianhan/watch-compile-your-sass-with-npm-9ba2b878415b

Retour en haut