Browsersync Recipes

Recipes are stand-alone examples of how to use Browsersync alongside many other popular tools. Each example can be run separately and is a great way for newcomers and pros alike to get their heads around the different use-cases that are possible.

Check out the Github Project for a full list of all recipes.

Recipe command

If you have Browsersync installed globally (via the -g flag), then you have access to the recipe command. Run it and you'll see a list of the available recipes that can be installed.

$ browser-sync recipe

Example output:

[BS] No recipe name provided!
[BS] Install one of the following with browser-sync recipe <name>

    grunt.html.injection
    grunt.sass
    grunt.sass.autoprefixer
    ...
    ...

Once you've chosen a recipe to use, such as grunt.sass.autoprefixer simply run the following command to copy the files into a new directory with the same name.

$ browser-sync recipe grunt.sass.autoprefixer

Next, cd into that directory and run npm install as you would any other project. Then just run npm start and you're good to go.

$ cd grunt.sass.autoprefixer
$ npm i && npm start

Custom output directory

By default, browser-sync recipe <name> will create the directory <name>. So in the above example it will create the folder grunt.sass.autoprefixer. If you want to call it something else, pass the output flag.

$ browser-sync recipe grunt.sass.autoprefixer --output my-project

Contribute

The concept of recipes, showing exactly how a feature or use-case works is something we'd like to expand on using feedback & contributions from you, the Browsersync Users.

So if you have a kind of workflow that is not already listed in the recipes, you should send us a pull request so that other people can benefit from what you've learnt.