Ferdous Boilerplate A boilerplate project for front-end development using Gulp, Sass, and SVG sprites.
- Installation
- Usage
- Available Scripts
- Gulp Tasks
- Folder Structure
- Additional Notes
- License
- How To Use SVG Icons
Clone the repository and navigate into the project directory:
git clone https://github.com/kanakferdous/kanak_html_boilerplate.git
cd your-repo
Node version should be 18.15.0 If you don't have it please run:
nvm install 18.15.0
nvm use 18.15.0
npm install
This will install all necessary packages defined in package.json, including Gulp and its plugins.
To start the development environment, run:
npm run watch
This command will compile Sass to CSS, minify JavaScript, generate SVG sprites, start a live-reloading server, and watch for changes in relevant files (scss, js, svg).
For a production-ready build (minified and optimized files), run:
npm run build
This command will compile Sass, minify JavaScript, and generate SVG sprites without starting a live server or watching for changes.
Runs the Gulp build task to compile assets for production.
npm run build
Runs the Gulp task to compile Sass files to CSS.
npm run style
Runs the Gulp task to minify JavaScript files.
npm run script
Runs the Gulp task to generate SVG sprites from icons.
npm run icons
Starts the development environment with live-reloading and watches for changes.
npm run watch
gulpfile.js The Gulp tasks are defined in gulpfile.js. Here’s a breakdown of the main tasks:
- If Gulp SASS not working please run:
npm install gulp-sass --save-dev
- style: Compiles Sass to CSS, adds vendor prefixes, and minifies CSS.
- script: Minifies JavaScript files.
- generateIcons: Generates an SVG sprite from individual SVG icons.
- watch: Starts a live-reloading server and watches for changes in Sass, JavaScript, and SVG files.
- assets/: Contains development and compiled files.
- .gitignore: Specifies files and directories to ignore in version control.
- gulpfile.js: Defines Gulp tasks for compiling Sass, minifying JS, generating SVG sprites, and starting the live server.
- package.json: Lists dependencies and defines scripts for running Gulp tasks.
Ensure live-server is globally installed
npm install -g live-server
for the live-reloading feature to work. Modify paths and configurations in gulpfile.js as per your project structure and requirements.
this will generate the icons id with the name of icons. so try to use proper name that you can understand you are using icons.
<svg class="icon">
<use xlink:href="assets/icons/sprite.svg#icon-name"></use>
</svg>
ISC License. See LICENSE for details.