• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

wires/gulp-static-site: Gulp plugin to render static site

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

wires/gulp-static-site

开源软件地址(OpenSource Url):

https://github.com/wires/gulp-static-site

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

js-standard-style wercker status

Build static sites with gulp

This is how it works

$ npm install gulp gulp-static-site

Then put this in your gulpfile

var gulp = require('gulp');
var static_site = require('gulp-static-site');

var paths = {
	sources: ['contents/**','templates/**'],
	stylesheets: ['css/**']
};

gulp.task('site', function () {
	return gulp.src('contents/**/*.md')
		.pipe(static_site())
		.pipe(gulp.dest('build/'))
});

gulp.task('css', function () {
	return gulp.src('css/*.css')
		.pipe(gulp.dest('build/css'));
});

gulp.task('default', ['site','css'], function () {
	gulp.watch(paths.sources, ['site']);
	gulp.watch(paths.stylesheets, ['css']);
});

Example JADE template templates/default.jade:

doctype html
html
	head
		link(rel='stylesheet', href='http://yui.yahooapis.com/pure/0.4.2/pure-min.css')
		meta(http-equiv='content-type', content='text/html; charset=UTF-8')
	body
		div.pure-g-r#main
			div.pure-u-1-5
				p Menu
				ul
					each node in page.tree.nodes
						if node.leaf
							li
								a(href=node.leaf.href)= node.leaf.shortName
			div.pure-u-4-5
				!= page.contents

Now we need some markdown files

mkdir contents/
echo "hello from *foo*" >> contents/foo.md
echo "bye from `bar`" >> contents/bar.md
echo "welcome to my site" >> contents/index.md

Gulp that business:

gulp

[12:32:28] Using gulpfile /tmp/test/gulpfile.js
[12:32:28] Starting 'site'...
[12:32:28] Starting 'css'...
[12:32:28] Finished 'css' after 4.56 ms
[12:32:28] File tree
.
├── bar.html
├── foo.html
└── index.html

[12:32:28] loading template: templates/default.jade
[12:32:28] loading template: templates/default.jade
[12:32:28] loading template: templates/default.jade
[12:32:28] compiled template: templates/default.jade
[12:32:28] rendering [default] "bar.html"
[12:32:28] compiled template: templates/default.jade
[12:32:28] rendering [default] "foo.html"
[12:32:28] compiled template: templates/default.jade
[12:32:28] rendering [default] "index.html"
[12:32:28] gulp-size: total 1.75 kB
[12:32:28] Finished 'site' after 191 ms
[12:32:28] Starting 'default'...
[12:32:28] Finished 'default' after 12 ms

Open your file:

open build/index.html      # OSX
xdg-open build/index.html  # Linux

More info

For now, have a look at the source for gulp-static-site and the Tree object you are operating on gulp-filetree/tree.js.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap