Question

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

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

有没有办法可以重写HTML文件，删除所有样式标签，只加一个样式标签加载缩小的CSS？

Answer 1

处理此问题的最佳方法是使用其中一个HTML注入器。到目前为止，我正在使用gulp-inject取得一些成功。

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

npm i --save-dev gulp-inject

假设您有类似于此的文件夹布局：

构建/
的src /
- 的index.html
- 少/
  - main.less
- JS /
  - app.js

你的HTML应该包括你希望注入CSS或JS文件的地方，要么是两者的头部，要么是CSS的头部，以及JS文件的正文之前：

<!-- 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看起来像这样：

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 目录。

注意：

由于这会得到很多赞成，因此还有一些其他插件会在gulp-inject旁边引用替换。您可能希望查看它们，看看其中一个是否更适合您，特别是如果您不使用gulp-rev：


gulp-usemin

gulp-useref


还有两个CDN库执行类似的操作，但是对于CDN资源


gulp-google-cdn

gulp-cdnizer（完全披露：我写了这篇文章）

Answer 2

你想在构建期间重写它吗？为什么不在源代码中使用指向all.min.css的单个链接替换所有CSS链接？无论如何，您可以使用gulp-replace插件在构建期间搜索和替换文件中的字符串。以下是另一个示例项目：

Web App Boilerplate - 使用LESS样式表和Gulp.js构建系统扩展的HTML5 Boilerplate前端Web应用程序模板。

Answer 3

另见gulp-smoosher。例如：

<强>的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>

有没有办法重写HTML以使用gulp-minified CSS

3 个答案:

注意：