/gulp4-html-scss-ts-template

HTML Γ— SCSS Γ— TypeScript Template🐢 By gulp v4

Primary LanguageTypeScript

gulp4-html-scss-ts-template

gulp-html-scss-typescript

HTML Γ— SCSS Γ— TypeScript Template🐢 By gulp v4 （gulp v4 γ«γ‚ˆγ‚‹ HTML Γ— SCSS Γ— TypeScript γƒ†γƒ³γƒ—γƒ¬γƒΌγƒˆοΌ‰

πŸ“¦ Features

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

Directory structure

...
β”œβ”€ gulpfile.ts
β”œβ”€ index.html
β”œβ”€ src/
β”‚  β”œβ”€ scss/
β”‚  β”‚  └─ style.scss
β”‚  β”œβ”€ typescript/
β”‚  β”‚ └─ main.ts
β”‚  └─ image/
β”‚
└─ dist/ // What is automatically converted is stored hereπŸ“¦.
    β”œβ”€ css/
    β”‚  └─ style.css
    β”œβ”€ js/
    β”‚  └─  main.js
    └─ image/

Recommend VSCode Extensions

πŸ’¬ Usage

0. How to set up gulp

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

1. Install

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

Verify your gulp versions

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

2. Start

# start
$ gulp

Go to http://localhost:3000 !