├── .npmignore ├── .gitignore ├── .travis.yml ├── .jshintrc ├── examples ├── Gruntfile.snippet.js ├── Gruntfile.server.js ├── Gruntfile.proxy.js ├── Gruntfile.sass.proxy.js └── Gruntfile.sass.server.js ├── LICENSE-MIT ├── test ├── e2e.js └── fixtures │ ├── index.html │ └── css │ └── style.css ├── package.json ├── README.md ├── tasks └── browser-sync.js ├── Gruntfile.js └── readme.old.md /.npmignore: -------------------------------------------------------------------------------- 1 | test/ 2 | .sass-cache/ 3 | .idea/ -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | tmp 4 | .idea 5 | .sass-cache 6 | *.swp 7 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | git: 3 | depth: 2 4 | language: node_js 5 | node_js: 6 | - '5' 7 | - '4' 8 | - '0.12' 9 | - '0.10' 10 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "boss": true, 3 | "curly": true, 4 | "eqeqeq": true, 5 | "eqnull": true, 6 | "immed": true, 7 | "latedef": true, 8 | "mocha" : true, 9 | "newcap": true, 10 | "noarg": true, 11 | "node": true, 12 | "sub": true, 13 | "undef": true, 14 | "unused": true 15 | } 16 | -------------------------------------------------------------------------------- /examples/Gruntfile.snippet.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Install: 4 | * npm install grunt grunt-browser-sync 5 | * 6 | * Run: 7 | * grunt 8 | * 9 | * This example will output a snippet into the console, 10 | * Paste it into the body of your website. 11 | */ 12 | 13 | module.exports = function (grunt) { 14 | 15 | grunt.initConfig({ 16 | 17 | // BrowserSync Task 18 | browserSync: { 19 | default_options: { 20 | bsFiles: { 21 | src: [ 22 | "css/*.css", 23 | "*.html" 24 | ] 25 | } 26 | } 27 | } 28 | 29 | }); 30 | 31 | grunt.loadNpmTasks("grunt-browser-sync"); 32 | 33 | grunt.registerTask("default", ["browserSync"]); 34 | }; -------------------------------------------------------------------------------- /examples/Gruntfile.server.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Install: 4 | * npm install grunt grunt-browser-sync 5 | * 6 | * Run: 7 | * grunt 8 | * 9 | * This example will serve HTML files from the `app` directory 10 | * 11 | */ 12 | 13 | module.exports = function (grunt) { 14 | 15 | grunt.initConfig({ 16 | 17 | // BrowserSync Task 18 | browserSync: { 19 | default_options: { 20 | bsFiles: { 21 | src: [ 22 | "css/*.css", 23 | "*.html" 24 | ] 25 | }, 26 | options: { 27 | baseDir: "app" 28 | } 29 | } 30 | } 31 | 32 | }); 33 | 34 | grunt.loadNpmTasks("grunt-browser-sync"); 35 | 36 | grunt.registerTask("default", ["browserSync"]); 37 | }; -------------------------------------------------------------------------------- /examples/Gruntfile.proxy.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Install: 4 | * npm install grunt grunt-browser-sync 5 | * 6 | * Run: 7 | * grunt 8 | * 9 | * This example will wrap your existing vhost in a proxy URL 10 | * Use the proxy URL to view your site. 11 | * 12 | */ 13 | 14 | module.exports = function (grunt) { 15 | 16 | grunt.initConfig({ 17 | 18 | // BrowserSync Task 19 | browserSync: { 20 | default_options: { 21 | bsFiles: { 22 | src: [ 23 | "css/*.css", 24 | "*.html" 25 | ] 26 | }, 27 | options: { 28 | proxy: "localphpsite.dev" 29 | } 30 | } 31 | } 32 | 33 | }); 34 | 35 | grunt.loadNpmTasks("grunt-browser-sync"); 36 | 37 | grunt.registerTask("default", ["browserSync"]); 38 | }; 39 | -------------------------------------------------------------------------------- /LICENSE-MIT: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 Shane Osbourne 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /test/e2e.js: -------------------------------------------------------------------------------- 1 | var exec = require("child_process").spawn; 2 | var http = require("http"); 3 | var assert = require("chai").assert; 4 | 5 | describe("Running server", function () { 6 | it("running server from grunt", function (done) { 7 | var instance = exec("grunt", ["browserSync:server"]); 8 | instance.stdout.on("data", function (data) { 9 | var string = data.toString().split(" "); 10 | var url; 11 | 12 | if (string[1] === "Local") { 13 | url = string[3]; 14 | var opts = require("url").parse(url); 15 | opts.headers = { 16 | accept: "text/html" 17 | }; 18 | http.get(opts, function (res) { 19 | var chunks = []; 20 | res.on("data", function (chunk) { 21 | chunks.push(chunk.toString()); 22 | }); 23 | res.on("end", function () { 24 | instance.kill(); 25 | assert.include(chunks.join(""), "/browser-sync/browser-sync-client"); 26 | done(); 27 | }) 28 | }) 29 | } 30 | }); 31 | }); 32 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "grunt-browser-sync", 3 | "description": "Live CSS reload & Browser Syncing", 4 | "version": "2.2.0", 5 | "homepage": "https://github.com/shakyshane/grunt-browser-sync", 6 | "author": { 7 | "name": "Shane Osbourne" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git://github.com/shakyshane/grunt-browser-sync.git" 12 | }, 13 | "bugs": { 14 | "url": "https://github.com/shakyshane/grunt-browser-sync/issues" 15 | }, 16 | "licenses": [ 17 | { 18 | "type": "MIT", 19 | "url": "https://github.com/shakyshane/grunt-browser-sync/blob/master/LICENSE-MIT" 20 | } 21 | ], 22 | "main": "Gruntfile.js", 23 | "engines": { 24 | "node": ">=0.10.0" 25 | }, 26 | "scripts": { 27 | "test": "jshint tasks/*.js" 28 | }, 29 | "dependencies": { 30 | "browser-sync": "^2.17.2" 31 | }, 32 | "keywords": [ 33 | "gruntplugin", 34 | "live reload", 35 | "inject styles", 36 | "style injector", 37 | "auto refresh" 38 | ], 39 | "devDependencies": { 40 | "grunt": "^0.4.5", 41 | "grunt-autoprefixer": "^3.0.0", 42 | "grunt-cli": "^0.1.13", 43 | "grunt-concurrent": "^1.0.0", 44 | "grunt-contrib-connect": "^0.9.0", 45 | "grunt-contrib-sass": "^0.9.2", 46 | "grunt-contrib-watch": "^0.6.1", 47 | "jshint": "^2.6.3" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /examples/Gruntfile.sass.proxy.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Install: 4 | * npm install grunt grunt-contrib-watch grunt-contrib-sass grunt-browser-sync 5 | * 6 | * Run: 7 | * grunt 8 | * 9 | * This example will watch SCSS files & compile them. 10 | * BrowserSync will then inject the changes. 11 | */ 12 | module.exports = function (grunt) { 13 | 14 | // Project configuration. 15 | grunt.initConfig({ 16 | watch: { 17 | sass: { 18 | files: "app/scss/*.scss", 19 | tasks: "sass:dev" 20 | } 21 | }, 22 | sass: { 23 | dev: { 24 | files: { 25 | "app/css/styles.css": "app/scss/styles.scss" 26 | } 27 | } 28 | }, 29 | browserSync: { 30 | default_options: { 31 | bsFiles: { 32 | src: [ 33 | "css/*.css", 34 | "*.html" 35 | ] 36 | }, 37 | options: { 38 | watchTask: true, 39 | proxy: "yourvhost.dev" 40 | } 41 | } 42 | } 43 | }); 44 | 45 | grunt.loadNpmTasks('grunt-contrib-watch'); 46 | grunt.loadNpmTasks('grunt-contrib-sass'); 47 | grunt.loadNpmTasks('grunt-browser-sync'); 48 | 49 | grunt.registerTask('default', ['browserSync', 'watch']); 50 | }; -------------------------------------------------------------------------------- /examples/Gruntfile.sass.server.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Install: 3 | * npm install grunt grunt-contrib-watch grunt-contrib-sass grunt-browser-sync 4 | * 5 | * Run: 6 | * grunt 7 | * 8 | * This example will watch SCSS files & compile them. 9 | * BrowserSync will then inject the changes. 10 | */ 11 | module.exports = function (grunt) { 12 | 13 | // Project configuration. 14 | grunt.initConfig({ 15 | watch: { 16 | sass: { 17 | files: "app/scss/*.scss", 18 | tasks: "sass:dev" 19 | } 20 | }, 21 | sass: { 22 | dev: { 23 | files: { 24 | "app/css/styles.css": "app/scss/styles.scss" 25 | } 26 | } 27 | }, 28 | browserSync: { 29 | default_options: { 30 | bsFiles: { 31 | src: [ 32 | "css/*.css", 33 | "*.html" 34 | ] 35 | }, 36 | options: { 37 | watchTask: true, 38 | server: { 39 | baseDir: "./" 40 | } 41 | } 42 | } 43 | } 44 | }); 45 | 46 | grunt.loadNpmTasks('grunt-contrib-watch'); 47 | grunt.loadNpmTasks('grunt-contrib-sass'); 48 | grunt.loadNpmTasks('grunt-browser-sync'); 49 | 50 | grunt.registerTask('default', ['browserSync', 'watch']); 51 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # grunt-browser-sync [](https://www.npmjs.org/package/grunt-browser-sync) 2 | 3 | > A grunt task for the [browser-sync](https://github.com/shakyShane/browser-sync) module. 4 | 5 | Follow [@browserSync](http://www.twitter.com/browserSync) for news & updates. 6 | 7 | ## Getting Started 8 | This plugin requires Grunt `~0.4.1` 9 | 10 | If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. 11 | 12 | ## About 13 | 14 | For a full list of features, please visit [https://github.com/shakyShane/browser-sync](https://github.com/shakyShane/browser-sync) 15 | 16 | 17 | ## Install 18 | 19 | ```shell 20 | npm install grunt-browser-sync --save-dev 21 | ``` 22 | 23 | Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript: 24 | 25 | ```js 26 | grunt.loadNpmTasks('grunt-browser-sync'); 27 | ``` 28 | 29 | ## Usage 30 | Please see the [Grunt JS](http://www.browsersync.io/docs/grunt/) section of the Official [BrowserSync Documentation](http://www.browsersync.io/docs/). 31 | 32 | ## Support 33 | If you've found Browser-sync useful and would like to contribute to its continued development & support, please feel free to send a donation of any size - it would be greatly appreciated! 34 | 35 | [](https://www.gittip.com/shakyshane) 36 | [](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=shakyshane%40gmail%2ecom&lc=US&item_name=browser%2dsync) 37 | 38 | ## Contributing 39 | In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [Grunt](http://gruntjs.com/). 40 | -------------------------------------------------------------------------------- /tasks/browser-sync.js: -------------------------------------------------------------------------------- 1 | /* 2 | * grunt-browser-sync 3 | * https://github.com/BrowserSync/grunt-browser-sync 4 | * 5 | * Copyright (c) 2015 Shane Osbourne 6 | * Licensed under the MIT license. 7 | */ 8 | 9 | 'use strict'; 10 | 11 | module.exports = function (grunt) { 12 | 13 | var bs = require("browser-sync").create("Grunt"); 14 | 15 | grunt.registerMultiTask("browserSync", "Keep your browsers in sync", function () { 16 | 17 | var done = this.async(); 18 | 19 | var options = this.options({ 20 | keepalive: true 21 | }); 22 | 23 | var patterns; 24 | 25 | if (this.data && this.data.bsFiles && this.data.bsFiles.src) { 26 | patterns = this.data.bsFiles.src; 27 | if (typeof patterns === "string") { 28 | patterns = [patterns]; 29 | } 30 | } 31 | 32 | if (!patterns) { 33 | if (this.data.src) { 34 | patterns = this.data.src; 35 | if (typeof this.data.src === "string") { 36 | patterns = [this.data.src]; 37 | } 38 | } 39 | } 40 | 41 | if (!patterns) { 42 | if (this.filesSrc.length) { 43 | patterns = this.filesSrc; 44 | } 45 | } 46 | 47 | bs.init(patterns || [], options, function (err) { 48 | if (err) { 49 | done(err); 50 | return; 51 | } 52 | 53 | if (options.watchTask || 54 | options.watchtask || 55 | options.background || 56 | !options.keepalive) { 57 | done(); 58 | } 59 | }); 60 | }); 61 | 62 | grunt.registerMultiTask("bsReload", function () { 63 | if (bs && bs.active) { 64 | bs.reload(this.data.reload); 65 | } 66 | }); 67 | 68 | grunt.registerMultiTask("bsNotify", function () { 69 | if (bs && bs.active) { 70 | bs.notify(this.data.notify, this.data.timeout); 71 | } 72 | }); 73 | }; 74 | -------------------------------------------------------------------------------- /test/fixtures/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |1
13 | 14 |2
15 | 16 |3
17 | 18 |4
19 | 20 |5
21 | 22 |6
23 | 24 |7
25 | 26 |8
27 | 28 |9
29 | 30 |10
31 | 32 |11
33 | 34 |21
35 | 36 |31
37 | 38 |41
39 | 40 |51
41 | 42 |61
43 | 44 |71
45 | 46 |81
47 | 48 |91
49 | 50 |101
51 | 52 |111
53 | 54 |121
55 | 56 |131
57 | 58 |141
59 | 60 |151
61 | 62 |161
63 | 64 |171
65 | 66 |181
67 | 68 |191
69 | 70 |201
71 | 72 |211
73 | 74 |221
75 | 76 |231
77 | 78 |241
79 | 80 |251
81 | 82 |261
83 | 84 |271
85 | 86 |281
87 | 88 |291
89 | 90 |301
91 | 92 |311
93 | 94 |321
95 | 96 |331
97 | 98 |341
99 | 100 |351
101 | 102 |361
103 | 104 |371
105 | 106 |381
107 | 108 |391
109 | 110 |401
111 | 112 |411
113 | 114 |421
115 | 116 |431
117 | 118 |441
119 | 120 |451
121 | 122 |461
123 | 124 |471
125 | 126 |481
127 | 128 |491
129 | 130 |501
131 | 132 |511
133 | 134 |521
135 | 136 |531
137 | 138 |541
139 | 140 |551
141 | 142 |561
143 | 144 |571
145 | 146 |581
147 | 148 |591
149 | 150 |601
151 | 152 |611
153 | 154 |621
155 | 156 |631
157 | 158 |641
159 | 160 |651
161 | 162 |661
163 | 164 |671
165 | 166 |681
167 | 168 |691
169 | 170 |701
171 | 172 |711
173 | 174 |721
175 | 176 |731
177 | 178 |741
179 | 180 |751
181 | 182 |761
183 | 184 |771
185 | 186 |781
187 | 188 |791
189 | 190 |801
191 | 192 |811
193 | 194 |821
195 | 196 |831
197 | 198 |841
199 | 200 |851
201 | 202 |861
203 | 204 |871
205 | 206 |881
207 | 208 |891
209 | 210 |901
211 | 212 |911
213 | 214 |921
215 | 216 |931
217 | 218 |941
219 | 220 |951
221 | 222 |961
223 | 224 |971
225 | 226 |981
227 | 228 |991
229 | 230 |1001
231 | 232 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | /* 2 | * grunt-browser-sync 3 | * https://github.com/shakyshane/grunt-browser-sync 4 | * 5 | * Copyright (c) 2013 Shane Osbourne 6 | * Licensed under the MIT license. 7 | */ 8 | 9 | 'use strict'; 10 | 11 | module.exports = function (grunt) { 12 | 13 | // Project configuration. 14 | grunt.initConfig({ 15 | jshint: { 16 | all: [ 17 | 'Gruntfile.js', 18 | 'tasks/*.js', 19 | '<%= nodeunit.tests %>' 20 | ], 21 | options: { 22 | jshintrc: '.jshintrc' 23 | } 24 | }, 25 | uglify: { 26 | files: { 27 | src: "tasks/lib/style-injector-client.js", 28 | dest: "tasks/lib/style-injector-client.min.js" 29 | } 30 | }, 31 | clean: { 32 | tests: ['tmp'] 33 | }, 34 | // The actual grunt server settings 35 | connect: { 36 | server: { 37 | options: { 38 | hostname: "127.0.0.1", 39 | port: 9001, 40 | base: "test/fixtures" 41 | } 42 | } 43 | }, 44 | watch: { 45 | options: { 46 | spawn: false 47 | }, 48 | server_tests: { 49 | files: [ 50 | "test/new-server/**/*.js", 51 | "tasks/lib/**/*.js" 52 | ], 53 | tasks: ["jasmine_node"] 54 | }, 55 | sass: { 56 | files: "test/fixtures/sass/*.scss", 57 | tasks: ['bsNotify:sassStart', 'sass', 'autoprefixer', 'bsReload:css'] 58 | } 59 | }, 60 | concurrent: { 61 | dev: { 62 | tasks: [ 63 | 'watch', 64 | 'browserSync' 65 | ], 66 | options: { 67 | logConcurrentOutput: true 68 | } 69 | } 70 | }, 71 | autoprefixer: { 72 | sass: { 73 | files: { 74 | "test/fixtures/css/style.css": "test/fixtures/css/style.css" 75 | } 76 | } 77 | }, 78 | browserSync: { 79 | server: { 80 | bsFiles: { 81 | src : [ 82 | //'test/fixtures/css/*.css', 83 | 'test/fixtures/*.html' 84 | ] 85 | }, 86 | options: { 87 | open: false, 88 | online: false, 89 | background: true, 90 | server: { 91 | baseDir: ["test/fixtures", "test/fixtures2"], 92 | middleware: [ 93 | function (req, res, next) { 94 | console.log("from middleware 1"); 95 | next(); 96 | }, 97 | function (req, res, next) { 98 | console.log("from middleware 2"); 99 | next(); 100 | } 101 | ] 102 | } 103 | } 104 | }, 105 | proxy: { 106 | files: { 107 | src : [ 108 | 'test/fixtures/css/style.css' 109 | ] 110 | }, 111 | options: { 112 | watchTask: false, 113 | ghostMode: { 114 | scroll: true, 115 | links: true, 116 | forms: true 117 | }, 118 | proxy: { 119 | host: "127.0.0.1", 120 | port: 9001 121 | } 122 | } 123 | } 124 | }, 125 | "bsReload": { 126 | css: { 127 | reload: "style.css" 128 | }, 129 | all: { 130 | reload: true 131 | } 132 | }, 133 | "bsNotify": { 134 | sassStart: { 135 | notify: "Please wait, compiling sass!" 136 | } 137 | }, 138 | sass: { 139 | test: { 140 | files: { 141 | "test/fixtures/css/style.css" : "test/fixtures/sass/style.scss" 142 | } 143 | } 144 | }, 145 | karma: { 146 | unit: { 147 | configFile: 'test/karma.conf.js', 148 | singleRun: true 149 | } 150 | }, 151 | nodeunit: { 152 | tests: ['test/*_test.js'] 153 | } 154 | }); 155 | 156 | // Actually load this plugin's task(s). 157 | grunt.loadTasks('tasks'); 158 | grunt.loadNpmTasks('grunt-contrib-sass'); 159 | //grunt.loadNpmTasks('grunt-sass'); 160 | grunt.loadNpmTasks('grunt-contrib-watch'); 161 | grunt.loadNpmTasks('grunt-autoprefixer'); 162 | grunt.loadNpmTasks('grunt-contrib-connect'); 163 | grunt.loadNpmTasks('grunt-concurrent'); 164 | 165 | // Whenever the "test" task is run, first clean the "tmp" dir, then run this 166 | // plugin's task(s), then test the result. 167 | grunt.registerTask('test', ['karma', 'jasmine_node']); 168 | 169 | // By default, lint and run all tests. 170 | grunt.registerTask('default', ["browserSync"]); 171 | 172 | grunt.registerTask('dev-watch', ["browserSync:server", "watch:sass"]); 173 | grunt.registerTask('server', ["browserSync:server", "watch:sass"]); 174 | grunt.registerTask('proxy', ["browserSync:proxy", "watch:sass"]); 175 | 176 | grunt.registerTask('server-proxy', ["connect", "browserSync:proxy"]); 177 | }; 178 | -------------------------------------------------------------------------------- /readme.old.md: -------------------------------------------------------------------------------- 1 | # grunt-browser-sync [](http://badge.fury.io/js/grunt-browser-sync) 2 | 3 | > A grunt task for the [browser-sync](https://github.com/shakyShane/browser-sync) module. 4 | 5 | Follow [@browserSync](http://www.twitter.com/browserSync) for news & updates. 6 | 7 | ## Getting Started 8 | This plugin requires Grunt `~0.4.1` 9 | 10 | If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. 11 | 12 | ## About 13 | 14 | For a full list of features, please visit [https://github.com/shakyShane/browser-sync](https://github.com/shakyShane/browser-sync) 15 | 16 | 17 | ## Install 18 | 19 | ```shell 20 | npm install grunt-browser-sync --save-dev 21 | ``` 22 | 23 | Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript: 24 | 25 | ```js 26 | grunt.loadNpmTasks('grunt-browser-sync'); 27 | ``` 28 | 29 | ## Config 30 | Here's an example of the simplest configuration possible. This will give you a HTML snippet to paste into the footer of your website to enable browser-sync. 31 | 32 | ``` 33 | browserSync: { 34 | files: { 35 | src : 'assets/css/style.css' 36 | } 37 | } 38 | ``` 39 | 40 | Here's a [full list of available options.](https://github.com/shakyShane/browser-sync/wiki/options) 41 | 42 | ### Screencasts ( < 3 min each ) 43 | 44 | 45 | Browser-sync + Jekyll + Sass 46 | 47 | 1. [Browser-Sync + Jekyll + SASS Part: 1 - Example](http://quick.as/3v0sop3) 48 | 2. [Browser-Sync + Jekyll + SASS Part: 2 - Configuration](http://quick.as/5g9c1jx) 49 | 3. [Browser-Sync + Jekyll + SASS Part: 3 - Alternative Workflow](http://quick.as/ogrclvd) 50 | 51 | Browser-sync + CabinJS 52 | 53 | 1. [Browser-Sync + CabinJS](http://quick.as/qq9cnl1) 54 | 55 | 56 | Want any more? Something specific? ask me nicely [@shaneOsbourne](http://www.twitter.com/shaneOsbourne) 57 | 58 | ## Important: Using browser-sync + grunt watch 59 | If you are using both of these, scroll down to the **watchTask** option below to see how to config them to be used together! 60 | 61 | ## + static file server 62 | You can use this plugin as a server too (for static HTML, JS & CSS). When using the Server option, the snippets are automatically injected for you. 63 | 64 | ``` 65 | browserSync: { 66 | dev: { 67 | bsFiles: { 68 | src : 'assets/css/style.css' 69 | }, 70 | options: { 71 | server: { 72 | baseDir: "app" 73 | } 74 | } 75 | } 76 | }, 77 | ``` 78 | 79 | ## + your own php/mamp/wamp/rails server (proxy) (version 0.7.0 required) 80 | If you already have a local server setup (with your vhosts etc), just tell browser-sync all about it & it will do the rest for you. 81 | 82 | ``` 83 | browserSync: { 84 | dev: { 85 | bsFiles: { 86 | src : 'assets/css/style.css' 87 | }, 88 | options: { 89 | proxy: "local.dev" 90 | } 91 | } 92 | }, 93 | ``` 94 | Using the **proxy** option will give you an IP address that you can access from any device/computer on your network automagically. 95 | 96 | 97 | ## bsFiles - explained (version > 0.4.3 required) 98 | 99 | You may be wondering why browser-sync accepts a `bsFiles` property (see the examples below)… It's because browser-sync has it's own file-watching functionality built in & you can skip grunt doing file look-ups by changing the regular **files** property to **bsFiles**. (this also allows browser-sync to respond to newly added files, like grunt-contrib-watch does) 100 | 101 | ## Run 102 | 103 | `grunt browserSync` 104 | 105 | When you've used one of the configs from above, run this command from the terminal and you'll be good to go (if you are using the built-in server). If you are not using the built in server or the proxy, (because your site is on PHP or something else), just grab the HTML snippet from the command line and paste it into your site just before the closing `