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?

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)