Gulp minify css and js.. pointers please?

JavaScript
1

Hi can anyone help me add CSS minify to my gulp project? I’d also like to add JS minify & concatenate.

I am building a wordpress website locally and have managed to get gulp to work without refreshing the browser so when I save CSS, JS or PHP the browser automatically refreshes which is amazing!

What I can’t figure out is what CSS minify npm to install and how to apply it to my gulpfile.js?

There seems to be old gulp tutorials using the task method and the new gulp v4 uses different techniques.

Can someone please advise?

Most of the structure of my gulpfile.is is from the youtube tutorial that I’ve shared and also to get wordpress working locally with grunt I used the proxy snippet in the tutorial on the other link.
This is what my gruntfile.js looks like -

const gulp = require('gulp')
const sass = require('gulp-sass')
const browserSync = require('browser-sync').create();

//compile scss into css
function style(){
    //where is my scss file
    return gulp.src('./scss/**/*.scss')
    //pass that file through sass compiler
    .pipe(sass())
    //where do I save compiled css
    .pipe(gulp.dest('./css'))
    //stream changes to all browsers
    .pipe(browserSync.stream());
}

function watch(){
    browserSync.init({
        proxy: 'local.testsite.com',
        files: [
            './**/*.php'
        ]
    });
    gulp.watch('./scss/**/*.scss', style)
    gulp.watch('./*.html').on('change', browserSync.reload);
    gulp.watch('./*.php').on('change', browserSync.reload);
    gulp.watch('./js/**/*.js').on('change', browserSync.reload);
}

exports.style = style;
exports.watch = watch;