We Keep Coding

Task not found error while using Grunt task runner

I am on a Windows machine and I believe I have installed everything I need to run the grunt task:
grunt sass
I have already executed the following commands in my terminal:
npm install grunt-sass --save-dev
npm install time-grunt --save-dev
npm install jit-grunt --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-browser-sync --save-dev
I am getting the following error:
Warning: Task "sass" not found. Use --force to continue.
Aborted due to warnings.
I have tried every possible solution from other similar posts but to no avail. My Gruntfile.js is as follows:
"use strict";
module.exports = function (grunt) {
require("time-grunt")(grunt);
require("jit-grunt");
grunt.initConfig({
sass: {
dist: {
files: {
"css/styles.css": "css/styles.scss"
}
}
},
watch: {
files: "css/*.scss",
tasks: ["sass"]
},
browserSync: {
dev: {
bsFiles: {
src: [
"css/*.css",
"*.html",
"js/*.js"
]
},
options: {
watchTask: true,
server: {
baseDir: "./"
}
}
}
}
});
grunt.registerTask("css", ["sass"]);
grunt.registerTask("default", ["browserSync", "watch"]);
};

I have managed to find the solution. Make the following changes to the file:
"use strict";
module.exports = function (grunt) {
const sass = require('node-sass'); // add this line
require("time-grunt")(grunt);
require("jit-grunt")(grunt);
grunt.initConfig({
sass: {
dist: {
files: {
"css/styles.css": "css/styles.scss"
}
}
},
watch: {
files: "css/*.scss",
tasks: ["sass"]
},
browserSync: {
dev: {
bsFiles: {
src: [
"css/*.css",
"*.html",
"js/*.js"
]
},
options: {
implementation: sass, //add this line
sourceMap: true, //add this line
watchTask: true,
server: {
baseDir: "./"
}
}
}
}
});
grunt.registerTask("css", ["sass"]);
grunt.registerTask("default", ["browserSync", "watch"]);
};

Grunt not defined

I am new to Grunt and have been struggling all day to make this work:
This is my Gulpfile.js:
'use strict';
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Automatically load required Grunt tasks
require('jit-grunt')(grunt);
module.exports = function(grunt) {
// Define the configuration for all the tasks
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: {
src: [
'Gruntfile.js',
'app/scripts/{,*/}*.js'
]
}
}
});
grunt.registerTask('build', [
'jshint'
]);
grunt.registerTask('default', ['build']);
};
This my package.json:
{
"name": "conFusion",
"private": true,
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-jshint": "^1.0.0",
"jit-grunt": "^0.10.0",
"jshint-stylish": "^2.2.1",
"time-grunt": "^1.4.0"
},
"engines": {
"node": ">=0.10.0"
}
}
And this is the error message i get:
grunt build
Loading "Gruntfile.js"
tasks...ERROR >>
ReferenceError: grunt is not defined
Warning: Task "build" not found.Use--force to continue.
Aborted due to warnings.
Pls guys, I need help. I am working on windows 10, so am using the command line there.

module.exports = function(grunt) {
That is where you define a grunt variable. It is an argument to the function you created.
But you try to use it here:
require('time-grunt')(grunt);
and here:
require('jit-grunt')(grunt);
This is outside the function where the variable does not exist.
Move those lines inside the function.

NPM failed to convert SASS

I am trying to convert my style.scss (which has some other files link to it such as _variable.scss, _mixins.scss) file to css via grunt.js and npm. however I got this error:
Error: File to import not found or unreadable: compass.
on line 5 of sass/style.scss
1: // typorgraphy
2: #import "base/typography";
3:
4: // compass
5: #import "compass";
6:
7: // import files
8: #import "base/import";
9:
10: // mixins
Here's my gruntfile.js:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
dist: {
options: {
sassDir: 'sass',
cssDir: 'css',
environment: 'production'
}
},
dev: {
options: {
sassDir: 'sass',
cssDir: 'css'
}
}
},
watch: {
sass:{
files: ['sass/*.scss'],
tasks: ['sass', 'cssmin']
}
},
sass: {
dist: {
files: {
'css/style.css' : 'sass/style.scss'
}
}
},
concat: {
options: {
separator: ';',
stripBanners: true,
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
dist: {
src: ['js/*.js'],
dest: 'js/main.min.js'
}
},
uglify:{
options: {
manage: false,
preserveComments: 'all' //preserve all comments on JS files
},
my_target:{
files: {
'js/main.min.js' : ['js/*.js']
}
}
},
cssmin:{
my_target:{
files: [{
expand: true,
cwd: 'css/',
src: ['*.css', '!*.min.css'],
dest: 'css/',
ext: '.min.css'
}]
}
}
});
// Load the plugin that provides the "compass" task.
grunt.loadNpmTasks('grunt-contrib-compass');
// Load the plugin that provides the "watch" task.
grunt.loadNpmTasks('grunt-contrib-watch');
// Load the plugin that provides the "sass" task.
grunt.loadNpmTasks('grunt-contrib-sass');
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Load the plugin that provides the "concat" task.
grunt.loadNpmTasks('grunt-contrib-concat');
// Load the plugin that provides the "cssmin" task.
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Default task(s).
grunt.registerTask('default', ['uglify','cssmin']);
};
When I run grunt sass, it gave me those error. Compass was already installed and I type "grunt compass" to make sure its running.
Any idea?

