Sass style options ignored in Gruntfile - sass

I have the following gruntfile, that compiles fine, however it appears to be ignore the style option and only use the default 'nested' style. I've tried compressed, expanded and compact and they all come out exactly the same.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'css/style.css' : 'scss/main.scss'
},
options: {
sourceMap: true,
style: 'expanded'
}
}
},
sass_globbing: {
your_target: {
files: {
'scss/_base.scss': 'scss/base/**/*.scss',
'scss/_layout.scss': 'scss/layout/**/*.scss',
'scss/_components.scss': 'scss/components/**/*.scss',
'scss/_theme.scss': 'scss/theme/**/*.scss'
},
options: {
useSingleQuoates: false
}
}
},
autoprefixer: {
dist: {
options : {
browsers: ['last 2 version','ie 8','ie 9','android 4']
},
files: {
'css/style.css' : 'css/style.css'
}
}
},
watch: {
options: {
livereload: true
},
css: {
files: '**/*.scss',
tasks: ['sass_globbing','sass','autoprefixer']
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass-globbing');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.registerTask('default',['watch']);
}
I'm using:
grunt-cli v1.2.0
grunt v0.4.5
I've tried adding changes to the scss files, deleting the stylesheet, generating a totally new file with a different name, running grunt sass --force and it still generates the same file (and it is generating the file). I've also tried overriding the style in grunt with grunt sass --style compact --force, and still no joy.
What am I doing wrong?

According to the documentation at https://github.com/sindresorhus/grunt-sass#usage, the options key goes one level higher (Move it out of dist):
grunt.initConfig({
sass: {
options: {
sourceMap: true,
style: 'compressed'
},
dist: {
...
}
}
}
Hope this helps!

Related

Grunt Watch: Need to Save Twice After Every SASS Error

When using grunt-watch while editing my SASS files, if I get a SASS error, I have to save twice after correcting the error for it to be resolved. Here's the sequence of events:
I include a mixin that doesn't exist in my SASS file and save
grunt-watch throws a SASS error
I fix the error and save
grunt-watch throws the same error
I save again
grunt-watch compiles correctly
Here's my Gruntfile.js:
module.exports = function(grunt) {
// Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'assets/img',
src: ['assets/img/**/*.{png,jpg,gif}'],
dest: 'assets/img'
}]
}
},
sass: {
dist: {
options: {
loadPath: require('node-neat').includePaths,
style: 'compact',
lineNumbers: true,
cacheLocation: 'assets/sass/.sass-cache'
},
files: [{
expand: true,
cwd: 'assets/sass',
src: ['*.scss'],
dest: 'assets/css',
ext: '.css'
}]
}
},
watch: {
options: {
livereload: true
},
css: {
files: ['assets/sass/**/*.scss'],
tasks: ['newer:sass'],
options: {
spawn: false
}
},
images: {
files: ['assets/img/**/*.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
spawn: false
}
},
js: {
files: ['assets/js/**/*.js'],
options: {
spawn: false
}
},
html: {
files: ['*.html'],
options: {
spawn: false
}
},
php: {
files:['**/*.php'],
options: {
spawn: false
}
}
}
});
// List plugins we're using
grunt.loadNpmTasks('grunt-contrib-watch'); // Watch - http://goo.gl/yxNE0
grunt.loadNpmTasks('grunt-contrib-imagemin'); // Image Minify - http://goo.gl/mkIRPE
grunt.loadNpmTasks('grunt-contrib-sass'); // SASS - http://goo.gl/pCHySn
grunt.loadNpmTasks('grunt-newer'); // Newer - https://goo.gl/3vBTnf
// Plugins to run when we run the 'grunt' command
grunt.registerTask('default', [
'imagemin',
'sass'
]);
};
Turns out that mysterious spawn option in Watch actually needs to be set to true for this particular instance. Like most people, I really have no idea how spawn works, but it fixes the issue.
watch: {
css: {
files: ['assets/sass/**/*.scss'],
tasks: ['newer:sass'],
options: {
spawn: true
}
}
}
You don't have to explicitly set the option to true, it's set by default so you can just not add it at all. I'm just including it here as an example.

