Gulp Starter Kit
A simple Gulp 4 Starter Kit for modern web development.
Overview
The Gulp Starter Kit is a simple Gulp 4 Starter Kit designed to set up a modern web development environment. It provides a range of features to streamline the development process, including copying HTML files, compiling Pug template files, compiling CSS preprocessor code, compiling and minifying JS code, compressing and copying images, and importing dependencies using ES6 modules.
Features
- Copy HTML files: Copies HTML files from the source directory to the distribution directory.
- Compile Pug template files: Compiles Pug template files (.pug) to HTML files and places them in the distribution directory.
- Compile CSS preprocessor code: Compiles Sass/SCSS, Less, or Stylus code to CSS.
- Autoprefix and minify CSS: Applies autoprefixing and minification to CSS code and places it in the distribution directory.
- Compile ES6+ to ES5: Transpiles ES6+ code to ES5, concatenates JS files, and minifies the code.
- Compress and copy images: Compresses and copies images to the distribution directory.
- Copy dependencies: Copies dependencies specified in the package.json file from the source/node_modules directory to the node_modules folder in the distribution directory.
- Import dependencies with ES6 modules: Allows importing dependencies into applications using ES6 modules.
- Spin up local dev server: Sets up a local development server at http://localhost:3000 with auto-reloading.
- LESS
Less CSS is a dynamic stylesheet language that extends the capabilities of CSS, allowing developers to write cleaner, more modular, and reusable stylesheets with features like variables, mixins, and nested rules.
- 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.
- 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.
- Pug
Pug is a high-performance template engine for Node.js and browsers that enables developers to write HTML templates using a concise and intuitive syntax. It supports a range of features, including template inheritance, conditionals, loops, mixins, and more, and can be easily integrated into a variety of web frameworks and build tools.
