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?

Sass is a CSS extension language that shares some similarities with "normal" programming languages in that you can use variables, arrays (which are called maps in Sass), functions, mixins etc. of course since the browsers can't interpret SCSS files you have to compile them down to normal CSS. We have set up our task runner to do just that in the [previous episode](http://watch-learn.com/video-tutorials/basic-frontend-tools-gulp) so be sure to check that out.

In this episode I'm going to go over the basics of Sass and what it can do, this is in no way, shape or form everything the Sass can do, because I would need to create a whole series of videos to cover everything. But I think I covered most used things for Sass that you would find in th wild and they are a good starting point for you to start learnig Sass for yourself.

In this episode I'm going to show you how you can supercharge your CSS development by using CSS extension language called Sass.

Sass

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

Since October CMS is based on Laravel I thought it would be fitting to set it up with our installation of October CMS, since Laravel itself uses it out of the box. Laravel Elixir is a kind of a wrapper over Gulp task runner and it lets you write much less code to do your basic compilation of Sass and JavaScript files then you would write using vanilla Gulp.

In this episode we are going to set it up so that it compiles our `.scss` files and our ``.js` files, and it is also going to watch them an compile them every time we hit save. And on top of that it's going to automatically refresh our page when ever we do so using Livereload plugin.

In this episode we are going to set up Laravel Elixir to with our October CMS installation. Also we are going to enable Livereload, so that we can see the changes on our site whenever we save a file.

Setting Up Laravel Elixir

If you ever used Laravel framework for development you must have heard about [Laravel Elixir](https://laravel.com/docs/5.0/elixir). It is an abstraction layer for gulp.js which makes writing your basic gulp tasks super easy. Since it was made for Laravel, it works out of the box with that framework.

Wouldn't it be nice if we could have the power of Elixir on WordPress. Yes, it would you might say. And that is what we are going to be doing in this episode.

First we are going to install Laravel Elixir, then we are going to do some basic tasks with it, like compiling our `.scss` files. Then I'm going to show you how to use LiveReload with it. And finally how to prepare your files for production.

The result of all of this will be Elixir enabled theme which you can download from the link below.

### Download Elixir Theme

[Download it here](https://github.com/ivandoric/elixir)

In this episode of Frontend Tips I'm going to show you how you can use Laravel Elixir in your WordPress workflow, and also how to use it with LiveReload.

Using Laravel Elixir With WordPress

In this episode we are going to setup our Drupal 8 theme to work with Gulp.js task runner and make it compile our sass files, minify our JavaScript files and watch for changes that we do and automatically refresh the browser for us.

This theme is going to do pretty much the same thing as the Olympos theme for WordPress. You can check out the [video about that here](http://watch-learn.com/video-tutorials/using-and-installing-new-olympos-theme/).

In this episode of Drupal 8 Theming tutorial series we are going to setup our theme to work with Sass, Gulp.js and Live Reload.

Gulp.js, Sass, LiveReload

I really like the stuff you get out of the box with Middleman, like LiveReload, JavaScript minification and Sass compilation. But I like Gulp.js more. I think its LiveReload plugin works much faster than what you get with Middleman.

In this episode I will show you how you can setup LiveReload, Sass compilation and image optimisation in Gulp.js to work with Middleman.

We are going to use existing [Olympos](http://watch-learn.com/video-tutorials/using-and-installing-new-olympos-theme/) theme's gulpfile and configure it to be used with Middleman.

In this episode we are going setup our Middleman project so that it works with Gulp.js.

Setting up Gulp.js With Middleman

The theme is optimised to load very quickly and to give you very fast development environment.

It's completely free and you can use it however you want.

It's a developers theme, so if you don't like being bogged down by all unnecessary css and js you can use this.

You can [download it here](https://github.com/ivandoric/olympos).

Olympos is a starter theme for your WordPress projects, it doesn't have any fancy CSS in it but it will get you WordPress development going very, very fast.

Using and installing new Olympos theme

In this video I'm going to talk about WordPress development, actually about first steps that I take when WordPress is installed.

I'm going to talk about Sublime Text and the plugins I'm using for it.

I'm also going to present my [clean starter theme called "Olympos"](https://github.com/ivandoric/olympos).

Also you will see how to use Olympos theme and how it works with [Compass](http://compass-style.org/), [Sass](http://sass-lang.com/) and [Gulp.js](http://gulpjs.com/).

In the part two of this series I'ma talking about my development setup and software technologies I'm using.

Tutorials tagged with: gulp.js

Get in touch