Frontend Development Starter

A frontend development starter powered by Gulp, Alpinejs, Tailwindcss, Babel, Webpack, SASS & BrowserSync.

Requirements

• Nodejs
• NPM or Yarn or other node package manager

Features

• HTML Layouting
• Module Bundler
• Live reloading
• Image Optimization
• Others

Getting Started

• Clone this repo with git clone https://github.com/ariakm25/frontend-development-starter or download the zip.
• Run npm install
• Run npm run watch to start development mode
• Your browser should open at http://localhost:3000
• Edit your code inside of the src folder.
• Run npm run build to compile as production mode. Your compiled and minified minified css, html, and javascript files will be created and updated in dist folder.

Dependencies

  "@babel/core": "^7.12.3",
  "@babel/preset-env": "^7.12.1",
  "@fullhuman/postcss-purgecss": "^3.0.0",
  "alpinejs": "^2.7.3",
  "autoprefixer": "^9.0.0",
  "babel-loader": "^8.2.1",
  "browser-sync": "^2.26.13",
  "cross-env": "^7.0.2",
  "figures": "^3.2.0",
  "gulp": "^4.0.2",
  "gulp-autoprefixer": "^7.0.1",
  "gulp-babel": "^8.0.0",
  "gulp-clean": "^0.4.0",
  "gulp-color": "0.0.2",
  "gulp-concat": "^2.6.1",
  "gulp-cssnano": "^2.1.3",
  "gulp-imagemin": "^7.1.0",
  "gulp-nunjucks": "^5.1.0",
  "gulp-postcss": "^9.0.0",
  "gulp-sass": "^4.1.0",
  "gulp-sourcemaps": "^3.0.0",
  "gulp-util": "^3.0.8",
  "imagemin-mozjpeg": "^9.0.0",
  "tailwindcss": "^1.9.6",
  "webpack": "^5.5.0",
  "webpack-stream": "^6.1.1"

Built Using

• Gulp
• Alpinejs
• Tailwindcss
• Babel
• Webpack
• Nunjucks
• PostCSS
• Imagemin