grunt says no "sass" targets found - sass

I'm trying to set up grunt-contrib-sass so I can use grunt to handle sass-to-css compiling. I installed after scaffolding a basic grunt file with grunt init:makefile. When I ran grunt sass just to test stuff, Terminal returns a "no "sass" targets found."
My setup:
$sass -v returns "Sass 3.2.1"
$ruby -v returns "ruby 1.9.3p194"
the 'node_modules' folder contains 'grunt-contrib-sass'
based on the grunt-contrib-sass docs, my grunt.js file currently looks like this:
module.exports = function(grunt) {
grunt.initConfig({
lint: {
files: ['grunt.js', 'lib/**/*.js', 'test/**/*.js']
},
test: {
files: ['test/**/*.js']
},
watch: {
files: '<config:lint.files>',
tasks: 'lint test'
},
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true
},
globals: {},
sass: { // Task
dist: { // Target
files: { // Dictionary of files
'main.css': 'main.scss', // 'destination': 'source'
'widgets.css': 'widgets.scss'
}
},
dev: { // Another target
options: { // Target options
style: 'expanded'
},
files: {
'main.css': 'main.scss',
'widgets.css': [
'button.scss',
'tab.scss',
'debug.scss'
]
}
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('default', 'lint sass');
};
Any and all help is appreciated...thanks much!

Double check your closing curly braces. Your sass block is within your jshint block. Try this:
module.exports = function(grunt) {
grunt.initConfig({
lint: {
files: ['grunt.js', 'lib/**/*.js', 'test/**/*.js']
},
test: {
files: ['test/**/*.js']
},
watch: {
files: '<config:lint.files>',
tasks: 'lint test'
},
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true
},
globals: {},
},
sass: { // Task
dist: { // Target
files: { // Dictionary of files
'main.css': 'main.scss', // 'destination': 'source'
'widgets.css': 'widgets.scss'
}
},
dev: { // Another target
options: { // Target options
style: 'expanded'
},
files: {
'main.css': 'main.scss',
'widgets.css': [
'button.scss',
'tab.scss',
'debug.scss'
]
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('default', 'lint sass');
};

Related

Why doesn't work this sass task in my gruntfile.js?

This task doesn't do anything:
sass: {
options: {
style: 'expanded',
sourceMap: true,
importer: compass
//includePaths: sassLib
},
dist: {
files: [{
expand: true,
cwd: 'scss',
src: ['globbed/style.scss'],
dest: 'css',
ext: '.style.css'
}]
}
},
But this is working, it compiles the style.scss to style.css:
sass: {
dist: {
files: {
'css/style.css': 'scss/globbed/style.scss',
}
}
}
What should I modify in the first task?
Try to move the options object into the dist one. Alternatively, since you are using Compass, you could try to use the grunt-contrib-compass module for an easier approach. In your case the code could be:
// ...
compass: {
compile: {
options: {
sassDir: "scss",
cssDir: "css",
relativeAssets: true,
outputStyle: "expanded"
}
}
},
// ...

Sass style options ignored in Gruntfile

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!

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

Grunt not executing sass command

My watch command executes all my tasks except for sass. When I execute grunt sass, I receive the following message error:
Warning:
You need to have ruby and sass installed and in your path for this task to work.
I don't know why this message is showed because I can generate my .css file from the .scss through the Ruby console (sass --watch styles/scss/general.scss:styles/css/general.css), so I have both Ruby and sass installed.
My Gruntfile.js is the following:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'js/libs/*.js', // All JS in the libs folder
],
dest: 'js/build/production.js',
}
},
uglify: {
build: {
src: 'js/build/production.js',
dest: 'js/build/production.min.js'
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'images/',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/optimized/'
}]
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'styles/css/general.css': 'styles/scss/general.scss'
}
}
},
watch: {
scripts: {
files: ['**/*.{png,jpg,gif}', 'js/libs/*.js'],
tasks: ['imagemin', 'concat', 'uglify'],
options: {
spawn: false,
}
},
sass: {
files: ['css/*.scss'],
tasks: ['sass']
}
}
});
// 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');
grunt.loadNpmTasks('grunt-contrib-compass');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat', 'uglify', 'imagemin', 'watch', 'sass']);
};
My OS is Windows7. Any idea?
Try
var config = {
app: 'app',
dist: 'dist'
};
grunt.initConfig({
sass: {
dist: {
options: {
style: 'compressed'
},
files: [{
cwd: 'styles/scss/',
src: '*.scss',
dest: 'styles/css/',
ext: '.css'
}],
},
watch: {
sass: {
files: ['styles/scss/{,*/}*.scss'],
tasks: ['sass'],
options: {
livereload: true
}
}
}
};
and would be better to place all the grunt.loadNpmTasks at the top before the grunt.initConfig

Resources