Accueil
> Recueil
> Gulp V4 : compiler Sass et les fichiers JS

Gulp V4 : compiler Sass et les fichiers JS

6 juin 2023

Vérifier que vous avez Node.js
```
node -v
```
puis de npm avec
```
npm -v
```
Sinon télécharger et installer Node.js
Installer gulp
```
npm install gulp-cli -g
```
gulp -v pour connaitre la version installer
Initialiser un nouveau projet
```
npm init -y
```
Un fichier package.json
est créer

Installation de ce qui est nécessaire

npm install --save-dev gulp gulp-sass browser-sync gulp-autoprefixer gulp-clean-css gulp-sourcemaps gulp-mode gulp-concat gulp-rename gulp-uglify

Créer le fichier gulpfile.js à la racine du projet

const gulp =  require('gulp');
const sass = require('gulp-sass')(require('sass'));
const prefix = require('gulp-autoprefixer');
const minify = require('gulp-clean-css');
const sourcemaps = require('gulp-sourcemaps');
const mode = require('gulp-mode')();
const browserSync = require('browser-sync').create();
const concat = require('gulp-concat');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');


// compilation des styles CSS
function styles(){
    // Emplacement des fichiers .scss
    return gulp.src('./_scss/style.scss')
    // Source map
        .pipe(mode.development( sourcemaps.init() ))
    // Passer ces fichiers au compilateur + si erreur affiche les log
        .pipe(sass().on('error', sass.logError))
    // Préfixer automatiquement les propriétés nécessaire
        .pipe(prefix('last 2 versions'))
    // Minifier
        .pipe(minify())
    // Source map
        .pipe(mode.development( sourcemaps.write() ))
    // Emplacement du fichier .css généré
        .pipe(gulp.dest('./style/'))
    // changements de flux pour tous les navigateurs
        .pipe(mode.development( browserSync.stream() ));
}

// compilation des scripts JavaScript
function scriptJs(){
    return gulp.src('./js/*.js')
        .pipe(concat('script.js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('./'))
        .pipe(mode.development( browserSync.stream() ));
}

// watch
function watch() {
    browserSync.init({
        server: {
            baseDir: './'
        }
    });
    gulp.watch('./_scss/**/*.scss', styles);
    gulp.watch('./*.html').on('change', browserSync.reload);
    gulp.watch('./js/**/*.js', scriptJs);
}

// Compilation des styles pour la prod
function buildScss(){
    // Emplacement des fichiers .scss
    return gulp.src('./_scss/style.scss')
    // Passer ces fichiers au compilateur + si erreur affiche les log
        .pipe(sass().on('error', sass.logError))
    // Préfixer automatiquement les propriétés nécessaire
        .pipe(prefix('last 2 versions'))
    // Minifier
        .pipe(minify())
    // Emplacement du fichier .css généré
        .pipe(gulp.dest('./style/'));
}


exports.watch = watch;
exports.build = gulp.series(buildScss, scriptJs);

gulp build pour la production
gulp watch pour la dev