Adfab Gulp Boilerplate
A boilerplate including Gulp, Less/SASS, BrowserSync.
Overview
The ADFAB Gulp Boilerplate is a tool designed to save developers valuable time by providing pre-configured tasks for automating common front-end development processes. With features such as automatic browser reloading, minification of HTML, CSS, and JS files, transpiling ES6 code using Babel, and generating font icons and SVG sprites, the boilerplate aims to streamline the development workflow. It also allows for customization and creation of new tasks through a gulp-tasks folder.
Features
- Automatic reloading of the browser on code modification (using Browsersync)
- CSS / JS Sourcemaps
- HTML minification
- Image minification
- JS compilation
- Babel transpiler (ES6 support)
- SASS or LESS compilation
- Linting for JS, SASS, and LESS
- Desktop notifications on success and error
- Fonticon generation
- SVG Sprite generation
- Copy or Concat files
- Production mode: JS / CSS minification + sources maps removal
Summary
The ADFAB Gulp Boilerplate is a powerful tool that simplifies front-end development by automating common tasks. Its features, such as automatic browser reloading, file minification, transpiling, and generation of font icons and SVG sprites, help developers save time and improve productivity. Additionally, the boilerplate allows for customization and creation of new tasks, making it flexible and adaptable to different project requirements. Overall, the ADFAB Gulp Boilerplate is a valuable resource for developers looking to streamline their workflow and focus on more interesting aspects of their projects.
- 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.
- 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.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.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.