Skip to content

Starter frontend boilerplate which creates using HTML, SCSS, JavaScript and Gulp Js.

Notifications You must be signed in to change notification settings

kanishkasubash/frontend-boilerplate

Repository files navigation

HTML, SCSS and JavaScript based Small scale Frontend build tool

  1. Compile SCSS to CSS with minifing and sourcemap.
  2. Bundle JS files, minifing with sourcemap.
  3. Compresed html files.
  4. Handle images and Self-hosting Fonts.
  5. Watch files any changes.
  6. Browser Sync and auto Reload.

Step into the future of streamlined web development with your very own automation masterpiece crafted using Gulp.js. Gulp.js is more than just a tool; it's a technological marvel that empowers you to transform repetitive and time-consuming tasks into a symphony of efficiency and precision.

Imagine a digital assistant that watches your every move, anticipating your needs and executing them flawlessly. With Gulp.js, this vision becomes reality. Picture this: as you modify your source code, your automation tool leaps into action, effortlessly compiling your SCSS into sleek CSS, minifying your JavaScript for optimal performance, and even optimizing images to ensure lightning-fast load times. It's like having a team of tireless assistants working behind the scenes, ensuring your project is always at its best.

But that's just the beginning. Gulp.js empowers you to craft a tailor-made workflow that matches your unique development style. You wield the power to chain tasks together, orchestrating a seamless dance of processes that transform raw code into a polished masterpiece. Need to automatically inject CSS changes into your browser for instant previews? Gulp.js has your back. Want to synchronize your project with a remote server? Gulp.js can handle that too, ensuring your changes go live without missing a beat.

The simplicity of Gulp.js is its elegance. Through a simple and intuitive configuration, you define your tasks, and Gulp.js takes care of the rest. Your automation tool becomes an extension of your creativity, allowing you to focus on what truly matters – crafting exceptional web experiences that captivate and engage your audience.

And let's not forget about its vibrant ecosystem of plugins. Gulp.js boasts a vast library of plugins that cater to virtually every development need. From optimizing performance to generating documentation, from automatically injecting vendor prefixes to managing complex file structures, Gulp.js plugins empower you to do more with less effort, giving you the freedom to explore new horizons in your projects.

In essence, Gulp.js isn't just an automation tool; it's a paradigm shift. It's the gateway to a future where your time is spent crafting, innovating, and pushing boundaries rather than dwelling on mundane tasks. With Gulp.js by your side, you're not just a developer; you're an architect of efficiency, a conductor of precision, and a visionary creator of digital wonders. So dive in, harness the power of automation, and let Gulp.js elevate your web development journey to new heights of productivity and ingenuity.

How To Start

  1. Install Node.js (if you don't have in your computer).
  2. Download frontend-bolierplate folder into your local computer.
  3. Go to project folder cd ../frontend-boilerplate or you can open in text editor like vs code.
  4. open cmd or terminal run npm install.
  5. To start local server & run tasks run gulp.
  6. URLs Local: http://localhost:3000 UI: http://localhost:3001

Note: Every Tasks done by running this single gulp command.