实施例

Question

我正在写一个html测试报告生成器。我想将所有资源嵌入到单个html文件中。通过这种方式，用户可以轻松地将其发送给其他人。生成时，所有数据都将写入此文件。用户可以双击它以使用浏览器打开。

由于这个html报告基本上是一个带有数据绑定和用户交互的模板视图。我想使用angularjs 2.0（+ typescript）来实现它。并且为了使用一些漂亮的网格/表格，我可能需要引用许多外部的js库。

我检查了grunt-line，它无法处理模块加载器（例如。SystemJS）

那么，有没有办法实现我的目标？

Answer 1

如果我理解正确，您可以尝试使用gulp-inline或针对脚本的gulp-inline-source等特定内联工具，gulp-inline-base64将字体和图像嵌入到样式中，然后{{3}用于将样式内联到html。可能还有一些其他类似的插件。

实施例

gulp-inline-css

假设我们使用Pug（以前称为Jade），SASS和LiveScript编写应用程序（这些都只是为了语法一致性）。我们有这样的结构：

- src/
  +- img/
     +- paragraph.png

  +- pug/
     +- index.pug

  +- live/
     +- script.ls

  +- sass/
     +- styles.sass

- tmp/    # for intermediate files

- dist/   # for result files

- gulpfile.js
- package.json

<强>的package.json

{
  ...
  "dependencies": {
    "gulp": "3.9.1",
    "gulp-inline-source": "2.1.0",
    "gulp-livescript": "3.0.1",
    "gulp-postcss": "6.1.1",
    "gulp-pug": "3.0.3",
    "gulp-sass": "2.3.2",
    "livescript": "1.5.0",
    "postcss-url": "5.1.2"
  }
}

<强>的src / SASS / styles.sass

请注意，如果没有任何过滤器，https://github.com/artptr/html-inline-all-example将内联所有外部实体。还有像postcss-url这样的类似插件。

h1
  color: #c00;

  &:before
    content: ''
    display: inline-block
    width: 16px;
    height: 16px;
    background: url('../img/paragraph.png')

<强>的src /活/ script.ls

仅举例来说。

console.log 'Hello World'

<强>的src /哈巴狗/ index.pug

请注意，只有具有inline属性（默认情况下）的代码才会被处理，因为它由postcss-image-inliner提供。此示例中还有指向tmp/目录的硬链接。您可以使用类似inline-source的内容来美化您的来源。

doctype html
html
  head
    title All-Inlined HTML
    meta(charset="utf-8")
    link(href="../../tmp/css/styles.css", inline)
  body
    h1 All-Inlined HTML
    script(src="../../tmp/js/script.js", inline)

<强> gulpfile.js

您可以根据需要处理样式和脚本。例如，您可以使用browserify，webpack等。只需将它们处理到正确的位置即可。

const gulp         = require('gulp');
const sass         = require('gulp-sass');
const postcss      = require('gulp-postcss');
const url          = require('postcss-url');
const livescript   = require('gulp-livescript');
const pug          = require('gulp-pug');
const inlineSource = require('gulp-inline-source');

gulp.task('css', () =>
  gulp.src('./src/sass/*')
    .pipe(sass())
    .pipe(postcss([
      url({ url: 'inline' }),  // inline images and fonts
    ]))
    .pipe(gulp.dest('./tmp/css/'))
);

gulp.task('js', () =>
  gulp.src('./src/live/*')
    .pipe(livescript())
    .pipe(gulp.dest('./tmp/js/'))
);

gulp.task('default', ['css', 'js'], () =>
  gulp.src('./src/pug/*')
    .pipe(pug())
    .pipe(inlineSource())  // inline scripts and styles
    .pipe(gulp.dest('./dist/'))
);

最后会有这样的输出：

<强> DIST / index.html中

（为便于阅读而包装）

<!DOCTYPE html><html><head><title>All-Inlined HTML</title><meta charset="utf-8">
<style>h1{color:#c00}h1:before{content:'';display:inline-block;width:16px;height:16px;
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAA
3NCSVQICAjb4U/gAAAACXBIWXMAAAC0AAAAtAHrlyx7AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jn
m+48GgAAAE5QTFRF////AKr/K4D/JJL/IID/KIf/JIr/JIf/JYn/I4j/JYn/JIj/JYf/JIj/JIj/JIj/JYj/JIn
/JIn/JIj/JIj/JIj/JIj/JIj/JIj/JIj/Ww11PAAAABl0Uk5TAAMGBwggP0BFSVJchJadocPExsjJ0PT3+B9r7C
0AAABTSURBVBhXtc1JDoAgAEPRrzigOANq739RN6Ihru3ypWkB3LrrTgQY9SYCnc6hNkHWKpgSmDQDXm0rD8CiP
odPI200CdLL0wC3HTlAUYUcstEf4AI8dAntxZ0PeQAAAABJRU5ErkJggg==")}</style></head>
<body><h1>All-Inlined HTML</h1><script>(function(){console.log("Hello World")}).call(this);
</script></body></html>

是否可以将现代前端Web项目源代码打包到单个html文件中

1 个答案:

实施例