32

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

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

有没有一种方法可以重写 HTML 文件，删除所有样式标签，然后只将一个样式标签放入其中加载缩小的 CSS？

4

3 回答 3

49

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

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

npm i --save-dev gulp-inject

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

  • 建造/
  • 源/
    • 索引.html
    • 较少的/
      • main.less
    • js/
      • 应用程序.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增量构建做更多的事情，但这里的关键是我们观察构建目录来选择何时重建 HTML 文件，并观察src目录中的所有其他内容。

笔记：

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

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

于 2014-01-21T04:26:21.970 回答
4

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

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

于 2014-01-12T16:30:45.983 回答
0

另请参阅gulp-smoosher。例子：

索引.html

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

样式.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>
于 2014-03-03T21:36:21.633 回答