Gulp-tumblr NPM

gulp-tumblr

Better tumblr theming with gulp

Install

npm install --save-dev gulp-tumblr

Usage

const gulp = require('gulp');
const tumblr = require('gulp-tumblr');

gulp.src(['./template.html'])
	.pipe(tumblr.preview())
	.pipe(gulp.dest('./export/'));

Requirements

A JSON file (options.dataFile) that has the variable data of what to show.

	Example: _data.json_

	```json
	{
		"Basic": {
			"Title": "Demo Theme",
			"MetaDescription": "This is a meta description",
			"Description": "This is a description",
			"BlogURL": "http://demo.tumblr.com/"
		},
		"Text": {
			"Title": "An example post",
			"Body": "<p>Lorem ipsum dolor sit amet, consectetuer <a target=\"_blank\" href=\"/\">adipiscing elit</a>. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.</p>\n\t<ul>\n\t\t<li>Lorem ipsum dolor sit amet.</li>\n\t\t<li>Consectetuer adipiscing elit. </li>\n\t\t<li>Nam at tortor quis ipsum tempor aliquet.</li>\n\t</ul>\n\t<p>Cum sociis <a target=\"_blank\" href=\"/\">natoque penatibus</a> et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed ligula. Sed volutpat odio non turpis gravida luctus. Praesent elit pede, iaculis facilisis, vehicula mattis, tempus non, arcu.</p>\n\t<blockquote>Donec placerat mauris commodo dolor. Nulla tincidunt. Nulla vitae augue.</blockquote>\n\t<p>Suspendisse ac pede. Cras <a target=\"_blank\" href=\"/\">tincidunt pretium</a> felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque porttitor mi id felis. Maecenas nec augue. Praesent a quam pretium leo congue accumsan.</p>"
		},
		"Quote": {
			"Quote": "It does not matter how slow you go so long as you do not stop.",
			"Source": "Wisdom of <a target=\"_blank\" href=\"http://en.wikipedia.org/wiki/Confucius\">Confucius</a>",
			"Length": "short",
			"Tags": "wisdom"
		}
	}
	```

A main template file that contains Tumblr variables and blocks and will be streamed in.

	Example: _template.html_

	```html
	<!DOCTYPE html>
	<html>
	<head>
		<title>{Title}</title>

		{block:Description}
			<meta name="description" content="{MetaDescription}" />
		{/block:Description}

		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<h1>{Title}</h1>
		<h2>{Description}</h2>

		{block:Quote}{/block:Quote}
		{block:Text}{/block:Text}
	</body>
	</html>

	```

A directory (options.postFolder) with individual templates for each post type.

	Example: _post/text.html_

	```html
	<!-- block:Text -->
		{block:Title}{Title}{/block:Title}
		{Body}
	<!-- /block:Text -->
	```

	Example: _post/quote.html_

	```html
	<!-- block:Quote -->
		<article>
			<blockquote class="{Length}">
				{Quote}
			</blockquote>

		</article>
		{block:Source}<div class="source">{Source}</div>{/block:Source}
	<!-- /block:Quote -->

	```