Giter Club home page Giter Club logo

kickstart-kirby's Introduction

KickStart Kirby with Gulp, BrowserSync and Livereload

A simple Gulp environment to kickstart development with Kirby CMS.

What's included?

  • PHP Server with BrowserSync and Livereload
  • Compiles, autoprefixes, minifies and sourcemaps SASS
  • Optimize images for production

Installation

  1. Download the latest version of Kirby CMS.
  2. Download this project and drop package.json and gulpfile.js in the root folder of your Kirby project.
  3. Install all required packages
npm install

Running your project

Once you've gotten everything installed, you can use Gulp to run and build your project for deployment.

Running Your Project

gulp serve

This will start a new server to run your project and open a new browser window to load it. It also compiles your Sass if you're using any. BrowserSync is connected, so any changes you make to your Sass, CSS, or PHP files will reload the page.

Building Your Project

gulp build

This will build your final project for deployment. This includes compiling SASS, optimizing images, minifying CSS, creating sourcemaps and adding browser prefixes.

Todo

  • Include Javascript related tasks (concat, uglify, lint, ...)
  • Create independent version for other Flat-File CMS

Feel free to contribute and let me know if you run into any troubles.

Credits

This is an updated version of Kirby Gulp Sync by Austin Price. I had some errors running the original version and decided to create my own one.

kickstart-kirby's People

Contributors

robinstickel avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

kickstart-kirby's Issues

Remove keepalive option

Hey there,
just wanted to say that the keepalive option from gulp-connect-php was removed, see here.

I really liked your Kirby repository, keep up the good work,
S1SYPHOS

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.