Is there a way to rewrite the HTML to use gulp-minified CSS

Question

I'm struggling with the following:

My gulpfile.js compiles all .less, minifies it and concattenates all CSS into ./dist/all.min.css

Is there a way I can rewrite the HTML file, remove all style tags and only put one style tag into it loading the minified CSS?

Sello

Answer 1

The best way to handle this is to use one of the HTML injectors from the get-go. I'm using gulp-inject to some success so far.

Add gulp-inject to your project:

npm i --save-dev gulp-inject

Assuming that you have a folder layout similar to this:

• build/
• src/
  • index.html
  • less/
    • main.less
  • js/
    • app.js

Your HTML should include this where you want the CSS or JS files to be injected, either the head for both, or head for the CSS and just before body for your JS files:

<!-- inject:css -->
<!-- any *.css files among your sources will go here as: <link rel="stylesheet" href="FILE"> -->
<!-- endinject -->

<!-- inject:js -->
<!-- any *.js files among your sources will go here as: <script src="FILE"></script> -->
<!-- endinject -->

Then your gulpfile looks something like this:

gulp.task('build-styles', function() {
    // the return is important!
    return gulp.src('src/less/main.less')
            .pipe(less())
            .pipe(gulp.dest('build'));
});


gulp.task('build-js', function() {
    // the return is important if you want proper dependencies!
    return gulp.src('src/js/**/*.js')
            // lint, process, whatever
            .pipe(gulp.dest('build'));
});

gulp.task('build-html', function() {
    // We src all files under build
    return gulp.src('build/**/*.*')
            // and inject them into the HTML
            .pipe(inject('src/index.html', {
                        addRootSlash: false,  // ensures proper relative paths
                        ignorePath: '/build/' // ensures proper relative paths
                    }))
            .pipe(gulp.dest('build'));
});

gulp.task('build', ['build-styles', 'build-js'], function(cb) {
    gulp.run('build-html', cb);
});

gulp.task('default', ['build'], function() {
    gulp.watch('src/**/*.less', function() {
        gulp.run('build-styles');
    });
    gulp.watch(['build/**/*.*','!build/index.html', 'src/index.html'], function() {
        gulp.run('build-html');
    });
});

This is just a rough idea, and you can do a lot more using gulp-watch for incremental builds, but the key here is that we watch the build directory to choose when to rebuild the HTML file, and watch the src directory for everything else.

NOTE:

Since this is getting a lot of upvotes, there are a couple other plugins that do reference replacement beside gulp-inject. You may want to look at them and see if one of them is a better fit for you, especially if you are not using gulp-rev:

• gulp-usemin
• gulp-useref

There are also two CDN libraries that do a similar thing, but for CDN resources

• gulp-google-cdn
• gulp-cdnizer (full disclosure: I wrote this one)

Emelyemelyne

Oh, and of course, you'll need separate but similar steps for a final compile task that handles concatenation, minification, etc. – Emelyemelyne

Thanks for this. One question: I've been trying to have my default task 'clean' then 'build' then 'watch' but I keep getting stuck in loops. Any pointers? – Atharvaveda

Found your "run-sequence" :) – Atharvaveda

@OverZealous, can i solve this issue #21720026 . every time file modified, file name will change. is there anyway i can include appropriate css or js file in my html – Involuntary

@Anam: If the files are available locally, you could probably write a PHP function to replace the file names in your output. I'm not really a PHP guy these days. – Emelyemelyne

@OverZealous, is it possible to do with gulp? – Involuntary

I would not recommend gulp-usemin, it's in a blacklist: github.com/gulpjs/plugins/blob/master/src/blackList.json. gulp-useref is quite good though. – Dekko

Answer 2

You want to rewrite it during a build? Why not to replace all the CSS links with a single link to all.min.css in your source code? Anyways, you can use gulp-replace plug-in to search and replace a string in your files during a build. Here is yest another sample project to look at:

Web App Boilerplate - HTML5 Boilerplate front-end web application template extended with LESS style sheets and Gulp.js build system.

Hotbed

Answer 3

See also gulp-smoosher. Example:

index.html

<html>
    <head>
        <!-- smoosh -->
        <link rel='stylesheet' href='styles.css'>
        <!-- endsmoosh -->
    </head>

styles.css

body {
    background: red;
}

Gulpfile.js

gulp.task('default', function () {
    gulp.src('index.html')
        .pipe(smoosher())
        .pipe(gulp.dest('dist'));
});

dist/index.html

<html>
    <head>
        <style>body {
            background: red;
        }</style>
    </head>

Greenberg

@Gabriel Florit how to minify the results? – Fable

@DavidMauricio You want to minify the stream after it's been smooshed? Not sure how to minify an html stream. You'd probably want to do it before smooshing. – Greenberg