CSS Minify and Rename with Gulp

Gulp 4 - CSS minify and rename

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"));

Using Gulp to Minify and Auto Update a CSS File

The problem lies in the area where you are calling gulp.task('minify-css') inside the gulp.watch callback function. That code does not actually invoke the minify-css task, but rather spawns an anonymous task as pointed by you in your logs. Instead gulp.watch should invoke a function which internally performs the minify-css job.

The other issue is probably the syntax changes that happened in gulp-4. They are not many but can be confusing.

I've managed to fix the issue and it works. Here is the updated code for gulpfile.js below:

const gulp = require("gulp");
const cleanCSS = require("gulp-clean-css");

function minifyCSS() {
  return (
    gulp
      .src("./css/*.css")
      .pipe(cleanCSS())
      .pipe(gulp.dest("minified"))
  );
}

gulp.task("minify-css", minifyCSS);

gulp.task("watch", () => {
  gulp.watch("./css/*.css", minifyCSS);
});

gulp.task('default', gulp.series('minify-css', 'watch'));

Hope this helps.

How Do I Use Gulp to Minify and Autoprefix CSS files from SASS/SCSS

First, I recommend putting all source files into folder src and built files into build. This works below, and you can incrementally add new pipes to see what breaks it

gulpfile.js

var gulp = require('gulp')
var sass = require('gulp-sass')
var autoprefixer = require('gulp-autoprefixer')
var minCss = require('gulp-minify-css')
var rename = require('gulp-rename')

var config = {
   srcCss : 'src/scss/**/*.scss',
   buildCss: 'build/css'
}

gulp.task('build-css', function(cb) {
   gulp.src(config.srcCss)

      // output non-minified CSS file
      .pipe(sass({
         outputStyle : 'expanded'
      }).on('error', sass.logError))
      .pipe(autoprefixer())
      .pipe(gulp.dest(config.buildCss))

      // output the minified version
      .pipe(minCss())
      .pipe(rename({ extname: '.min.css' }))
      .pipe(gulp.dest(config.buildCss))

   cb()
})

gulp.task('watch', function(cb) {
   gulp.watch(config.srcCss, ['build-css']) 
})

gulp.task('default', ['build-css', 'watch'])

main.scss

$degrees: '50%';

.rotated {
    transform: $degrees;
}

package.json

{
  "name": "",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-minify-css": "^1.2.2",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.1.0"
  }
}

Resulting File Structure

Here's what you'll have after you run $ gulp (excludes node_modules folder)

$ tree -I node_modules
.
├── build
│   └── css
│       ├── main.css
│       └── main.min.css
├── gulpfile.js
├── package.json
└── src
    └── scss
        └── main.scss

4 directories, 5 files

My Environment

$ node -v
v5.1.0

$ npm -v
3.3.12

$ gulp -v
[13:39:54] CLI version 1.0.0
[13:39:54] Local version 3.9.0

How to use gulp-clean-css to write a new -min.css file instead of the default of overwriting the existing css source file?

I don't believe this is possible without installing any additional npm packages, though considering the nature of NodeJS, I don't think it would be considered unreasonable to require one.

One possible way to achieve this (without gulp-copy) would be with gulp-rename and the rename command:

gulp.src(config.css)

    // Output the file before cleaning
    .pipe(gulp.dest(config.css))

    // Clean the file
    .pipe(cleanCss())

    // Rename with a .min suffix (e.g. app.css -> app.min.css)
    .pipe(rename({ suffix: ".min" }))

    // Output the minified CSS file
    .pipe(gulp.dest(config.css));

This will produce two files - the unminified original .css file and the minified .min.css file.

gulp minify all css files to a single file

Your gulp task is missing the concat pipe.

gulp.src('src/css/**/*.css')
    .pipe(minifyCSS())
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9'))
    .pipe(concat('style.min.css'))
    .pipe(gulp.dest('dist/css'))

Here is a very good tutorial about building with gulp:

http://www.smashingmagazine.com/2014/06/11/building-with-gulp/

---

Related Topics