Gulp minification css

Question

I'm using Gulp for running tasks like minify and conctat my css, js...

I use gulp-minify-css plugin for minify my css, and it's working fine... but I have one question, I need to change in my html the new routes of the .css and .js? Can I do that with a Task?

// including plugins
var gulp = require('gulp')
, minifyCss = require("gulp-minify-css");

// task
gulp.task('minify-css', function () {
    gulp.src('./Css/one.css') // path to your file
    .pipe(minifyCss())
    .pipe(gulp.dest('path/to/destination'));
});

Thanks!!

I have found this question, but it works with Grunt (http://stackoverflow.com/questions/20337819/change-link-or-script-filename-in-html-after-gruntjs-minify-uglify) — chemitaxis, Nov 03 '14 at 12:35
You could use [`cheerio`](https://www.npmjs.org/package/gulp-cheerio) for manipulating HTML files. — Ram, Nov 03 '14 at 12:36

score 3 · Accepted Answer · answered Nov 03 '14 at 13:26

You can use gulp-useref plugin to extract all css files referenced in your html, minify them and save the new html with replaced references.

Here's a full working example:

index.html

<html>
<head>
    <!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
    <!-- endbuild -->
</head>
<body>
(...)
</body>
</html>

gulpfile.js

var gulp = require('gulp');
var useref = require('gulp-useref');
var minifyCss = require('gulp-minify-css');

gulp.task('minify-css', function () {
    var assets = useref.assets();

    return gulp.src('index.html')
        .pipe(assets)
        .pipe(minifyCss())
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(gulp.dest('dist/index.html'));
});

This will produce a single, concatenated and minified css in css/combined.css and the following html in dist/index.html

<html>
<head>
    <link href="css/combined.css" rel="stylesheet">
</head>
<body>
(...)
</body>
</html>

Gulp minification css

1 Answers1