momh

SCSS & Gulp

Je me suis mis à utiliser le préprocesseur CSS Sass avec sa syntaxe SCSS il y a quelques années, le mobilisant de temps en temps, au gré des différentes refontes de ce site. Plus récemment, j’ai cherché à automatiser un certain nombre de tâches répétitives (compilation, minification, autoprefixer...) avec Gulp.

Ainsi, jusqu’à récemment, je faisais en sorte que mon éditeur de code (jusqu’alors Sublime Text avec le plugin Autoprefixer), ajoute les propriétés propre à chaque navigateur à l’enregistrement du fichier sur lequel je travaillais. Je n’avais ensuite plus qu’à lancer la compilation de mon SCSS avec la commande classique sass :

sass -s compressed style.scss style.css

Mais, travaillant à un projet qui nécessitait aussi de manipuler du JavaScript (de le minifier essentiellement), j’ai cherché à rationaliser et automatiser tout un tas de petites actions avec — rien de bien surprenant — le bien connu Gulp.

Voici donc le gulpfile.js que je m’étais concocté pour compiler mon SCSS, minifier le JavaScript et surveiller la modification des fichiers pour automatiser ces tâches.

const gulp = require('gulp'),
    sass = require('gulp-sass'),
    cleancss = require('gulp-clean-css'),
    rename = require('gulp-rename'),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    concat = require('gulp-concat'),
    minify = require('gulp-minify');

var sources = {
    scss: ['css/src/**/*.s*ss'],
    scss_main: ['css/src/main.scss'],
    js: ['js/src/**/*.js']
};

var dests = {
    css: 'css/',
    js: 'js/'
}

function watch() {
    gulp.watch(sources.scss, styles);
    gulp.watch(sources.js, scripts);
}

function styles() {
    return gulp.src(sources.scss_main)
        .pipe(sourcemaps.init())
        .pipe(sass({
            outputStyle: 'compact',
            precision: 10
        }).on('error', sass.logError)
        )
        .pipe(autoprefixer())
        .pipe(cleancss())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(sourcemaps.write(''))
        .pipe(gulp.dest(dests.css));
}

function scripts () {
    return gulp.src(sources.js)
        .pipe(concat('scripts.js'))
        .pipe(gulp.dest(dests.js))
        .pipe(minify(
            {ext:{
                min:'.min.js'
            }}
            ))
            .pipe(gulp.dest(dests.js));
}
    
exports.watch = watch;
exports.styles = styles;
exports.scripts = scripts;
exports.default = styles;

Avant de s’en servir, il faut bien évidemment installer les modules Node.js qui vont bien :

npm install --save-dev gulp gulp-autoprefixer gulp-clean-css gulp-concat gulp-minify gulp-rename gulp-sass gulp-sourcemaps

Il suffit ensuite de lancer la commande gulp suivie de la fonction souhaitée.