tsbs / bootstrap和模板引擎渲染的问题

时间:2018-06-13 15:41:05

标签: twitter-bootstrap npm bootstrap-4 templating package-managers

所以,我试图在Debian 9上运行一个Bootstrap 4开发站点。我已经安装了依赖项,并做了后空翻试图让它运行,但我一直得到默认索引页面有一个空头(显然导致渲染问题,因为jquery / bootstrap脚手架完全缺失。其他一切都在那里,但它就像头部甚至没有被编译或链接。

有趣的是,package.json文件中没有npm start或类似的脚本。

"scripts": {
"bundlesize": "bundlesize",
"css": "npm-run-all --parallel css-lint* css-compile* --sequential css-prefix* css-minify*",
"css-main": "npm-run-all --parallel css-lint css-compile --sequential css-prefix css-minify",
"css-docs": "npm-run-all --parallel css-lint-docs css-compile-docs --sequential css-prefix-docs css-minify-docs",
"css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap.scss dist/css/bootstrap.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap-grid.scss dist/css/bootstrap-grid.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap-reboot.scss dist/css/bootstrap-reboot.css",
"css-compile-docs": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 assets/scss/docs.scss assets/css/docs.min.css",
"css-lint": "stylelint --syntax scss \"scss/**/*.scss\"",
"css-lint-docs": "stylelint --syntax scss \"assets/scss/*.scss\" && stylelint \"docs/**/*.css\"",
"css-lint-vars": "node build/lint-vars.js scss/ assets/scss/",
"css-prefix": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"",
"css-prefix-docs": "postcss --config build/postcss.config.js --replace \"assets/css/docs.min.css\" \"docs/**/*.css\"",
"css-minify": "cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/bootstrap.min.css dist/css/bootstrap.css && cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/bootstrap-grid.min.css dist/css/bootstrap-grid.css && cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/bootstrap-reboot.min.css dist/css/bootstrap-reboot.css",
"css-minify-docs": "cleancss --level 1 --source-map --source-map-inline-sources --output assets/css/docs.min.css assets/css/docs.min.css",
"js": "npm-run-all js-lint* js-compile js-minify",
"js-main": "npm-run-all js-lint js-compile js-minify",
"js-docs": "npm-run-all js-lint-docs js-minify-docs",
"js-lint": "eslint js/src js/tests build/",
"js-lint-docs": "eslint assets/js/ docs/ sw.js",
"js-compile": "npm-run-all --parallel js-compile-*",
"js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
"js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap",
"js-compile-plugins": "cross-env PLUGINS=true babel js/src/ --out-dir js/dist/ --source-maps",
"js-compile-plugins-coverage": "cross-env PLUGINS=true NODE_ENV=test babel js/src/ --out-dir js/coverage/dist/ --source-maps",
"js-minify": "npm-run-all --parallel js-minify-*",
"js-minify-standalone": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map\" --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
"js-minify-bundle": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.bundle.js.map,includeSources,url=bootstrap.bundle.min.js.map\" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js",
"js-minify-docs": "uglifyjs --mangle --comments \"/^!/\" --output assets/js/docs.min.js assets/js/vendor/anchor.min.js assets/js/vendor/clipboard.min.js assets/js/vendor/holder.min.js \"assets/js/src/*.js\"",
"js-test": "npm-run-all --parallel js-test-karma*",
"js-test-karma": "karma start js/tests/karma.conf.js",
"js-test-karma-old": "cross-env USE_OLD_JQUERY=true npm run js-test-karma",
"js-test-karma-bundle": "cross-env karma start js/tests/karma-bundle.conf.js",
"js-test-karma-bundle-old": "cross-env USE_OLD_JQUERY=true npm run js-test-karma-bundle",
"js-test-cloud": "ruby -r webrick -e \"s = WEBrick::HTTPServer.new(:Port => 3000, :DocumentRoot => Dir.pwd, :Logger => WEBrick::Log.new('/dev/null'), :AccessLog => []); trap('INT') { s.shutdown }; s.start\" & node build/saucelabs-unit-test.js",
"docs": "npm-run-all --parallel css-docs js-docs --sequential docs-compile docs-lint",
"docs-compile": "bundle exec jekyll build",
"postdocs-compile": "npm run docs-workbox-precache",
"docs-github": "shx echo \"github: true\" > twbsconfig.yml && npm run docs-compile -- --config _config.yml,twbsconfig.yml && shx rm ./twbsconfig.yml",
"docs-github-serve": "bundle exec jekyll serve --skip-initial-build --no-watch",
"docs-lint": "npm-run-all docs-lint-*",
"docs-lint-htmllint": "htmllint --rc build/.htmllintrc \"_gh_pages/**/*.html\" \"js/tests/**/*.html\"",
"docs-lint-vnu-jar": "node build/vnu-jar.js",
"docs-serve": "bundle exec jekyll serve",
"docs-upload-preview": "build/upload-preview.sh",
"docs-workbox-precache": "node build/workbox.js",
"maintenance-dependencies": "ncu -a -x jquery && npm update && bundle update && shx echo \"Manually update assets/js/vendor/*, js/tests/vendor/* and .travis.yml\"",
"release-sri": "node build/generate-sri.js",
"release-version": "node build/change-version.js",
"release-zip": "cd dist/ && zip -r9 bootstrap-$npm_package_version-dist.zip * && shx mv bootstrap-$npm_package_version-dist.zip ..",
"dist": "npm-run-all --parallel css js",
"test": "npm-run-all dist js-test docs-compile docs-lint bundlesize",
"watch": "npm-run-all --parallel watch-css watch-js",
"watch-css": "nodemon --ignore js/ --ignore dist/ -e scss -x \"npm run css\"",
"watch-js": "nodemon --ignore scss/ --ignore js/dist/ --ignore dist/ -e js -x \"npm run js-compile\""
}

我被困住了。这是一个sass问题吗?构建工具问题?关于如何将这一切拼接在一起的任何体面(和彻底)的教程?

我的初始脚手架是使用twbs / bootstrap composer包。

我使用NPM进行安装(node v8.11.3 / npm 5.6.0)

任何可能有帮助的Jetbrains细节?

除了呈现之外,这里还有来自Chrome的开发者工具视图。

Blank Head Tag

这是页面的其余部分。

enter image description here

这是我点击链接时会发生什么。 {{xyz}}标签告诉我有些东西没有得到解析/编译/链接(无论这个上下文中的正确术语是什么。)

enter image description here

这是我的目标结构

Directory Structure

只是为了消除对回复的一些混淆,这里是默认模板{{content}}部分,正在渲染,但{%xyz%}部分缺失,即:头部。

default template file

1 个答案:

答案 0 :(得分:0)

您想要构建哪种应用?

您是如何生成该项目的?

我需要查看您的输入应用点(app.js,server.js等) 发生的事情是nodeJS没有渲染你的模板

但我认为视图引擎设置器的错误是app.set('view engine', 'ejs');

https://www.instagram.com/qp/batch_fetch_web/