grunt contrib-sass sourcemap enable

aegyed picture aegyed · Jun 24, 2013 · Viewed 9.5k times · Source

I can't get a lot of contrib-sass features to work in grunt. I dived into grunt a day ago and I found it really good.

Link to contrib-sass repo which says sourcemaps should be working: https://github.com/gruntjs/grunt-contrib-sass/commit/e85ee70ccb8839867172b57ca1378293291f8037

note: I have sass bleeding edge, and this feature works fine if I use: sass --watch --scss --sourcemap --no-cache with google chrome canary sourcemaps and Sass stylesheet debugging

here is my Gruntfile.js:

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd hh:mm:ss") %> */\n',

    concat: {
      options: {
        separator: '\n// New file\n',
        banner: '<%= banner %>'
      },
      develop: {
        files: [
          { src: ['js/develop/plugins.js', 'js/develop/main.js'], dest: 'js/concDev.js' }
        ]
      },
      vendor: {
        files: [
          { src: ['js/vendor/*.js', '!js/vendor/jquery-1.9.1.min.js', '!js/vendor/modernizr-2.6.2.min.js'], dest: 'js/concVend.js' }
        ]
      }
    },

    uglify: {
      options: {
        banner: '<%= banner %>'
      },
      develop: {
        files: [
          { src: ['<%= concat.develop.files[0].dest %>'], dest: 'js/concDev.min.js' }
        ]
      },
      vendor: {
        files: [
          { src: ['<%= concat.vendor.files[0].dest %>'], dest: 'js/concVend.min.js' }
        ]
      }
    },

    removelogging: {
      dist: {
        files: [
          { src: ['js/concDev.min.js'], dest: 'js/concDev.min.js' },
          { src: ['js/concVend.min.js'], dest: 'js/concVend.min.js' },
          { src: ['js/concDev.js'], dest: 'js/concDev.js' },
          { src: ['js/concVend.js'], dest: 'js/concVend.js' }
        ]
      }
    },

    jshint: {
      files: ['gruntfile.js', 'js/develop/*.js'],
      options: {
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }
    },

    cssmin: {
      compress: {
        options: {
          banner: '<%= banner %>'
        },
        files: [
          { src: ['css/main.css'], dest: 'css/main.min.css' }
        ]
      }
    },

    imagemin: {
      dynamic_mappings: {
        files: [
          {
            expand: true,
            cwd: 'img/',
            src: ['**/*.png', '**/*.jpg'],
            dest: 'img/',
            ext: '.png'
          }
        ]
      }
    },

    sass: {
      compressed: {
        files: {
          'css/main.css': 'css/develop/main.scss'
        },
        options: {
          outputStyle: 'compressed'
        }
      },

      nested: {
        files: {
          'css/main.css': 'css/develop/main.scss'
        },
        options: {
          sourcemap: true,
          outputStyle: 'nested'
        }
      }
    },

    rsync: {
      deploy: {
        src: "./",
        dest: '<%= connection.dest %>', // i.e. "var/www"
        host: '<%= connection.host %>', // i.e. "[email protected]"
        recursive: true,
        syncDest: false,
        exclude: ["/node_modules", ".*"]
      }
    },

    watch: {
      options: {
        livereload: true
      },
      html: {
        files: '*.html'
      },
      js: {
        files: ['js/develop/plugins.js', 'js/develop/main.js'],
        tasks: ['jshint', 'concat:develop']
      },
      css: {
        files: 'css/develop/main.scss',
        tasks: ['sass:nested']
      }
    }

  });

  // Load Plugins
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks("grunt-remove-logging");
  grunt.loadNpmTasks('grunt-sass');

  grunt.loadNpmTasks('grunt-rsync');


  // Task Lists
  grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'imagemin', 'sass:nested']);

  grunt.registerTask('server', ['watch']);
  grunt.registerTask('deploy', ['sass:compressed', 'rsync' ]);
};

Btw, as I said im totally new with grunt, if you find other bad practise in my code please let me know. Also great plugin names for ftront-end work always welcome, I saw there are many, only faminilar with a few contrib ones yet.

Note: Somewhy, a lot of sass options doen't work, for example: noCache, lineNumbers, debugInfo, outputStyle:'compact','expanded' (compressed, nested works oO)

~ ae

Answer

Lukasz.Zdanikowski picture Lukasz.Zdanikowski · Jul 10, 2013

As of today (07/10/2013):

If you install pre version of sass

gem install sass --pre

and grunt-contrib-sass package, your config file will allow to generate sourcemaps.

If you use compass try using compass: true option in sass task config block or loadPath