gulp4-pug-scss-ts-template

Pug × SCSS × TypeScript Template🐶 By gulp v4
（gulp v4 による Pug × SCSS × TypeScript テンプレート）

📦 Features

• Pug to HTML converter
• SCSS to CSS converter
• TypeScript to JavaScript converter
• Autoprefixer CSS
• Normalize.css

Pug to HTML converter option

If you add _ to the beginning of the file name, it will not be converted to HTML.

ex) _hogehoge.pug

Metadata is set in the following file.

src > pug > include > _base.pug

Directory structure

...
├─ gulpfile.ts
├─ src/
│  ├─ pug/
│  │  ├─ include/
│  │  │  └─ _base.pug
│  │  └─ index.pug
│  ├─ scss/
│  │  └─ style.scss
│  ├─ typescript/
│  │  └─ main.ts
│  └─ image/
│
└─ dist // What is automatically converted is stored here📦.
      ├─ css/
      │  └─ style.css
      ├─ js/
      │  └─ main.js
      ├─ image/
      │
      └─ index.html

Recommend VSCode Extensions

• Prettier - Code formatter
• ESLint

💬 Usage

0. How to set up gulp and Pug

If you’ve previously installed gulp globally, run npm rm --global gulp before following these instructions.
For more information, read this Sip.

1. Check for node, npm, and npx.
   If they are not installed, follow the instructions here.

# Check for node
$ node -v
v12.14.0

# Check for npm
$ npm -v
6.13.4

# Check for npx
$ npx -v
6.13.4

1. Install the gulp command line utility

   $ npm install --global gulp-cli

2. Install the pug command line utility

   $ npm install --global pug-cli

1. Install

$ git clone git@github.com:deren2525/gulp4-pug-scss-ts-template.git
$ cd gulp4-pug-scss-ts-template
$ npm install

Verify your gulp and pug versions

# Check for gulp
$ gulp -v
CLI version: 2.2.0
Local version: 4.0.2

# Check for pug
$ pug --version
pug version: 2.0.0-rc.4
pug-cli version: 1.0.0-alpha6

2. Start

# start
$ gulp

Go to http://localhost:3000 !