Gulp 4 - CSS minify and rename

Question

I minify CSS generated from SASS. After switch to Gulp 4 have problem rename and minify CSS.

All gulp plugins are correctly installed. Everything goes OK except minifying and rename CSS.

Here is my code:

const browserSync = require('browser-sync').create();
const run = require('gulp-run');
const del = require('del');
var gulp = require("gulp");
var rename = require("gulp-rename");
var log = require("fancy-log");

// Include paths file
//const paths = require('./src/paths');


/************************************ CSS ************************************/
gulp.task("css:compile", function () {
  var postcss = require("gulp-postcss");
  var sourcemaps = require("gulp-sourcemaps");
  var autoprefixer = require("autoprefixer");
  var sass = require("gulp-sass");

  return gulp
    .src("./src/scss/*.scss")
    .pipe(sourcemaps.init())
    .pipe(
      sass({
        includePaths: ["node_modules/bootstrap/scss/"]
      }).on("error", sass.logError)
    )
    .pipe(postcss([autoprefixer()]))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("./www/css/"));
});
gulp.task("css:minify", gulp.series(["css:compile"]), function () {
  var cleanCSS = require("gulp-clean-css");
  return gulp
    .src("./www/css/main.css")
    .pipe(cleanCSS())
    .pipe(rename("main.min.css"))
    .pipe(gulp.dest("./www/css/"));
});
gulp.task("img", function () {
  var imagemin = require("gulp-imagemin");
  return gulp.src("src/img/*")
    .pipe(imagemin())
    .pipe(gulp.dest("./www/img/"))
});
gulp.task("css", gulp.series(["css:minify"]));

score 1 · Accepted Answer · answered Mar 19 '19 at 02:18

1

In these two lines of your code:

gulp.task("css:minify", gulp.series(["css:compile"]), function () {

gulp.task("css", gulp.series(["css:minify"]));

I don't think gulp.series can take an array as its first argument. Change them to:

gulp.task("css:minify", gulp.series("css:compile"), function () {

gulp.task("css", gulp.series("css:minify"));

answered Mar 19 '19 at 02:18

Mark

143,421
24
428
436

I used litlle hack, and now its ok, but i think i can do it better? `gulp.task("css:minify", gulp.series("css:compile", function () { var cleanCSS = require("gulp-clean-css"); return gulp .src("./www/css/main.css") .pipe(cleanCSS()) .pipe(rename("main.min.css")) .pipe(gulp.dest("./www/css/")); }));` – Petr Volny Mar 20 '19 at 23:08
1

That looks like it should work, that is what I suggested. – Mark Mar 21 '19 at 02:10
Hi @PetrVolny, please mark Mark's answer as accepted if it helped solve the issue you were encountering. – Sean Mar 22 '19 at 13:20

Gulp 4 - CSS minify and rename

1 Answers1