Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
app branding: rename BrowserSync to Browsersync May 26, 2015
Gruntfile.js Apply prettier Apr 10, 2017
desc.md branding: rename BrowserSync to Browsersync May 26, 2015
package.json Update Grunt/sass/autprefixer example Mar 23, 2015
readme.md branding: rename BrowserSync to Browsersync May 26, 2015

readme.md

#Browsersync - Grunt, SASS & Autoprefixer

Installation/Usage:

To try this example, follow these 4 simple steps.

Step 1: Clone this entire repo

$ git clone https://github.com/Browsersync/recipes.git bs-recipes

Step 2: Move into the directory containing this example

$ cd bs-recipes/recipes/grunt.sass.autoprefixer

Step 3: Install dependencies

$ npm install

Step 4: Run the example

$ npm start

Additional Info:

This example shows how you can chain potentially slow-running tasks, but still achieve CSS Injection. The trick, as seen below, is to use the bsReload task that now comes bundled with grunt-browser-sync since 2.1.0

Don't forget the spawn: false option for the watch task - it's a requirement that allows Browsersync to work correctly

watch: {
    options: {
        spawn: false // Important, don't remove this!
    },
    files: 'app/**/*.scss',
    tasks: ['sass', 'autoprefixer', 'bsReload:css']
},

Preview of Gruntfile.js:

module.exports = function (grunt) {
    grunt.initConfig({
        dirs: {
            css:  "app/css",
            scss: "app/scss"
        },
        watch: {
            options: {
                spawn: false
            },
            sass: {
                files: '<%= dirs.scss %>/**/*.scss',
                tasks: ['sass', 'autoprefixer', 'bsReload:css']
            },
            html: {
                files: 'app/*.html',
                tasks: ['bsReload:all']
            }
        },
        sass: {
            dev: {
                files: {
                    '<%= dirs.css %>/main.css': '<%= dirs.scss %>/main.scss'
                }
            }
        },
        autoprefixer: {
            options: {
                browsers: ['last 5 versions', 'ie 8']
            },
            css: {
                src: '<%= dirs.css %>/main.css',
                dest: '<%= dirs.css %>/main.css'
            }
        },
        browserSync: {
            dev: {
                options: {
                    server: "./app",
                    background: true
                }
            }
        },
        bsReload: {
            css: {
                reload: "main.css"
            },
            all: {
                reload: true
            }
        }
    });

    // load npm tasks
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-autoprefixer');
    grunt.loadNpmTasks('grunt-browser-sync');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // define default task
    grunt.registerTask('default', ['browserSync', 'watch']);
};