Skip to content

Instantly share code, notes, and snippets.

@superMDguy
Last active May 31, 2019 22:53
Show Gist options
  • Select an option

  • Save superMDguy/09574c3240b1eb3fc2743cb7859d2ee7 to your computer and use it in GitHub Desktop.

Select an option

Save superMDguy/09574c3240b1eb3fc2743cb7859d2ee7 to your computer and use it in GitHub Desktop.
Automatically convert Vue single file components from Pug/Jade to HTML
const fs = require('fs')
const pug = require('pug')
const glob = require('glob')
const templateRegex = new RegExp('<template lang="pug">(.*)</template>', 's')
const attributeRegex = new RegExp(/(\S*)="/, 'g')
function compilePug(pugCode) {
let cleanedPug = pugCode.split('\n').filter(line => line.trim().length > 0)
const initialTab = cleanedPug[0].match(/^\s*/)[0]
cleanedPug = cleanedPug.map(line => line.replace(initialTab, ''))
cleanedPug.unshift('doctype html')
let htmlCode = pug.render(cleanedPug.join('\n').replace(attributeRegex, '$1!="'))
htmlCode = htmlCode.replace('<!DOCTYPE html>', '')
return htmlCode
}
glob('src/**/*.vue', {}, function(err, files) {
for (const file of files) {
console.log(`Running on ${file}...`)
const code = fs.readFileSync(file).toString()
const htmlCode = code.replace(
templateRegex,
(_, p1) => `<template>\n${compilePug(p1)}\n</template>`
)
fs.writeFileSync(file, htmlCode)
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment