Let's say that you want to add some interactive feature to the frontend of your site. You could of course use vanilla JS for that if it's something simple. But if you need to build something more complicated you would probably reach for some sort of frontend framework.

Now if you want to use Vue for that, that would be pretty simple, you could just call Vue with script tags to your page and immediatley start using it. Unfortunately that can't be said for Svelte. Because Svelte is a compiler, you would need to add a build step to your build pipeline. So in this episode I'm going to show you how to do that using Gulp and Webpack.

In this episode I'm going to show you how to add Svelte to your existing site using Gulp and Webpack.

How To Add Svelte To Your Site?

We already learned about [Command Line](http://watch-learn.com/video-tutorials/basic-frontend-tools-command-line) and [npm](http://watch-learn.com/video-tutorials/basic-frontend-tools-npm-node-package-manager) so now we are going to use that knowledge to install a task runner called Gulp.  

Gulp is one of the most popular task runners and in this episode I will show you how to setup some basic tasks for your project. 

Tasks that will be covered in this episode are: 

* Setting up autoprefixer
* Setting up SCSS compilation of files
* Watching our files
* Setting up BrowserSync

In this episode we are going to go through the basics of creating tasks that are going to be used by our task runner called Gulp.

Gulp

[Pattern Lab](http://patternlab.io/) is a way to organize your front-end modules and components. It uses mustache template language to make it easy for you to create variants of your components.

Pattern Lab was primarily built to be used with [atomic](http://bradfrost.com/blog/post/atomic-web-design/) design system in mind. But you can use it with any web design modular system you want.

In this video we are going to take a look at Node/Gulp version of Pattern Lab, and I'm going to show you how to create atoms, make variants, how to use json data to render your components and at the end how to combine atoms into molecules.

In this episode of front-end tips we are going to look at something called Pattern Lab. It's a way to organise your HTML and CSS components and modules.

Tutorials tagged with: gulp

Get in touch