wwwebmanwwwebman
216

Gulp Webpack Starter

screenshot of Gulp Webpack Starter
scss

Gulp Webpack Starter - fast static website builder. The starter uses gulp toolkit and webpack bundler. Download to get an awesome development experience!

Github

Overview

The Gulp Webpack Starter is a fast and simple web development toolkit that combines the Gulp task runner and the Webpack bundler. It is designed for building static HTML templates and speeding up WordPress theme development. The latest version, Version 2, has been released and offers an easy and user-friendly experience.

Features

  • CSS: Includes SASS, Autoprefixer, and gulp-purgecss for efficient CSS development.
  • JS: Utilizes Webpack and Babel for JavaScript bundling and transpiling.
  • Live Reload: Comes with BrowserSync, Webpack Dev Middleware, and Webpack Hot Middleware for live reloading and efficient development.
  • HTML: Uses gulp-file-include for easy static HTML templating.
  • Images: Includes gulp-imagemin for optimizing image files.
  • SVG sprite: Utilizes gulp-svg-sprite for creating a SVG sprite.

Static HTML Templating

  1. Clone the project repository.
  2. Run the command cp .env.dist .env.
  3. Modify the files under [my-static-template-project-name]/dev/* to start developing static HTML templates.

WordPress

  1. Preparation:
    • Ensure that the WordPress website is available under http://localhost/[awesome_wp_project].
    • Make sure that a WordPress theme is already created.
  2. Modify the .env file:
    • Set the correct values for the BROWSER_SYNC_TARGET and BROWSER_SYNC_PUBLIC_PATH variables.
      • BROWSER_SYNC_TARGET refers to the locally installed WordPress website.
      • BROWSER_SYNC_PUBLIC_PATH refers to the relative pathname of bundle.js in the browser.
    • Optional: Modify the ROOT_DIST variable to change the destination of compiled files.
  3. Double-check if assets are attached in [theme_folder_name]/functions.php.
  4. Run the desired commands for WordPress development.

Summary

The Gulp Webpack Starter is a powerful web development toolkit that combines the Gulp task runner and the Webpack bundler. It offers a range of features including CSS preprocessing, JavaScript bundling, live reloading, and static HTML templating. It is designed for both static HTML templates and WordPress theme development. With its easy installation process and user-friendly interface, it is a valuable tool for web developers looking to streamline their workflow.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

gulp
Gulp

Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.