Solutions optimale pour dev en JS et SASS

Bonjour à toutes et tous,

Nouveau sur le forum mais pas sur le site, celà fait un moment que je suis qq tuto toutefois, je rencontre qq soucis lors de la mise en place d'un ou plusieurs bundler.

En effet, je suis dans un environnement PHP (vieux cms GLPI non mis à jour depuis un paquet d'années) avec SVN et j'ai commencé à dev des nouvelles fonctionnalités PHP, JS et SASS.

J'étais bien parti avec gulp avec le tuto qu'avait fait Grafikart que j'ai mis à jour par la suite mais maintenant j'arrive à certaines limites comme par exemple la "non" prise en charge des import/export, require etc et donc impossible de séparer mon code JS. Je n'arrive pas à mettre tout celà en place, je m'y perds un peu dans la config... :(

Je n'ai pas besoin de liveserver, WAMP s'en charge :p

Voici mon code principal GULP

const { src, dest, series, parallel, watch } = require('gulp');
const pathH = require('path');
let livereload   = require('gulp-livereload');
let gulpSass     = require('gulp-sass');
let postcss      = require('gulp-postcss');
let CombineMQ    = require('postcss-combine-media-query');
let autoprefixer = require('autoprefixer');
let CSSnano      = require('cssnano');
let rename       = require('gulp-rename');
let concat       = require('gulp-concat');
//const babel      = require('gulp-babel');
let uglify       = require('gulp-uglify');

const hssJS = pathH.resolve(__dirname  + '/../hss/src/app.js');
const DLJS = 'javascript/telechargement.js';

const destJS = 'javascript/';

function monSass() {
    return src('sass/styles.scss')
        .pipe(
            gulpSass({
                outputStyle: 'compact'
            }))
        .pipe(
            postcss([
                CombineMQ,
                autoprefixer,
                CSSnano 
            ]))
        .pipe(
            rename(function(path) {
                path.extname = ".min.css";
            }))
        .pipe(dest('css'))
        .pipe(livereload());
}

function monJs() {    
    return src([DLJS, hssJS])
        .pipe(concat('bundle.js'))
        .pipe(uglify())
        .pipe(dest(destJS));
}

function watchSASS() {
    watch('sass/partials/*.scss', monSass)
    watch('sass/*.scss', monSass)
    watch('sass/mesfonctions/*.scss', monSass)
}

function watchJS() {
    watch(hssJS, monJs)
}

module.exports = {
    //default: [monSass, monJs],
    watch: parallel(watchSASS, watchJS)
}

J'aimerai idéalement :

• un code facilement réutilisable par mon nouveau collègue,
• qu'on puisse aussi facilement en ajouter en reprenant un package, babel.rc, gulp...
• et surtout, forcément, Linter + Minifier + Bundler + Transpiler (JS et SASS)
  là, SASS fonctionne bien, mais pas en JS qui ne prend pas en charge les import notamment ou qui m'indique que les fonctions sont en double.

Si vous avez des conseils...

D'avance merci pour vos conseils.

Bien à vous,