webdevpro.net

Gulp 4 pour un projet html / SASS

Gulp 4 pour un projet html / SASS | webdevpro.net

Gulp ?

Gulp est un outil en ligne de commande permettant de remplacer des tâches répétitives, manuellement fastidieuses mais essentielles dans le cycle de vie de création d’un projet par une ligne de commande.

Pour pouvoir utiliser Gulp, il faut au préalable avoir installer NodeJS / NPM sur votre ordinateur.

Exemple de projet html / SASS

Voici un exemple d’organisation d’une projet html / SASS à automatiser :

exemple de projet

Package.json

Voici la liste de dépendances à installer en local pour pouvoir créer les commandes d’automatisation : 

{
  "name": "projet",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.14",
    "del": "^6.0.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.1.0",
    "node-sass": "^5.0.0"
  },
  "browserslist": [
    "last 3 version",
    "> 1%",
    "IE 10"
  ]
}
  • gulp : module principal mettant à disposition 5 méthodes essentielles :
    • gulp.serie()
    • gulp.src()
    • gulp.dest()
    • gulp.watch()
    • gulp.pipe()
  • gulp-sass / node-sass : plugin permettant de compiler des fichiers .scss en css
  • gulp-rename : plugin permettant de choisir le nom du fichier final généré dans la destination la méthode gulp.dest()
  • gulp-autoprefixer : plugin permettant d’autoprefixer les règles css
  • browser-sync : server local rafraichissant le navigateur suite à la modification d’un fichier un dossier du projet. Peut être utilisé en global sur votre système, voir un article sur le sujet

Lancer l’installation des dépendances du projet via la commande :

npm i

gulpfile.js

Le fichier suivant permet de créer des 3 commandes, aussi appelée task :

  1. compiler des fichiers .scss en fichier style.css , équivalent à saisir la commande suivante : sass scss/main.scss style.css --style="compressed"
  2. autoprefixer le fichier css compiler
  3. lancer browserSync , équivalent de la commande suivante : browser-sync start -s -f index.html --no-ui

Le fichier doit être mis à la racine du projet 

//gulpfile.js
// les dépendances du fichier gulp
const { src, dest , series , watch } = require("gulp");
const sass = require("gulp-sass");
const rename = require("gulp-rename");
const del = require('del');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync');

sass.compiler = require("node-sass");

// ---------------------------
// ---------------------------

// task 1 : supprimer le fichier style.css
function cleanTask(){
  return del("./style.css");
}

// task2 : compiler les fichiers dans le dossier scss => style.css
function sassTask(){
  const flags = {outputStyle: 'compressed'};
  return src("scss/**/*.scss")
  .pipe(sass(flags).on('error', sass.logError))
  .pipe(rename("./style.css"))
  .pipe(dest("./"));
}

// task3 : ajouter les vendors prefix sur les règles css pour le fichier style.css
// voir le fichier package.json pour voir les paramètres 
function autoprefixerTask(){
  return src("./style.css")
  .pipe(autoprefixer())
  .pipe(dest("."));
}

// task4 : mettre en série les tasks 1, 2 et 3
// pas possible serie() dans une fonction, il FAUT l'associer à une variable 
const run = series( cleanTask , sassTask , autoprefixerTask ); 

// task5 : si modification dans le dossier scss , lancer la task4
function watchTask(){
  watch("scss/**/*.scss" , run);
}

// task6 : créer un server local BrowserSync 
// si modifications dans le dossier scss => mettre en serie task 2 et 3
// si modification du fichier index.html ou style.css => relancer BrowserSync 
function serverTask(){
  const server = browserSync.create();
  server.init({
        server: {
            baseDir: "./"
        }
    });
  watch("scss/**/*.scss" , series(sassTask , autoprefixerTask));
  watch(["index.html", "style.css"]).on('change', server.reload);
}

// ---------------------------
// ---------------------------

// Ensemble des tâches pouvant être appelée via la commande npx gulp 
module.exports = {
  sass : sassTask,
  clean : cleanTask ,
  run : run,
  default : watchTask,
  server : serverTask
}

Lancer vos tâches automatisées

Lancer la commande suivante dans votre terminal :

npx gulp server
gulp en action
  1. le serveur local BrowserSync se lance et ouvre votre navigateur à l’adresse http://localhost:3000
  2. les tâches sass et autoprefixer sont s’exécuter en série suite à la modification et enregistrement d’un fichier dans le dossier scss
  3. en cas de modification du fichier index.html ou style.css browserSync va rafraichir le navigateur

Ailleurs sur le web