Grunt Watch not running Compass as secondary task

I am trying to include a call to grunt-contrib-compass in my watch task, but it's not registering any saved changes to my .scss files. grunt compass works fine, and grunt watch records all other changes to *.php as expected. What's a guy doing wrong here?
gruntfile.js:
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.initConfig({
compass: {
dev: {
options: {
config: 'config.rb'
} //options
} //dev
}, //compass
watch: {
options: { livereload: true },
scripts: {
files: ['/scripts/*.js'],
}, //scripts
sass: {
files: ['/_sass/*.scss'],
tasks: ['compass:dev']
}, //sass
html: {
files: ['*.php']
} //html
} //watch
}) //initConfig
grunt.registerTask('default', 'watch');
} //exports
And just for kicks, my config.rb:
css_dir = '/css'
sass_dir = '/_sass'
output_style = :nested
Your leading '/' in all your paths are throwing you off, remove them (both from gruntfile and config.rb):
watch: {
options: { livereload: true },
scripts: {
files: ['scripts/*.js'],
}, //scripts
sass: {
files: ['_sass/*.scss'],
tasks: ['compass:dev']
}, //sass
html: {
files: ['*.php']
} //html
} //watch

grunt sass sourcemaps sass wrong path?

I have a grunt project set up but I'm missing the sourcemap for sass. The style.css.map looks like this:
{
"version": 3,
"file": "style.css",
"sources": [
"../style.scss",
"../_general.scss",
"../_align.scss",
"../_cf.scss",
"../_fixed-fluid.scss"
],
"sourcesContent": [],
"mappings": "ACAA;EACI,AAAQ;EACR,AAAS;;AAGb;EACI,AAAY;;AAGhB;EACI,AAAe;;AAGnB;EACI,AAAU;EACd,AAAe;IACP,AAAS;IACT,AAAS;IACT,AAAQ;IACR,AAAY;IACZ,AAAU;IACV,AAAM;IACN,AAAO;IACP,AAAQ;;AAIhB;EACI,AAAS;;AC3Bb;EACE,AAAU;EACV,AAAQ;EACR,AAAY;;AAGd;EACE,AAAU;EACV,AAAK;EACL,AAAM;EACN,AAAW;;AAIb;EACI,AAAS;EACT,AAAO;EACP,AAAY;;AAGhB;EACI,AAAS;EACT,AAAY;EACZ,AAAgB;EAChB,AAAQ;;AAIZ;EACI,AAAY;EACZ,AAAQ;EACR,AAAW;EACf,AAAgB;IACR,AAAS;IACT,AAAS;IACT,AAAQ;IACR,AAAgB;;AAIxB;EACI,AAAS;EACT,AAAgB;;AC3CpB,AAAG;EACC,AAAS;EACT,AAAS;;ACFb;EACI,AAAO;EACP,AAAO;EACP,AAAY;;AAGhB;EACI,AAAO;EACP,AAAO;;AAIX;EACI,AAAO;EACP,AAAY;EACZ,AAAO;EACP,AAAc",
"names": []
}
The 'sources' path is incorrect. It should be "../sass/style.scss" instead of "../style.scss"
Grunt project file:
module.exports = function(grunt) {
require('jit-grunt')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {
port: 9000,
livereload: true,
keepalive: true,
open: true,
hostname: 'localhost'
}
}
},
sass: {
options: {
sourceMap: true,
sourceMapEmbed: true
},
dist: {
files: {
'dist/style.css': 'assets/sass/style.scss'
},
outputStyle: 'expanded'
}
},
autoprefixer: {
single_file: {
src: 'dist/style.css'
}
},
watch: {
options: {
spawn: false,
livereload: true,
},
sass: {
files: ['assets/sass/*.scss'],
tasks: ['sass', 'autoprefixer']
},
html: {
files: ['index.html', 'views/*.html'],
},
js: {
files: ['assets/js/*.js']
}
},
});
};
Anyone know how to configure this sourcemap path correctly in my gruntfile? Thank you!
Source maps have been f***ed in grunt-sass for a while, since version v.18.0 (node-sass v2) I think. I am patiently waiting for the downstream changes from libsass > node-sass to make their way to grunt-sass soon. Node-sass v3 should fix these issues.
I suggest reverting back to version v0.17.0 of grunt-sass so source maps work again

