This recipe uses assemble and browser-sync to both serve the files but also update the served files if needed.
- Convert some .less files to a single style sheet (.css file).
- Convert some markdown files to html output, containing also a link to the generated CSS file.
- Serve the files in the local browser automatically
- Create some watchers on
- all .less files (
./lessfolder) - all content files (
./contentfolder
- all .less files (
- In case any watcher is triggered, update either the stylesheets or the generated html files.
Main file:
'use strict';
var assemble = require( 'assemble' );
var extname = require( 'gulp-extname' );
var less = require( 'gulp-less' );
var browserSync = require( 'browser-sync' ).create();
var path = require( 'path' );
var app = assemble();
app.task( 'init', function ( cb ) {
app.helper('markdown', require('helper-markdown'));
app.layouts( './templates/layouts/**/*.hbs' );
cb();
} );
app.task( 'css', function () {
return app.src( './less/default.less' )
.pipe( less() )
.pipe( app.dest( './.build/css' ) )
.pipe( browserSync.stream() )
} );
app.task( 'serve', function () {
browserSync.init( {
port: 8080,
startPath: 'page-1.html',
server: {
baseDir: './.build'
}
} )
} );
app.task( 'content', ['init'], function () {
return app.pages.src( './content/**/*.{md,hbs}' )
.pipe( app.renderFile() )
.on( 'err', console.error )
.pipe( extname() )
.pipe( app.dest( './.build' ) )
.pipe(browserSync.stream());
} );
app.task( 'default', ['css', 'content', 'serve'], function () {
} );
app.watch( './content/**/*.md', ['content']);
app.watch( './less/**/*.less', ['css']);
module.exports = app;less/default.less
@import "typography.less";
@import "variables.less";less/typography.less
html, body {
font-family: @defaultFont;
color: @mainColor;
}
h1 {
color: @secondColor;
}less/variables.less
@mainColor: #666;
@defaultFont: Arial, "Helvetica Neue", Helvetica, sans-serif;templates/layouts/default.hbs
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
<link rel="stylesheet" href="css/default.css">
</head>
<body>
<h1>{{title}}</h1>
{{#markdown}}
{% body %}
{{/markdown}}
</body>
</html>content/page-1.md
---
title: Page 1
layout: default
---
This is the content of page 1