Gulp – Markdown

Gulp, Gulp – Markdown

Now for someting new. We are going to use Gulp with Handlebars to create our own CMS system.

First of all, We want to be able to process markdown files and create html files with Gulp with plugin.

1
$ npm install gulp-markdown --save-dev

For more information about gulp-markdown check out https://www.npmjs.org/package/gulp-markdown

We will read all the markdown files in the contents/pages folder and generate html files.

gulpfile.js
1
2
3
4
5
6
7
8
...
var markdown = require('gulp-markdown');
...
gulp.task('generate_pages', function() {
  return gulp.src('content/pages/**.md')
    .pipe(markdown())
    .pipe(gulp.dest("build/pages"));
});

Lets create our first page.

ontents/pages/first_page.md
1
Yes, it makes a **bold** statement.

When We run our gulp generate_pages task, We will take the markdown and convert it into html and place the files in the build/pages directory.

1
2
3
4
$ gulp generate_pages
Using gulpfile ~/js/gulpwalkthru/gulpfile.js
Starting 'generate_pages'...
Finished 'generate_pages' after 22 ms

If We look in our build/pages directory, We should see our new html file.

build/pages/first_page.html
1
p>Yes, it makes a <strong>bold</strong> statement.</p>

If We visit http://localhost:8000/pages/first_page.html we should see our generated webpage.