防止 gulp-inline-css 将 HTML 内容包装成 html 和 body 标签答案

【问题标题】：Prevent gulp-inline-css from wrapping HTML content into html and body tags防止 gulp-inline-css 将 HTML 内容包装成 html 和 body 标签
【发布时间】：2014-11-26 17:12:16
【问题描述】：

我只想处理一段 HTML，稍后我想按原样复制粘贴并插入到现有的 HTML 文档中。我有这样的事情：

<div id="someDiv">
</div>
<script src="js/someScript.js" inline></script>
<style>
    div#someDiv {
        font-weight: bold;
    }
</style>

我正在使用 gulp-inline-source 来获取构建文件中的脚本，我做了一些基本的 html 缩小。这是我的 gulpfile.js：

var gulp = require('gulp');
var del = require('del');
var jshint = require('gulp-jshint');
var inlinesource = require('gulp-inline-source');
var htmlmin = require('gulp-htmlmin');
var inlineCss = require('gulp-inline-css');

gulp.task('clean', function(cb) {
    del(['assets/*'], cb)
});

gulp.task('lint', function() {
    return gulp.src('./src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

gulp.task('inlinesource-htmlmin', function() {
    return gulp.src('./src/*.html')
        .pipe(inlinesource())
        .pipe(inlineCss())
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('./assets'));
});

gulp.task('default', ['clean', 'lint', 'inlinesource-htmlmin']);

看起来 gulp-inline-css 正在将我的内容包装到 html 和 body 标记中，因为当我注释掉 .pipe(inlineCss()) 行时它不会发生。

这是我得到的：

<html><body><div id="someDiv" style="font-weight: bold"></div><script>$(document).ready(function(){console.log("logging")});</script></body></html>

知道如何防止这种情况发生吗？

【问题讨论】：

标签： html gulp

【解决方案1】：

我最终使用gulp-replace 删除 inlineCss 之后的标签，如下所示：

var gulp = require('gulp');
var del = require('del');
var jshint = require('gulp-jshint');
var inlinesource = require('gulp-inline-source');
var htmlmin = require('gulp-htmlmin');
var inlineCss = require('gulp-inline-css');
var replace = require('gulp-replace')

gulp.task('clean', function(cb) {
    del(['assets/*'], cb)
});

gulp.task('lint', function() {
    return gulp.src('./src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

gulp.task('inlinesource-htmlmin', function() {
    return gulp.src('./src/*.html')
        .pipe(inlinesource())
        .pipe(inlineCss())
        .pipe(replace(/<(html|body)>/g, ''))
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('./assets'));
});

gulp.task('default', ['clean', 'lint', 'inlinesource-htmlmin']);

【讨论】：