- 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

注意，如果没有过滤器，邮政网址将内联所有外部实体。还有类似的插件，如后置-图像-内联。

h1
  color: #c00;

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

src/live/script.ls

举个例子。

console.log 'Hello World'

src/pug/index.pug

注意，只有带有inline属性的标记(默认情况下)才会处理内联，因为它是由内联源提供的。在本例中，还有指向tmp/目录的硬链接。您可以使用类似吞咽-替换的东西来美化您的源代码。

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

您可以根据自己的意愿处理您的样式和脚本。例如，你可以使用浏览器化，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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38519724

复制

相似问题

问是否可以将一个现代的前端web项目源代码打包到一个html文件中？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以将一个现代的前端web项目源代码打包到一个html文件中？EN