Reputation: 475
I have a grunt file as shown below. The problem I am having is when I change the contents of a .scss file, grunt watch sass does not trigger a refresh. Is there something obvious that I am doing wrong?
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
build : {
dest: '_site'
},
sass: {
dist: {
options: {
style: 'compressed',
trace: true
},
files: {
'css/main.css': '_scss/main.scss',
'css/ie8.css': '_scss/ie8.scss',
'css/ie9.css': '_scss/ie9.scss'
}
}
},
shell: {
jekyllBuild: {
command: 'jekyll build'
},
jekyllServe: {
command: 'jekyll serve'
}
},
watch: {
files: ['_layouts/*.html', '*.md', '*.yml'],
// SASS watch does not work :(
sass: {
files: ['_scss/**/*.scss'],
tasks: ['sass:dist'] // This should be sass'
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-shell');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-jekyll');
// Compiles SASS, Builds Jekyll, and Serves Jekyll.
grunt.registerTask('default', ['sass:dist', 'shell:jekyllBuild', 'shell:jekyllServe']);
}
Also when I change a .scss file, the terminal indicates that a file has been changed but grunt watch sass does not run.
Regenerating: 1 file(s) changed at 2015-08-05 13:14:50 ...done in 0.017384 seconds.
EDIT:
I figured it out. What I was attempting to do was use grunt to watch my sass files and re-compile when changes were made. I also wanted jekyll to serve & watch the html files for changes. These things cannot be ran concurrently which was what I was attempting to do. I did happen to find a helper called 'load-grunt-tasks' which allows for concurrent tasks to be ran by adding the following code to the gruntfile:
concurrent: {
serve: [
'sass',
'watch',
'shell:jekyllServe'
],
options: {
logConcurrentOutput: true
}
},
// Then register the following tasks
// Register the grunt serve task
grunt.registerTask('serve', ['concurrent:serve']);
// Then run the following from the terminal:
grunt serve
Upvotes: 1
Views: 1146
Reputation: 616
Is there a reason that you're using Grunt for this? Jekyll comes with a perfectly fine Sass watcher, and if you want to carry out any further pre/post-processing tasks you can do so using Jekyll's plugin system.
You can place your .scss
/.sass
files in _sass
, and call them from a .scss
/.sass
file located anywhere else that starts with some YAML frontmatter.
A common structure would be something like this:
- _scss/
- normalize.scss
- typography.scss
- [whatever].scss
- assets/
- main.scss
With assets/main.scss
containing the following:
---
# You just need these --- lines to tell Jekyll to parse this file.
---
@import "normalize";
@import "typography";
@import [...]
// Other styles too
body {
background-color: #f00;
color: {{ site.branding.color }}; // Can even use Jekyll variables
}
As far as plugins go, I'm using octopress-autoprefixer to automatically prefix CSS3 properties. The process for using this plugin is as follows:
gem install octopress-autoprefixer
Add this to your _config.yml
:
gems:
- octopress-autoprefixer
Now when you make any changes to your Sass, after the CSS files are generated in _site/
, autoprefixer will do it's magic to them.
Upvotes: 0
Reputation: 4675
At first some general troubleshooting:
npm install
npm update
watch
task. This may produce some errors.watch: {
files: ['_layouts/*.html', '*.md', '*.yml'],
// SASS watch does not work :(
sass: {
files: ['_scss/**/*.scss'],
tasks: ['sass:dist']
}
}
This looks kinda broken to me. What is watch
supposed to do with files: [...]
? There is no task to be executed while watching over these files. You don't have any grunt tasks
which would modify .html
, .md
or .yml
files, so why do you even list them?
Apart from that, it looks fine to me.
Upvotes: 1