pjeby / gulpsmith Goto Github PK
View Code? Open in Web Editor NEWUse gulp plugins in Metalsmith, or Metalsmith plugins in gulp
Home Page: https://www.npmjs.com/package/gulpsmith
Use gulp plugins in Metalsmith, or Metalsmith plugins in gulp
Home Page: https://www.npmjs.com/package/gulpsmith
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!
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..
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!
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.
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
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
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.
Per issue #1, file conversions need to:
.stats
property from Vinyl .stat
(if present).stat
from Metal .stats
(if present)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.)
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...
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?
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.
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?
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.
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)
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
Line 15 in 3dd992e
I think 2.x simply removed Node 10 support and should be compatible with the gulpsmith module.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.