Add pug and more

README.md

@@ -1,10 +1,12 @@
-# Vue Browser SFC
+# Vue SFC Compiler
 
 > Template for build setup to compile Single File Components (.vue) into a standalone JS file for use in the browser
 
 This template is useful for compiling VueJS single file components (SFC) into standalone JS files for use in the browser. This is useful for devs that want to create a simple component that can be used on a site without having to build an entire app around it, similar to the way a JQuery plugin might be used. The template, script, and styles are all compiled to a single JS file.
 
-The compiler is setup to allow you to use either LESS or SASS (scss or sass) if you want to.
+The compiler is setup to allow you to use either LESS or SASS (scss or sass) if you want to
+
+As well as pug
 
 ## Usage
 
@@ -19,7 +21,7 @@ At the command line, enter the following commands in parent folder of where you
 $ npm install -g vue-cli
 
 # Create a new project based on this template
-$ vue init ronniesan/vue-browser-sfc my-project
+$ vue init sheychen/vue-sfc-compiler my-project
 
 # Navigate into your new project folder
 $ cd my-project
@@ -35,7 +37,11 @@ Create a `.vue` file anywhere in the `src` folder of the project you just create
 Then, run the webpack compiler and point the `--env.file` argument to the .vue file you created (you don't need to add the extension). The path should be relative to the `src` folder, so if you created your `.vue` file in the `src` folder, the path would just be the name of the file.  For example, if the file is located in `src/sub-folder/my-component.vue`, the path you would enter for the `--env.file` argument would be `sub-folder/my-component`.
 
 ``` bash
-$ webpack --env.file=path/to/my-component
+$ npm run build path/to/my-component
+```
+
+``` bash
+$ npm run serve path/to/my-component
 ```
 
 The webpack compiler runs in watch mode so any changes you make will update the compiled file. Whenever you make changes to you component, as long as the webpack compiler is running, the changes will be re-compiled and saved over the same output file. The compiled output file will be created at the same relative path in the `dist` folder that it was located in the `src` folder. So if you create a component at `src/some-sub-folder/my-rad-component.vue`, the compiled file will be located in `dist/some-sub-folder/my-rad-component.js`.

template/package.json

@@ -4,6 +4,8 @@
   "description": "A VueJS CLI template for compiling standalone components from .vue files",
   "main": "index.js",
   "scripts": {
+    "build": "webpack --env.file",
+    "serve": "webpack -d --watch --env.file",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -30,7 +32,6 @@
     "autoprefixer": "^8.3.0",
     "babel-loader": "^8.0.5",
     "css-loader": "^0.28.11",
-    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.11",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "less": "^3.0.2",
@@ -44,7 +45,9 @@
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.5.22",
     "webpack": "^4.6.0",
-    "webpack-cli": "^3.2.1"
+    "webpack-cli": "^3.2.1",
+    "pug": "^2.0.3",
+    "pug-plain-loader": "^1.0.0"
   },
   "dependencies": {
     "vue": "^2.5.22"

template/src/example.vue

@@ -1,7 +1,6 @@
-<template>
-	<div @click="changeName()">
-		Hello, {{name}}.
-	</div>
+<template lang="pug">
+div(@click="changeName()").
+	Hello, {{ name }}.
 </template>
 
 <script>
@@ -20,8 +19,7 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
-div {
-	font-weight: bold;
-}
+<style lang="sass" scoped>
+div
+	font-weight: bold
 </style>

template/webpack.config.js

@@ -7,8 +7,6 @@
 
 // Import dependencies
 const path                = require('path');
-const webpack             = require('webpack');
-const ExtractTextPlugin   = require('extract-text-webpack-plugin');
 const OptimizeCSSPlugin   = require('optimize-css-assets-webpack-plugin');
 const StringReplacePlugin = require('string-replace-webpack-plugin');
 const VueLoaderPlugin     = require('vue-loader/lib/plugin');
@@ -23,7 +21,6 @@ module.exports = (env) => {
 	const filepath = path.dirname(env.file);
 
 	return {
-		watch : true,
 		mode : 'production',
 		entry : {
 			[filename] : './entry.js'
@@ -107,6 +104,10 @@ module.exports = (env) => {
 							}
 						}
 					]
+				},
+				{
+					test: /\.pug$/,
+					loader: 'pug-plain-loader'
 				}
 			]
 		},