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

paulwib/gulp-ssg

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

开源软件名称(OpenSource Name):

paulwib/gulp-ssg

开源软件地址(OpenSource Url):

https://github.com/paulwib/gulp-ssg

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

gulp-ssg NPM version Build Status

A gulp plugin to help generate a static website from a bunch of files.

Installation

$ npm install gulp-ssg

Usage

var ssg = require('gulp-ssg');

gulp.task('html', function() {
    return gulp.src('content/**/*.html')
        .pipe(ssg())
        .pipe(gulp.dest('public/'));
});

This will add properties to each file's data property:

  • file.data.url - A URL, which is the file.relative with a slash prepended and any trailing index.* removed
  • file.data.dirtyUrl - As above, but without trailing index.* removed
  • file.data.root - A pointer to the root file
  • file.data.parent - A pointer to the parent file
  • file.data.children - An array of pointers to child files
  • file.data.siblings - An array of pointers to sibling files

To explain these a bit more:

  • The root file is the root index.html file. If there isn't one then root will be null.
  • The parent file is the parent index.html file. If there isn't one then parent will be null.
  • The children are all the files that have a URL that starts with the current files path plus at least one more token in there path. Because index.html is truncated from URLs this means /foo/bar/ and /foo/fred.html are both children of /foo/index.html.
  • The siblings are all the files that have a common parent URL.

This plug-in follows the gulp-data convention of using file.data, so anything returned from a gulp-data pipe will be merged with the properties above.

Example

So how can this be used? It gets more interesting when combined with other pipes. For example:

var gulp = require('gulp');
var ssg = require('gulp-ssg');
var rename = require('gulp-rename');
var data = require('gulp-data');
var matter = require('gray-matter');
var markdown = require('gulp-markdown');
var wrap = require('gulp-wrap');
var del = require('del');

gulp.task('default', function() {

    return gulp.src('src/content/*.md')

        // Extract YAML front-matter and assign with gulp-data
        .pipe(data(function(file) {
            var m = matter(String(file.contents));
            file.contents = new Buffer(m.content);
            return m.data;
        }))

        // markdown -> HTML
        .pipe(markdown())

        // Rename to .html
        .pipe(rename({ extname: '.html' }))

        // Run through gulp-ssg
        .pipe(ssg())

        // Wrap file in template
        .pipe(wrap(
          { src: 'src/templates/template.html' },
          { siteTitle: 'Example Website'},
          { engine: 'hogan' }
        ))

        // Output to build directory
        .pipe(gulp.dest('public/'));
});

There are complete examples with templates in the git repo.

Options

baseUrl string

The base URL of the site, defaults to '/'. This should be the path to where your site will eventually be deployed.

sort string

A property to sort pages by, defaults to url. For example, this could be a property like order extracted from the YAML front-matter.




鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
dpmango/gulp-starter-pack发布时间:2022-06-21
下一篇:
OctopusDeploy/gulp-octo: ⛔️ DEPRECATED A gulp wrapper for octopack library to ...发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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