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;
2

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. :slight_smile:

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.

3

Hi Jason thanks for your quick reply. I have installed gulp-clean-css as you recommended. I have tried adding it to my gulpfile.js but the CSS isn’t minifying?

Can this also work with watch?

This is how my gulpfile.js looks like -

const gulp = require('gulp');
const sass = require('gulp-sass');
const cleanCSS = require('gulp-clean-css');
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())
    //cleanCSS minify
    .pipe(cleanCSS())    
    //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;

The instructions on the package page still uses task? Should I use this with gulp v4?

4

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. :wink:

5

Hi Martyr2! Not sure why I called you Jason lol

There are no errors when I re-run watch. I’ve checked the CSS file it isn’t compressed.

I’ve tried using the next snippet on the package page and there’s no debug messages in the console?

Here’s how the gulpfile.js and package.json files looks like -

onst gulp = require('gulp')
const sass = require('gulp-sass')
const cleanCSS = require('gulp-clean-css');
const browserSync = require('browser-sync').create();



gulp.task('minify-css', () => {
  return gulp.src('./css/*.css')
    .pipe(cleanCSS({debug: true}, (details) => {
      console.log(`${details.name}: ${details.stats.originalSize}`);
      console.log(`${details.name}: ${details.stats.minifiedSize}`);
    }))
  .pipe(gulp.dest('dist'));
});


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

function watch(){
    browserSync.init({
        proxy: 'local.starterproject.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;

package.json -

{
  "name": "local.testsite.com",
  "version": "1.0.0",
  "description": "starter project for new projects",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Testing",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.14",
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-sass": "^4.1.0"
  }
}

CSS file gulp generates -

body {
  background: black;
  color: grey; }

h1, h2 {
  color: grey; }
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.