BrowserSync / browser-sync

Keep multiple browsers & devices in sync when building websites. https://browsersync.io
https://discord.gg/2d2xUThp
Apache License 2.0
12.19k stars 757 forks source link

CSS Gulp task does both injection and reloading, how do i do only injection? #365

Closed lolmaus closed 9 years ago

lolmaus commented 9 years ago

Hi!

When i update my Sass code, i can see the new styles injected on the page, but the next moment the page gets fully reloaded! :(

How do i make it only inject?

Portions of my gulpfile.coffee:

# ...

browserSync  = require "browser-sync"

# ...

# Starts local server (subtask)
gulp.task "browser-sync", ->
  browserSync
    open:      argv.path
    startPath: argv.path
    ghostMode: false
    codeSync:  not argv.nolivereload
    server:
      baseDir: [
        "./"
        ".tmp"
      ]
      middleware: [
        # Matches paths ending in ".foo", but ignores the "?baz=bar.foo" part
        modRewrite ["!(?:(?:\\.\\w+\\?)|(?:^(?:(?!\\?).)*\\.\\w+$)) /index.html [L]"]
      ]

# ...
# Compiles CSS (subtask)
gulp.task "styles", ->
  gulp
    .src "./app/styles/main.sass"
    .pipe(
      sass
        #quiet: true
        bundleExec:  true
        loadPath:    "app"
        lineNumbers: true
        compass:     true
      .on "error", gutil.log
    )
    .pipe autoprefixer autoprefixer_browsers...
    .pipe gulp.dest    "./.tmp/css"
    .pipe browserSync.reload stream: true

# ...

# Wathces file changes and restarts tasks (subtask)
gulp.task 'watch', ->
  gulp.watch "app/**/*.sass",       ["styles"]
shakyShane commented 9 years ago

Check this example of filtering out all files apart from CSS http://www.browsersync.io/docs/gulp/#gulp-sass-maps

Feel free to re-open if this does not help :)

lolmaus commented 9 years ago

YES. Thank you so much!