Introduction

Gulp Starter Kit is a comprehensive toolset for front-end developers, designed to streamline web development workflows. This kit integrates popular technologies like SCSS, Eleventy, Nunjucks, rollup.js, and Babel, providing a solid foundation for building modern web projects. It's framework-agnostic, allowing developers to use their preferred front-end frameworks while benefiting from a robust build process and development environment.

Main Features

1. Framework independence - compatible with various front-end frameworks
2. SCSS support for advanced CSS preprocessing
3. Performance optimization through minification and concatenation of assets
4. ES6+ support via Babel with automatic polyfilling
5. Code quality tools: Linting for CSS, SCSS, and JavaScript
6. Multiple template language support (Nunjucks, Markdown, Liquid, etc.)
7. Built-in HTTP server for local development
8. Live Browser Reloading for instant feedback
9. Cross-device Synchronization powered by BrowserSync
10. Eleventy integration for static site generation

Installation Steps

1. Ensure you have Node.js 12 or newer installed.

2. Install Gulp 4 globally if you haven't already:

   npm install -g gulp
   

3. Clone the repository:

   git clone https://github.com/nstungcom/gulp-starter-kit.git my-project/
   

4. Navigate to the project directory:

   cd my-project
   

5. Install dependencies:

   npm install
   

Usage Instructions

1. Start development server:

   npm start
   

   or

   npm run dev
   

2. Build for production:

   npm run build
   

3. Clean up generated files:

   npm run clean
   

4. Customize your project:

   • Modify SCSS files in the src/scss directory
   • Edit JavaScript in the src/js directory
   • Create templates using Nunjucks or other supported languages in the src/templates directory
   • Configure build settings in gulpfile.js and config.js

5. Use Eleventy for static site generation:

   • Refer to the Eleventy documentation for advanced usage
   • Customize the Eleventy configuration in .eleventy.js

6. Leverage linting tools:

   • CSS/SCSS linting with stylelint
   • JavaScript linting with ESLint

Important Notes

1. The kit is designed to work with Node.js version 12 or newer.

2. Gulp 4 is required for this starter kit to function properly.

3. The project uses Babel for ES6+ support, ensuring wide browser compatibility.

4. BrowserSync is integrated for cross-device testing and synchronized browsing.

5. The kit supports multiple template languages through Eleventy, offering flexibility in choosing your preferred syntax.

6. Performance optimization is built-in, including minification and concatenation of assets.

7. The project structure is organized for clarity, with source files in the src directory.

8. Customization options are available through configuration files like config.js and .eleventy.js.

9. For specific front-end framework integration, refer to the project's recipes documentation.

10. Regular updates and maintenance are recommended to keep dependencies current and ensure compatibility with the latest web development standards.