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 task not found (grunt-contrib-sass)

Here's my gruntfile.js, it's in the same directory as sass/style.scss and package.json. package.json has grunt, grunt-contrib-sass and grunt-cli installed.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// this is where you set up your Sass settings. Once you know what you're doing, you can change thse.
Sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'style.css': 'sass/style.scss'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('default', ["Sass"]);
};
Any ideas why I'm receiving the task not found error?

Change Saas to saas as shown in the example config.
Note: The correct spelling of the Task name starts with a lowercase (s).
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: { // <-- Change to lowercase `s`
dist: {
options: {
style: 'compressed'
},
files: {
'style.css': 'sass/style.scss'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('default', ["sass"]); // <-- Change to lowercase `s`
};

Grunt-Browserify extensions flag not working

I am trying to use Grunt-browserify and reactify to parse and bundle React components written in jsx. I want to use the extension flag so that I don't have have to specify the file extension name of my modules, but I have been unable to get this to work. Here is some test code:
A Gruntfile:
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify: {
dev: {
src: 'src/app.jsx',
dest: 'dest/app.js',
options: {
debug: true,
transform: ['reactify'],
extensions: ['.jsx']
}
}
}
});
grunt.loadNpmTasks('grunt-browserify');
grunt.registerTask('default', ['browserify:dev']);
};
The main app file app.jsx:
'use strict';
var React = require('react');
var Test = require('./components/Test'); // Here is the problem...
React.render(
<Test />,
document.getElementById('test')
);
And then Test.jsx:
'use strict';
var React = require('react');
var Test = React.createClass({
render: function() {
return(
<div>
<p>Some markup</p>
</div>
);
}
});
module.exports = Test;
When I try to compile this by running grunt, I get an error:
Error: Cannot find module './components/Test' from '/Users/****/Sites/grunt-test/src'
The Grunt-browserify documentation says that it has supported the extensions flag since v1.2.6 and I have seen examples of this all over the web, but I can't seem to get it to work here. If I run browserify from the command line -- like so browserify -t reactify --extension=.jsx -o dest/app.js -- it works.
Any ideas?

Have you tried moving the properties inside browserifyOptions as follow?
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify: {
dev: {
src: 'src/app.jsx',
dest: 'dest/app.js',
options: {
browserifyOptions: {
debug: true,
transform: ['reactify'],
extensions: ['.jsx']
}
}
}
}
});

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

Grunt task duplicate key

I have a grunt file with tasks and jshint giving me a warning for duplicate keys on below:
clean: ['public', 'build', 'css/main.css', 'css/print.css'],
clean : {
aftertest :['js/libs']
},
How can I make this in one key, so that by default it runs ['public', 'build', 'css/main.css', 'css/print.css']?

You should use different targets for this.
grunt.initConfig({
clean: {
build: ['public', 'build', 'css/main.css', 'css/print.css'],
aftertest: ['js/libs']
}
});
Then in your build alias you might want to use it like so:
grunt.registerTask('build', ['clean:build', 'stylus', 'jade', 'jshint']);
Whenever you have more than a single target for one task, it's best to explicitly name them so that you'll know, in the future, what each target's purpose is.

The error it's because the object you are passing to grunt.initConfig has two keys with the same name.
This is a Gruntfile.js example for gjslint task
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint', 'qunit']
},
gjslint: {
options: {
flags: [
'--nojsdoc'
],
reporter: {
name: 'console'
}
},
app: {
src: ['www/app/**/*.js']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-gjslint');
grunt.registerTask('build', 'Grunt build taskt...', function() {
grunt.log.write('you can log here some stuff...').ok();
});
};