pjeby / gulpsmith Goto Github PK

View Code? Open in Web Editor NEW

100.0 100.0 5.0 46 KB

Use gulp plugins in Metalsmith, or Metalsmith plugins in gulp

Home Page: https://www.npmjs.com/package/gulpsmith

CoffeeScript 100.00%

gulpsmith's People

Contributors

Stargazers

Watchers

Forkers

stevehanson a1ip saneef mintbridge justinhachemeister

gulpsmith's Issues

Upload to AWS

You mention the use case for "Want to upload your Metalsmith build to Amazon S3 or send it someplace via SFTP without first generating files locally and then running a separate uploading process".

How would one go about doing that? Do you have a simple example showcasing what you mean?

Thanks!

using custom helpers with templates / question

I was using metalsmith with a custom helper. But later I wanted to implement another functionality that requires gulp. So here I am trying to take advantage of gulpsmith. All went well but the template.. Examples are following so as my code from both metalsmith, gulpsmith and my dir structure.
Example:
source file looks like this:


---
layout: layout.html

---
etc etc.... lets try this link  {{{link "docs/guidelines/"}}}

metalsmith output:
inplace is "translating" my {{{link "docs/guidlenes/"}}} and then layouts are using the template layout.html generating:

<!--- template staff......... -->
etc etc.... lets try this link  <a href='docs/guidelines/'>docs/guidelines/</a></p>

gulpsmith.js output :

<!-- nothing from the template!!! -->
<hr>
<h2 id="layout-layout-html">layout: layout.html</h2>
etc etc.... lets try this link  <a href='docs/guidelines/'>docs/guidelines/</a></p>

First, here is my functional config for metalsmith:

var Metalsmith = require('metalsmith');
var markdown = require('metalsmith-markdown');
var collections = require('metalsmith-collections');
var handlebars = require('handlebars');
var inplace = require('metalsmith-in-place');
var layouts = require('metalsmith-layouts');

handlebars.registerHelper('link', function (path) {  // syntax: {{{link "docs/guidlenes/"}}}
    var url = handlebars.escapeExpression(path);
    return new handlebars.SafeString(
        "<a href='" + url + "'>" + url + "</a>"
    );
});

Metalsmith(__dirname)
    .metadata({  title: "my site"   })
    .source('../../myGitSubtree')
    .ignore('.*')
    .destination('../../build')
    .clean(true)  // if set to true, empties ../../build before build project
    .use(collections({docs: 'docs/!*.md'}))                         // use `collections.posts` in layouts
    .use(inplace({engine: 'handlebars', pattern: '**/*.md' }))
     .use(markdown())
    .use(layouts({ engine: 'handlebars' }))
    .build(function (err) { if (err) {throw err; }});

I integrated this functionality to gulpsmith using this gulpfile.js:

'use strict';

var gulp = require('gulp');
var Metalsmith = require('metalsmith');
var markdown = require('metalsmith-markdown');
var collections = require('metalsmith-collections');
var handlebars = require('handlebars');
var inplace = require('metalsmith-in-place');
var layouts = require('metalsmith-layouts');

handlebars.registerHelper('link', function (path) {  // syntax: {{{link "docs/guidlenes/"}}}
    var url = handlebars.escapeExpression(path);
    console.warn(path);
    return new handlebars.SafeString(
        "<a href='" + url + "'>" + url + "</a>"
    );
});

gulp.task('default', function () {
    gulp.src("../../myGitSubTree/**/*")
        .pipe(
            gulpsmith()
                .metadata({  title: "my site"   })
                .use(collections({        // group all blog posts by internally
                    docs: 'docs/!*.md'    // adding key 'collections':'posts'
                }))                         // use `collections.posts` in layouts
                .use(inplace({              // generates hrefs
                    engine: 'handlebars',
                    pattern: '**/*.md'
                }))
                .use(markdown())
                .use(layouts({              // wrap layouts around html
                    engine: 'handlebars'    // use the layout engine you like
                }))
        )
        .pipe(gulp.dest("../../build"));
});

My directory structure is a bit strange because this project uses subTrees and it supports local installation only:

projectRoot/myGitSubtree
           /build
           /metalsmith/security/Makefile
                               /gulpfile.js
                               /index.js
                               /node_modules
                               /package.json

Any ideas how I fix this?? Does the helper generates that error or something in the templates? The helper seems functional though..

