Browsersync 简单用例

简单用例（recipes）是一组关于如何将 Browsersync 和其他流行工具一起使用的实例。每个实例可以独立运行，并且对于新手和老手来说都是了解各种可能用法的好途径。

查看 Github 项目 以了解所有简单用例。

Recipe 命令

如果你已经全局安装了 Browsersync （安装时添加了 -g 参数），就可以访问 recipe 命令了。运行此命令，你将看到所有可用的简单用例列表。

$ 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
    ...
    ...

一旦你选择了要使用的简单用例，例如 grunt.sass.autoprefixer，只需运行以下命令 将文件复制到具有相同名称的新目录中。

$ browser-sync recipe grunt.sass.autoprefixer

接下来，利用 cd 命令进入到前面创建的目录中并像任何其它项目一样执行 npm install 命令。然后 执行 npm start 命令，一切搞定。

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

自定义输出目录

默认情况下，browser-sync recipe <name> 将创建 <name> 目录。因此，在上面的实例中， 将会创建文件夹 grunt.sass.autoprefixer。如果你想给它换个名字，通过 output 参数指定即可。

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

当前可用的简单用例列表（到 github 仓库的链接）

• Grunt Html Injection
• Grunt Sass
• Grunt Sass Autoprefixer
• Gulp Browserify
• Gulp Jade
• Gulp Ruby Sass
• Gulp Sass
• Gulp Swig
• Gulp Task Sequence
• Html Injection
• Middleware Css Injection
• Proxy Custom-css
• Server
• Server Gzipped Assets
• Server Includes
• Server Middleware
• Webpack Babel
• Webpack Monkey-hot-loader
• Webpack React-hot-loader
• Webpack React-transform-hmr
• Webpack Typescript
• Webpack Typescript React

贡献

简单用例（recipes）是为了展示一个特性或用例是如何工作的， 我们希望根据您（作为 Browsersync 用户）的反馈和贡献做进一步扩充。

因此，如果您有一种尚未在简单用例中列出的工作流， 您可以给我们发送一个 pull request，这样其他人就可以从你学到的东西中获益。