Utiliser NPM Script au lieu de Gulp pour builder

On entends sur le net beaucoup à propos de Grunt ou de Gulp, ces outils vous permettent de compiler du sass en css, de minifier les script css et javascript, de rassembler en un seul fichier etc.

Cependant, il vous est tout à fait possible de faire ce que fait Gulp par exemple rien qu’en utilisant ce qui est disponible avec NPM script.

NPM est le gestionnaire de package sous nodeJS. Il vous permet de télécharger les dépendances nécessaire au fonctionnement de votre application web et du développement de ce dernier.

Voyons voir comment on peut compiler du Sass en CSS en utilisant NPM script.

les scripts NPM sont logés dans le fichier package.json, dans la propriété scripts.

C’est un objet json qui contient des paire clé-valeurs. La clé étant le nom d’un script, et la valeur est la commande NPM que vous auriez tapé en ligne de commande.

Bon assez parlé on y va !

Compiler du Sass en css

c’est la tâche que l’on aura le plus souvent à faire.

Donc je suppose que vous avez déjà installé nodeJS, donc que vous pouvez utiliser NPM.

> npm install node-sass

Ensuite dans l’objet scripts qu’il y a dans le fichier package.json, créez une entrée comme ceici:

"scripts": {
"scss-build": "node-sass --include-path src/scss src/scss/style.scss public/css/style.css",
"watch-scss": "node-sass -w src/scss/ -o public/css/"
},

 

les chemins sont relatifs à l’emplacement du fichier package.json

le premier script « scss-build » va dire à node de compiler le fichier style.scss en style.scss

  1. src/scss est le répertoire source
  2. src/scss/style.scss est le fichier sass à compiler
  3. public/css/style.css est le fhicer cible

Rien qu’avec ce premier script (n’ajoutez pas le second script watch-scss pour l’instant), faite ceci:

> npm run scss-build

 

et voilà !

Passons au second script, comme avez à modifier un grand nombre de fois le fichier sass, vous aurez envie que la compilation se fasse à chaque fois que vous sauvez le fichier sass,

le « watch-scss » va surveiller toute modification du ficheir et va le compiler.

Il suffit donc de lancer non pas le premier script, mais le second script seul.

> npm run watch-scss

 

 

et voilà !

Il y a plus dans les npm scripts que la compilation. On aura envie de minifier le css,minifier le javascript, linter le javascript (linter veut dire vérifier que le code soit aux normes),autopréfixer les propriétés css, et même compresser les images (ce qui est très intéressant !). Le top du top est de pouvoir travailler avec Browsersync quand vous développez en cross browser.

 

 

Retour en haut