grunt-sass

grunt-jekyll-sass.js

// npm install --save-dev grunt grunt-sass grunt-autoprefixer grunt-contrib-watch load-grunt-tasks grunt-shell grunt-contrib-connect grunt-contrib-cssmin

module.exports = function(grunt){

  require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

  grunt.initConfig({

    shell : {
      jekyllBuild : {
        command : 'jekyll build'
      },
      jekyllServe : {
        command : 'jekyll serve'
      }
    },

    connect: {
      server: {
        options: {
          port: 4000,
          base: 'dist'
        }
      }
    },

    sass: {

      dev: {
        options: { outputStyle: 'expanded', sourceMap: true },
        files: { 'source/css/main.css': 'source/_sass/main.sass' }
      }

    },

    autoprefixer: {
      options: {
        map: true, // Use and update the sourcemap
        browsers: ["last 5 versions", "> 1%", "Explorer 9"]
      },
      single_file: {
        src:  'source/css/main.css',
        dest: 'source/css/main.css'
      }
    },

    watch: {
        options: {
          livereload: true,
        },

        sass: {
          files: ['source/_sass/**/*.sass'],
          tasks: ['sass', 'autoprefixer']
        },

        // concat source/css to dist/main.css
        jekyll: {
          files: [
            'source/*/*.html',
            'source/*/*.markdown',
            'source/*/*.md',
            'source/css/*.css',
            'source/js/*.js'
          ],
          tasks: [ 'shell:jekyllBuild' ]
        }
    }

  });

  grunt.registerTask('default', ['sass:dev', 'autoprefixer', 'shell:jekyllBuild', 'connect', 'watch']);
}

Gruntfile.js

// npm install --save-dev grunt grunt-sass grunt-autoprefixer grunt-contrib-watch load-grunt-tasks

module.exports = function(grunt){

  require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

  grunt.initConfig({

    sass: {

      dev: {
        options: { outputStyle: 'expanded', sourceMap: true },
        files: [
          {'src/style.css': 'src/sass/style.sass'}, // compile a single file
           // { // compile a directory (http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically)
           //   expand: true,
           //   cwd: 'src/sass/',
           //   src: [ '**/*.sass', '!**/_*.sass' ], // ignore sass partials
           //   dest: 'src/css/',
           //   ext: '.css'
           // }
        ]
      },

    },

    autoprefixer: {
      options: {
        map: true, // Use and update the sourcemap
        browsers: ["last 3 versions", "> 1%", "Explorer 9"]
      },
      single_file: {
        src: 'style.css',
        dest: 'style.css'
      }
    },

    watch: {
      options: {
        livereload: true,
      },

      css: {
        files: ['style.css']
      },
      
      sass: {
        // setting livereload:false here allows us to
        // reload files without a full page refresh
        // http://stackoverflow.com/questions/19005847/how-can-i-get-grunt-watch-livereload-to-reload-sass-css-without-a-full-page-refr
        options: {
          livereload: false
        },
        files: ['*.sass'],
        tasks: ['sass', 'autoprefixer', 'concat']
      }
    }

  });

  grunt.registerTask('default', ['sass:dev', 'autoprefixer', 'watch']);
}

with help from Switching Ghost From Ruby Sass to Libsass

powered by grunt-sass