Getting started with Grunt and sass (partials)

I am just getting started with Grunt and am a bit confused about how to configure my gruntfile.js to recognize changes to sass partial files. I've followed the article on 24ways.org by Chris Coyier and feel pretty comfortable with the basics. When running grunt watch, I can make changes to my style.scss file and grunt will watch and compile changes. However, I typically use style.scss as a long list of #imports:
#import 'partials/partialfilename';
When I make a change to any of my partials grunt does not notice anything has changed and thus nothing is compiled.
Within my project directory I have a sass directory that includes a style.scss file and a partials directory with lots of partials.
here is my grunt file:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'js/custom.js',
'js/foundation.js',
'js/jquery.listnav.js',
'js/jquery.ioslider.min.js'
],
dest: 'js/build-scripts.js',
}
},
uglify: {
build: {
src: 'js/build-scripts.js',
dest: 'js/build-scripts-min.js'
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'images/',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/'
}]
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'style.css': 'sass/style.scss'
}
}
},
watch: {
options: {
livereload: true,
},
scripts: {
files: ['js/*.js'],
tasks: ['concat', 'uglify'],
options: {
spawn: false,
}
},
css: {
files: ['sass/**/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
},
images: {
files: ['images/**/*.{png,jpg,gif}', 'images/*.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
spawn: false,
}
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['watch', 'concat', 'uglify', 'imagemin', 'sass']);
};
I have tried a few different options for the watch css arguments such as:
css: {
files: ['sass/**/*.scss'],
tasks: ['sass'],
options: {
spawn: false
}
}
and
css: {
files: ['sass/*.scss'],
tasks: ['sass'],
options: {
spawn: false
}
}
I realize that I may be 'missing the point' here, I have read a bit about the grunt sass plugin 'ignoring' (_) underscores or partials because of the sass globbing rule (?) and through my research I have noticed that most people are using compass in their projects which I am not.
So, again my question is: How can I configure grunt to watch and compile changes to my sass partials and compile my css correctly?
I have found a solution.
css: {
files: ['sass/*.scss'],
files: ['sass/partials/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
}

grunt contrib-sass sourcemap enable

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. "user#server.com"
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
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
I was able to get this to work using the following:
* one note: the map file doesn't get tracked anywhere so I didn't realize it was rewriting it until I deleted a version of the map and then I noticed that it was writing the file.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style: 'expanded',
debugInfo: true,
sourcemap: true
},
files: {
'styles/styles.css' : 'styles/sass/styles.scss'
}
},
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass'],
sourceComments: 'normal'
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
Just to provide this as an actual answer, sourcemaps aren't available in sass stable yet. They're being worked on in an alpha release. The original question referenced a commit message that noted the code was being future-proofed.
As of 6/24/2013, sourcemaps aren't available in grunt-contrib-sass or grunt-contrib-compass.
It's easy right now, SASS version 3.4.5 works with source maps very well and has some more options to set it up:
$ sass -h
Usage: sass [options] [INPUT] [OUTPUT]
Description:
Converts SCSS or Sass files to CSS.
[...]
Input and Output:
--scss Use the CSS-superset SCSS syntax.
--sourcemap=TYPE How to link generated output to the source files.
auto (default): relative paths where possible,
file URIs elsewhere
file: always absolute file URIs
inline: include the source text in the sourcemap
none: no sourcemaps
[...]
So you can configure your Gruntfile.js e.g. like this:
[...]
sass : {
dist : {
files : {
'example.css' : 'example.scss'
},
options: {
sourcemap: 'auto'
}
}
}
[...]
Now if you run grunt sass task source maps are generated automatically.

Resources