Question

我只想处理一段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>

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

Answer 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']);

防止gulp-inline-css将HTML内容包装到html和body标签中

1 个答案: