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!
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.