Search code examples
csssassgruntjszurb-foundation-5libsass

When using Libsass/Grunt is there a way to watch files on the fly?


I have installed Foundation 5 using

>gem install foundation  

And then creating a new project using the command

>foundation scratch --libsass 

The main reason being is that I'm on Windows and I really don't need/want to be using compass. I know that after I make changes to my sass files that I can run

>grunt build 

In order to update my css files from the changes I made to my .scss files. And Everything works fine.

Question: Is there a way that I can watch these .scss files so that I don't have to run that command every time I save my files. Kind of like I use to do with >compass watch? There is a dev dependency in package.json called grunt-contrib-watch is that it? If so, How do I use it?

Here is the Gruntfile I have once the install was finished:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
      options: {
        includePaths: ['bower_components/foundation/scss']
      },
      dist: {
        options: {
          outputStyle: 'compressed',
          sourceMap: true,
        },
        files: {
          'css/app.css': 'scss/app.scss'
        }
      }
    },

    watch: {
      grunt: {
        options: {
          reload: true
        },
        files: ['Gruntfile.js']
      },

      sass: {
        files: 'scss/**/*.scss',
        tasks: ['sass']
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('build', ['sass']);
  grunt.registerTask('default', ['build','watch']);
}

Thanks in advance if anyone can help!


Solution

  • Ok, so I did some sleuthing and looked into the grunt file and even though I'm not that great with grunt I saw this:

    watch: {
        grunt: {
            options: {
                reload: true
            },
            files: ['Gruntfile.js']
        },
    
        sass: {
            files: 'scss/**/*.scss',
            tasks: ['sass']
        }
    }
    

    With this I assumed that I could just run:

    >grunt watch
    

    I know, I might not be the brightest tool in the shed, but I'm new and didn't realize that when I installed Foundation this way that it also installed this grunt-contrib-watch dependency. Sorry if this question is too obvious maybe it will help someone though because it was hard for me to find the answer even though it was in the package.json that I'm not use to using.