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
Current recipes (links to github)
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.
Recipe names
Use these with the recipe command. Eg: browser-sync recipe webpack.babel