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
//where is my scss file
//pass that file through sass compiler
//where do I save compiled css
//stream changes to all browsers
exports.style = style;
exports.watch = watch;
Well there are plenty of gulp based packages that you can use for minifying and concatenation. I personally use gulp-clean-css which is for minification. But keep in mind that if you are doing Sass, you can use the import statement. Meaning you can have several sass files (for example layout.scss, typography.scss and components.scss and import them all into a base styles.scss). Then you run that through your gulp-sass (make sure to use the includePaths parameter if need be) and the result is a styles.css that has included the other scss files and then minified it.
The examples on npm usually show you how to plug it into your pipeline fairly easy. It will be just like what you are doing with your sass() and gulp.dest() calls.
I hope this helps.
If you rather just use gulp to concatenate, you can try gulp-concat (which is a bit older) or any other concatenation library that is available by just searching on npm.
No you shouldn’t have to format them as tasks, as you see in their example code the tasks are just returning the same gulp chain of pipes as you have. Your just calling the functions as a callback in gulp.watch. So that should be fine to use watch.
You say it is not working. Is there any error message when you try to re-run watch? Are you making sure to stop the watch and re-run it? Have you looked at the css files in your css folder after running the process?
Last but not least, I am not Jason. Just a humble 24 year senior developer, mentor, author and solution architect.