gulp + sass basics

How To Gulp + Sass Basics


# Crée un dossier projet et go dedans
mkdir myProject && cd myProject

# Crée un fichier config npm pour sauvegarder le nom des paquets installés. 
touch package.json

# Installe Gulp globalement
npm install -g gulp

# Installe Gulp en local et sauvegarde la ref dans packages.json
npm install gulp --save-dev

# Installe gulp-sass
npm install gulp-sass --save-dev

# Crée un dossier css ainsi qu'un fichier app.css dans lequel le css sera compilé
mkdir css && touch css/app.css

# Crée un dossier sass ainsi qu'un fichier app.scss 
# qui sera le point d'entrée de tous les autres fichiers .scss
mkdir sass && touch sass/app.scss

# Crée le fichier de configuration gulp
touch gulpfile.js

-------------------
# Dans gulpfile.js: 
-------------------

var gulp = require('gulp');         // On require gulp qui est dans node_modules
var sass = require('gulp-sass');    // Idem avec gulp-sass

// Créeons notre première tache gulp, et appelons la 'styles'
gulp.task('sass', function () {
    // On veut compiler tous (*) les fichiers scss un par un
    gulp.src('./sass/*.scss')            
    // Pour chaque fichier qu'on va compiler, le passer dans Sass. 
    // errLogToConsole: true permet de ne pas quitter 
    // le programme a la moindre erreur
    .pipe(sass({errLogToConsole: true}))
    // On catch les éventuelles erreurs et on les passe à la fonction swallowError
    .on('error', swallowError)
    // On compile ensuite le résultat dans le dossier css. Pour l'instant on a app.scss -> app.css
    .pipe(gulp.dest('./css'))
});

// A ce point on pourrait sauvegarder et lancer 'gulp sass'. 
// Il faut cependant déclarer une task par défaut qui s'exécute lorsqu'on tape juste 'gulp'
// On va donc faire en sorte de lancer la task sass par défaut

gulp.task('default', ['sass']);

// Et on oublie pas la fonction swallowError
function swallowError(e) {
    console.log(e.toString());
};

# Sauvegarder

# Ecrire des choses dans app.scss, sauvegarder

# Executer gulp
gulp

# app.scss a été compilé dans app.css !

----------------------------------------------------------------
# Comment compiler plusieurs fichiers .scss dans un seul app.css
----------------------------------------------------------------
# Il suffit d'avoir un fichier .scss principal, en loccurence app.scss
# Chaque sous-fichier .scss devra s'ecrire avec un _ devant
# Dans app.scss, importer le sous-fichier avec @import 'nomfichier' (sans _ ni .scss a la fin)
# Example
touch scss/_reset.css

# Dans sass/app.scss :
@import 'reset';

-------------------------------------------------------------------------------------------------
# Comment faire en sorte d'écouter les changements dans les fichiers .scss et compiler a la volée
-------------------------------------------------------------------------------------------------
# Simple: on fait une task 'watch'
# Dans gulpfile.js, ajouter:

gulp.task('watch', function() {
    // On écoute tous les fichiers .scss et dès qu'un changement se produit on appelle la task 'sass' 
    gulp.watch('./sass/*.scss', ['sass']);
});

# On change aussi la default task pour qu'elle execute watch
gulp.task('default', ['watch']);

# Sauvegarder

# Relancer gulp
gulp

# Faire un changement dans n'importe quel .scss, sauvegarder

# Gulp re-compile tout seul ! Enjoy

/!\ A l'étape de la création du fichier package.json, ne pas oublier d'ajouter à l'intérieur :
{

}
pour que la commande suivante fonctionne.