Browsersync change CSS changes lost if I change pages until I refresh. #121
Description
I have got Browsersync working well. The CSS changes are injecting, however if I click on a link and go to a new page on my site all those CSS changes that were injected seem to be lost. If I refresh, those changes immediately come back. Is this expected behaviour? If not is my grunt configuration incorrect?
I'm using this in conjunction with Drupal and the link_css module to change css @import tags to <link> tags as browsersync will not work with @import tags. See #117 for more info on this issue.
// Browsersync requires <link> tags for CSS. By default Drupal uses @import tags for CSS which
// doesn't work with Browsersync. Installing the link_css module will convert @import tags to <link> tags and get it working for yo
module.exports = function(grunt) {
// Init config.
grunt.initConfig({
// Register package.
pkg: grunt.file.readJSON('package.json'),
// Watch.
watch: {
sass: {
files: ['assets/sass/**/*.scss'],
tasks: ['sass_globbing', 'sass:production']
},
css: {
files: ['assets/css/**/*.css']
}
},
// Globbing.s
sass_globbing: {
import_maps: {
files: {
'assets/sass/imports/_components.scss': 'assets/sass/components/**/*.scss',
'assets/sass/imports/_mixins.scss': 'assets/sass/abstractions/mixins/**/*.scss',
'assets/sass/imports/_placeholders.scss': 'assets/sass/abstractions/placeholders/**/*.scss',
'assets/sass/imports/_base.scss': 'assets/sass/base/**/*.scss'
}
}
},
// Sass.
sass: {
options: {
includePaths: [
'bower_components/susy/sass',
'bower_components/sassy-maps/sass',
'bower_components/compass-mixins/lib',
'bower_components/sass-toolkit/stylesheets',
'bower_components/normalize-scss',
'bower_components/compass-breakpoint/stylesheets',
'bower_components/type-heading/stylesheets'
]
},
production: {
sourceMap: true,
outputStyle: 'extended',
files: {
'assets/css/dg-base-theme.styles.css': 'assets/sass/dg-base-theme.styles.scss',
'assets/css/dg-base-theme.print.styles.css': 'assets/sass/dg-base-theme.print.styles.scss',
'assets/css/dg-base-theme.hacks.css': 'assets/sass/dg-base-theme.hacks.scss',
'assets/css/dg-base-theme.dg-base-theme.normalize.css': 'assets/sass/dg-base-theme.dg-base-theme.normalize.scss',
'assets/css/dg-base-theme.no-query.css': 'assets/sass/dg-base-theme.no-query.scss',
'assets/css/layouts/dg_base_theme/dg-base-theme.layout.css': 'assets/sass/layouts/dg_base_theme/dg-base-theme.layout.scss',
}
}
},
// Bowercopy
bowercopy: {
options: {
destPrefix: 'libraries'
},
glob: {
files: {
'html5shiv': 'html5shiv/*.js',
'respond': 'respond/*.js',
'selectivizr': 'selectivizr/*.js',
'matchmedia': 'matchmedia/*.js',
'pie': 'pie/*.js',
'colorbox': 'colorbox/*.js',
'cycle2': 'jquery-cycle2/build/**/*.js',
'fitvids': 'fitvids/*.js'
}
}
},
// Notify.
notify: {
css: {
options: {
title: 'CSS:',
message: 'CSS has changed.'
}
}
},
//browserSync
browserSync: {
dev: {
bsFiles: {
src : 'assets/css/*.css'
},
options: {
proxy: "dgcms.dev", // update this to your url
watchTask: true
}
}
}
});
// Load modules.
grunt.loadNpmTasks('grunt-notify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-sass-globbing');
grunt.loadNpmTasks('grunt-bowercopy');
grunt.loadNpmTasks('grunt-browser-sync');
// Register tasks.
//grunt.registerTask('default', ['bs-init', 'watch']);
grunt.registerTask('default', ['browserSync', 'watch']);
};