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.
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
[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
npm start and you're good to go.
$ cd grunt.sass.autoprefixer $ npm i && npm start
Custom output directory
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
$ browser-sync recipe grunt.sass.autoprefixer --output my-project
Current recipes (links to github)
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.
Use these with the
recipe command. Eg:
browser-sync recipe webpack.babel