use grunt-contrib-sass instead of grunt-sass.
grunt-contrib-sass ruby compiler that support compass.
This task requires you to have Ruby and Sass installed. If you're on
OS X or Linux you probably already have Ruby installed; test with ruby
-v in your terminal. When you've confirmed you have Ruby installed, run gem install sass to install Sass.
Also make sure to compass option to true. By default, it's set to false.
Read this for more information : compass option
Here is an example :
sass: {
dist: {
options: {
compass: true,
},
files: {
'css/style.css' : 'sass/style.scss'
}
}
},
grunt-sass uses libsass which is a Sass compiler in C++ that doesn't support compass.
This task uses libsass which is a Sass compiler in C++. In contrast to
the original Ruby compiler, this one is much faster, but is missing
some features, though improving quickly. It also doesn't support
Compass. Check out grunt-contrib-sass if you prefer something more
stable, but slower.

SASS Grunt error

I try to added the Sass task to my grunt process using the grunt-contrib-sass plugin but when i run it he create the css files but this file is empty
This is my Gruntfile.js :
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style:'expanded',
trace: true
},
files: {
'main.css':'sass/app.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
When i start the command "grunt" i have this :
Running "watch" task Waiting..... File "sass\app.scss"
changed Running "sass:dist" task (and nothing)
I have :
Ruby 2.1.5 [x64-mingw32]
SASS : 3.4.10
Grunt : newest version
Thanks !

Could you try changing this:
watch: {
css:
files: '**/*.scss',
tasks: ['sass']
}
}
To this:
watch: {
css:
files: '/**/*.scss',
tasks: ['sass']
}
}
To make sure it watches from the root of the project

Using both Compass and Autoprefixer in Grunt

Curious about whether there’s a way to use both Autoprefixer and Compass in Grunt without having to specify a different output path for each task.
I currently have my .scss files in a folder named source. The compass task compiles these into a folder named build. I want to then run Autoprefixer without having to specify another different output path (i.e. still be in the build directory).
Is it not possible to run Autoprefixer on a compass compiled CSS file without specifying a different output path? Is it possible to run both at the same time perhaps?
Here’s the section of my gruntfile it relates to if it’s of any help. What I run in terminal is grunt watch:
compass: {
options: {
sassDir: 'style/source',
cssDir: 'style/build',
outputStyle: 'expanded',
}
},
watch: {
css: {
files: ['style/source/**/*.scss'],
tasks: ['compass'],
options: {
spawn: false,
}
}
},
Refs:
https://github.com/nDmitry/grunt-autoprefixer
https://github.com/gruntjs/grunt-contrib-compass

If you do not specify an output location for Autoprefixer, it will just use the input location and overwrite the files. Here’s the updated section of the gruntfile if it’s of help to anyone:
autoprefixer: {
css: {
src: 'style/build/**.css',
}
},
watch: {
options: {
livereload: true,
},
css: {
files: ['style/source/**/*.scss'],
tasks: ['compass', 'autoprefixer:css'],
options: {
spawn: false,
}
}
}

You may also want to add map: true to the autoprefixer call.
Here is a working copy for your goal :
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
autoprefixer: {
css: {
src: 'css/*.css',
options: {
map: true
}
}
},
compass: {
css: {
options: {
config: 'config.rb'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['compass:css', 'autoprefixer:css'],
options: {
interrupt: true
}
}
}
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};