Front Matter and File Properties problems

First off great plugin! I'm following your Front Matter and File Properties instructions but i'm getting a stream error: gulp-front-matter: Cannot get the front matter in a stream which is being thrown by node_modules/gulp-front-matter/node_modules/event-stream/node_modules/map-stream/index.js:103 (i've pasted the entire error at the bottom of this issue).

I was wondering if you might have an idea of what the problem might be.

This is my gulpfile:

// Define Gulp dependencies
var gulp        = require('gulp'),
    compass     = require('gulp-sass'),
    watch       = require('gulp-watch'),
    frontMatter = require('gulp-front-matter');
    assign      = require('lodash').assign;

// Define Metalsmith dependencies (migrated from old project, prune as needed)
var Metalsmith  = require('metalsmith'),
    markdown    = require('metalsmith-markdown'),
    templates   = require('metalsmith-templates'),
    watch       = require('metalsmith-watch'),
    gulpsmith   = require('gulpsmith')
    permalinks  = require('metalsmith-permalinks');

// Define paths
var paths = {
    base : './',
    src  : {
        base        : './src',
        static      : './src/static',
        sass        : './src/static/scss',
        css         : './src/static/css',
        images      : './src/static/images',
        content     : './src/content',
        templates   : './src/templates'
    },
    dest : {
        base        : './www',
        static      : './www/static',
        css         : './www/static/css',
        images      : './www/static/images',
        content     : './www/content',
    }
}

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

    gulp.src([
        paths.src.css+'/**/*',
        paths.src.content+'/**/*',
        paths.src.images+'/**/*',
    ])
        .pipe( frontMatter() ).on('data', function(file) {
            assign(file, file.frontMatter); 
            delete file.frontMatter;
        })
        .pipe(
            gulpsmith()
            .use( markdown({
                gfm:    true,
                tables: true
            }))
            // Use Swig templates
            .use( templates({
                engine:     'swig',
                directory:  paths.src.templates+'/pages'
            }))
            // Permalinks
            .use( permalinks({
                pattern: ':title' // To do: nest in /blog/
            }))
            // You can initialize the metalsmith instance with metadata
            .metadata( { site_name: 'Metalsmith Gulp' } )
        )
        //.pipe(another_gulp_plugin(more_options))
        .pipe( gulp.dest( paths.dest.base ) );
});

Entire error:

