有没有办法重写 HTML 以使用 gulp-minified CSS [英] Is there a way to rewrite the HTML to use gulp-minified CSS

问题描述

我正在努力解决以下问题:

I'm struggling with the following:

我的 gulpfile.js 编译所有 .less，缩小它并将所有 CSS 连接到 ./dist/all.min.css

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

有没有一种方法可以重写 HTML 文件，删除所有样式标签，只在其中放入一个样式标签来加载缩小的 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?

推荐答案

处理这个问题的最佳方法是从一开始就使用 HTML 注入器之一.到目前为止，我使用 gulp-inject 取得了一些成功.

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.

将 gulp-inject 添加到您的项目中:

Add gulp-inject to your project:

npm i --save-dev gulp-inject

假设你有一个类似这样的文件夹布局:

Assuming that you have a folder layout similar to this:

• 构建/
• src/
  • index.html
  • 少/
    • main.less
    • app.js

    您的 HTML 应包含您希望注入 CSS 或 JS 文件的位置，或者两者的头部，或者 CSS 的头部和 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 -->
    

    然后你的 gulpfile 看起来像这样:

    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');
        });
    });
    

    这只是一个粗略的想法，您可以使用 gulp-watch 进行更多的增量构建，但这里的关键是我们监视 build 目录选择何时重建 HTML 文件，并查看 src 目录中的所有其他内容.

    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.

    由于这得到了很多支持，除了 gulp-inject 之外，还有几个其他插件可以进行引用替换.您可能想查看它们，看看其中一个是否更适合您，特别是如果您不使用 gulp-rev:

    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

    还有两个 CDN 库做类似的事情，但用于 CDN 资源

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

    • gulp-google-cdn
    • gulp-cdnizer(完全披露:我写了这个)
    • gulp-google-cdn
    • gulp-cdnizer (full disclosure: I wrote this one)

    这篇关于有没有办法重写 HTML 以使用 gulp-minified CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！