Using Gulp

Automate all your tasks.

Build System

  • Automate compiling Sass
  • Add vendor prefixes
  • Minify files
  • Combine files
  • Tons more

Getting Started

  • Node and npm
  • npm install -g gulp-cli
  • gulpfile.js

Using Gulp

  • gulp.task()
  • gulp.src()
  • gulp.dest()

A CSS Task

A JS Task

Auto-Loading Plugins

Watching for File Changes

Reloading the Browser

Database Migrations


  • name
  • email
  • avatar
  • username
  • password
  • role


  • user_id
  • title
  • slug
  • image
  • content
  • status
  • published_at

Model Factories

Create sample data quickly.

Seeding Our Database

Fill our database with sample data.

Routing Our App

Top down overview.


  • Home Page
  • Single Page
  • Contact Page


CSS and JS for our application.


  • Using gulp and Laravel Elixir
  • Using Sass
  • Using jQuery
  • Using Bootstrap

Styling the Site

Styling Post Components

Blade Layouts

Simple and extendable views.

Contact Page

  • Showing a Form
  • Processing a form
  • Sending an email


  • Built-in Laravel authentication
  • Creating login/register views

Profile Pages

  • View a user profile
  • Let a user edit their own profile

Admin Dashboard

  • Only admins can access
  • CRUD posts
  • New Dashboard namespace

Dashboard Routes

  • Home page
  • Posts resource controller

List All Posts

Create a Post

Edit a Post

Delete a Post

Authenticating the Dashboard

Only admins can access.

Dashboard Links

Only admins can see.

Getting Started with Gulp

By Chris Sevilleja

Getting Started with Gulp

  • 658
Loading comments...

More from Chris Sevilleja