Error: gulp-front-matter: Cannot get the front matter in a stream
    at /metalsmith-gulp/node_modules/gulp-front-matter/index.js:30:17
    at wrappedMapper (/metalsmith-gulp/node_modules/gulp-front-matter/node_modules/event-stream/node_modules/map-stream/index.js:84:19)
    at Stream.stream.write (/metalsmith-gulp/node_modules/gulp-front-matter/node_modules/event-stream/node_modules/map-stream/index.js:96:21)
    at write (/metalsmith-gulp/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
    at flow (/metalsmith-gulp/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)
    at DestroyableTransform.pipeOnReadable (/metalsmith-gulp/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:664:5)
    at DestroyableTransform.emit (events.js:92:17)
    at emitReadable_ (/metalsmith-gulp/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:448:10)
    at emitReadable (/metalsmith-gulp/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:444:5)
    at readableAddChunk (/metalsmith-gulp/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:187:9)

I'm relatively new to both Metalsmith and Gulp, so please be gentle. Any feedback is also appreciated!

Read frontmatter by default

Right now reading frontmatter from source files isn't handled by default, but it is pretty integral to metalsmith. I think this should be handled by gulpsmith by default, like gulp-metalsmith does for example.

That way it can be opt-out and still allow users to bypass it. Would make using gulpsmith a lot easier.

Error handling with gulpsmith

I'm using gulpsmith and metalsmith-templates, and can't get gulpsmith to log errors that metalsmith-templates encounters while compiling.

I had a working setup with gulpsmith, that compiled handlebars templates and partials, but ran into trouble when I tried to integrate the handlebars-layouts helpers. I've opened an issue with the handlebars-layouts repo: shannonmoeller/handlebars-layouts#9, but to solve it I need some errors to know what's going wrong.

I think that errors aren't being logged because when I deliberately include a partial that doesn't exist, there is no error and the build process returns the {{> nonexistingpartial}} untouched in the output (as well as the things that are going wrong with handlebars-layouts that aren't being logged).

I'm using the following code for gulpsmith:

'use strict';

/**
* Dependencies
*/

var config = require('../config').metalsmith;
    config.templates.engine = 'handlebars';
var filePathTask = require('./filePath');
var fs = require('fs');
var getPartials = require('./getPartials');
var gulpsmith = require('gulpsmith');
var Handlebars = require('handlebars');
var layouts = require('handlebars-layouts');
var relativePathHelper = require('./relativePath');
var site = require('../../site');
var templates = require('metalsmith-templates');

/**
 * Register handlebars helpers
 */

Handlebars.registerHelper('relative_path', relativePathHelper);
layouts(Handlebars);

/**
 * Util
 */

module.exports = function () {
  // Get partials
  var partials = getPartials();

  // Register partials
  for (var partial in partials) {
    Handlebars.registerPartial(partial, fs.readFileSync(partials[partial], 'utf8'));
  };

  return gulpsmith()
    .metadata(site)
    .use(filePathTask)
    .use(templates(config.templates));
};

So my main question is, in what way would I catch any metalsmith errors with gulpsmith, or should it already be catching any errors by default?

My complete code here: https://github.com/superwolff/cape/tree/handlebars-layouts
Complete background on the issue here: shannonmoeller/handlebars-layouts#9

missing install notes

It was easy to guess that $ npm install gulpsmith would have worked to get gulpsmith into my project, and I found the project on npm to confirm, but it would be nice to see the install notes on your project's Readme.md :

$ npm install --save gulpsmith

gulpsmith with gulp v4

As reported in totocaster/metalsmith-tags#53 (comment) with the release of gulp 4 and the new dependency of vinyl-fs v3 some things might have been broken for some plugins.

I've tested the plugins separately from gulp and they don't have any problems per-se, so I'm guessing this is something related to gulpsmith alone.

Support `stats` property from Metalsmith 0.10+

Per issue #1, file conversions need to:

Create the Metal .stats property from Vinyl .stat (if present)
Create the Vinyl .stat from Metal .stats (if present)
Override the Vinyl stat's mode with Metal mode (so you can change the mode)

Also, there appears to be a bug in the current code whereby a .stat property on a Metal file can bleed into a Vinyl file if the Metal file lacks a .mode -- should probably add a test for that.

(And of course, all the conversion docs and tests need updating.)

Misleading typo in Readme?

In this section of your Readme, you have this following phrase:

Unlike Metalsmith, Gulp doesn't read YAML front matter by default. So if you want the front matter to be available in Metalsmith...

But I think it is meant to be read:

Unlike Metalsmith, Gulp doesn't read YAML front matter by default. So if you want the front matter to be available in Gulp...

metalsmith.json support

I can do this way in my Gruntfile:

metalsmith: {
            main: {
                options: grunt.file.readJSON('metalsmith.json'),
                src: 'src',
                dest: 'build'
            }
        }

Can I assign json options in gulpsmith too?

Doesn't work with the new metalsmith-layouts (replaces metalsmith-templates)

Everything in my gulpsmith app was running smoothly until I updated from the now deprecated templating system metalsmith-templates to metalsmith-layouts.

When trying to run my build, I get the following error:

/Users/A627526/Sites/jarodtaylor_metalsmith/node_modules/gulpsmith/node_modules/vinyl/index.js:110
      throw new Error("File.contents can only be a Buffer, a Stream, or null."
            ^
Error: File.contents can only be a Buffer, a Stream, or null.
    at File.Object.defineProperty.set (/Users/A627526/Sites/jarodtaylor_metalsmith/node_modules/gulpsmith/node_modules/vinyl/index.js:110:13)
    at new File (/Users/A627526/Sites/jarodtaylor_metalsmith/node_modules/gulpsmith/node_modules/vinyl/index.js:25:17)
    at Function.gulpsmith.to_vinyl (/Users/A627526/Sites/jarodtaylor_metalsmith/node_modules/gulpsmith/gulpsmith.js:211:18)
    at /Users/A627526/Sites/jarodtaylor_metalsmith/node_modules/gulpsmith/gulpsmith.js:124:43
    at Metalsmith.<anonymous> (/Users/A627526/Sites/jarodtaylor_metalsmith/node_modules/gulpsmith/gulpsmith.js:127:17)
    at Immediate._onImmediate (/Users/A627526/Sites/jarodtaylor_metalsmith/node_modules/metalsmith/node_modules/unyield/node_modules/co/index.js:52:14)
    at processImmediate [as _immediateCallback] (timers.js:367:17)

I looked around and saw that someone reported this on metalsmith-layout's issue tracker, but it wasn't resolved. They forwarded this person back here.

Templates don't recompile under Watch

This may or may not fall under your jurisdiction, but I'm running out of ideas here.

I'm using Metalsmith as a gulp plugin, with Swig as my templating engine. I have gulp.watch set to check for changes to the templates and .md files using the following:

gulp.watch(['lib/content/**/*.md'], ['metalsmith']);
gulp.watch(['lib/templates/**/*'], ['metalsmith']);

When I make changes to the markdown files, the built html updates just fine. However, when I save a template or partial, it says that the metalsmith task ran successfully, but the html doesn't update and I have to kill the gulp watch process and restart it manually. My gulpsmith task can be found below:

gulp.task('metalsmith', function() {
    gulp.src(['lib/content/**/*.md'])
        .pipe(plugins.frontMatter()).on("data", function(file) {
            assign(file, file.frontMatter);
            delete file.frontMatter;
        })
        .pipe(plugins.gulpsmith()
            .use(plugins.metalsmithCollections({
                pages: { pattern: content_src + '/pages/*.md' },
                projects: { pattern: content_src + '/projects/*.md' },
                posts: {
                    pattern: content_src + '/posts/*.md',
                    sortBy: 'date',
                    reverse: true
                }
            }))
            .use(plugins.metalsmithMarkdown())
            .use(plugins.metalsmithPermalinks({
                pattern: build_root + '/:collection/:title'
            }))
            .use(plugins.metalsmithTemplates({
                engine: 'swig',
                directory: template_src
            }))

        )
        .pipe(gulp.dest(build_root));
});

Any idea why updating templates wouldn't trigger a full rebuild of the project, or any way I can achieve this?

Can't install with Metalsmith 0.9.0

Having problems installing this module with Metalsmith 0.9.0 as I get as error complaining about the peer dependency version.

npm ERR! peerinvalid The package metalsmith does not satisfy its siblings' peerD
ependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants metalsmith@^0.8.0

I'm a little confused with the whole npm package.json version indicators but I think it states that ^0.8.0 is treated differently due to the major version being 0. This means that it doesn't consider 0.9.0 compatible and fails.

Any chance you could update the semver number for metalsmith? The only change 0.9.0 contained over 0.8.0 is an option to toggle parsing of the metadata at the top of the files.

Object #<Metalsmith> has no method 'join'

I'm using gulpsmith 0.5.2 together with metalsmith 1.0.1 like this:

var metalsmith = new Metalsmith(config.paths.root)
        .source(config.paths.site)
        .destination(config.paths.out)
        .metadata(metadata)
        // ...
        .use(gulpsmith.pipe(g.gzip(config.gzip)))
        // ...
        .build(function(err) {
            if (err) throw err;
            done();
        });

And although i tried different ways, i always get the following error:

/Users/simbo/htdocs/a-static-site/node_modules/gulpsmith/gulpsmith.js:199
      opts.cwd = smith.join();
                       ^
TypeError: Object #<Metalsmith> has no method 'join'
    at Function.gulpsmith.to_vinyl (/Users/simbo/htdocs/a-static-site/node_modules/gulpsmith/gulpsmith.js:199:24)
    at /Users/simbo/htdocs/a-static-site/node_modules/gulpsmith/gulpsmith.js:86:34
    at /Users/simbo/htdocs/a-static-site/Gulpfile.js:333:22
    at next [as _onTimeout] (/Users/simbo/htdocs/a-static-site/node_modules/metalsmith-branch/node_modules/ware/lib/index.js:68:8)
    at Timer.listOnTimeout [as ontimeout] (timers.js:112:15)

peerDependencies requirements

Trying to upgrade Metalsmith to 2.x and I'm getting:

npm ERR! peerinvalid The package metalsmith does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants metalsmith@^0.10||^0.11||^1.0.0

gulpsmith/package.json

Line 15 in 3dd992e

"metalsmith": "^0.10||^0.11||^1.0.0"

I think 2.x simply removed Node 10 support and should be compatible with the gulpsmith module.