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

问题

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?

回答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)

回答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.

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

问题

回答1:

NOTE:

回答2:

回答3: