We Keep Coding

Less task not found error

I recently started using grunt and can't seem to get it working: I installed grunt-cli using npm and also installed a few grunt modules using npm with no issues. I'm trying to compile all the bootstrap framework's less files into one css file but keep getting an error saying the less task was not found. i'm sure everything is where it's supposed to be and I loaded the grunt-contrib-less plugin in the gruntfile. Any idea where I might be going wrong?
My package.json's contents:
{
"name": "dConference",
"version": "0.1.0",
"devDependencies": {
"grunt": "latest",
"grunt-contrib-jshint": "latest",
"jshint-stylish": "latest",
"grunt-contrib-uglify": "latest",
"grunt-contrib-less": "latest",
"grunt-contrib-cssmin": "latest",
"grunt-contrib-watch": "latest"
}
}
And my gruntfile.js's contents:
//gruntfile specifying all tasks to be performed
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//all configuration goes here
less: {
build: {
files: [{
expand: true,
cwd: "components/less",
src: ["*.less"]
dest: "css/main.css"
} ]
}
}
});
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-watch");
};

I made Gruntfile.js as following.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
build: {
files: {
'css/main.css': 'components/less/bootstrap.less'
}
}
}
});
grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-watch");
};
And running "grunt less" on project root folder was successful.
After successful running of "grunt less" command, main.css was generated under css folder.
Project structure is:
grunt-test-project
components/less
mixins folder
all other bootstrap less files
css
Gruntfile.js
package.json
Please try it on your side and let me know the result.

Gruntfile.js tasks... ERROR

Trying to get Grunt to concat my CSS files into one called production.css
Here is the output from the command prompt
C:\Users\josha\Desktop\Repos\AJAX Project - Grunt Test>grunt
C:\Users\josha\Desktop\Repos\AJAX Project - Grunt Test\Gruntfile.js:2
"name": "AjaxPmodule.exports = function(grunt) {
^
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected token :
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
C:\Users\josha\Desktop\Repos\AJAX Project - Grunt Test>grunt
C:\Users\josha\Desktop\Repos\AJAX Project - Grunt Test\Gruntfile.js:2
"name": "AjaxPmodule.exports = function(grunt) {
^
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected token :
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
C:\Users\josha\Desktop\Repos\AJAX Project - Grunt Test>
Here is my Gruntfile
{
"name": "AjaxPmodule.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'css/*.css', // All JS in the libs folder
],
dest: 'css/production.css',
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat']);
};roject",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "^0.5.0"
}
}
I'm using the grunt-contrib-concat to concat my files. The version is "^0.5.0"

You have for some reason gotten some extra text into your file. It should start with module.exports and you also have something extra in the end.
I think what you did was basically to paste your grunt code into a code snippet that looks like package.json:
{
"name": "ajaxProject",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "^0.5.0"
}
}
Try this:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'css/*.css', // All JS in the libs folder
],
dest: 'css/production.css',
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat']);
}

Trying to use grunt uncss to remove some css

I have a website that I inherited with a couple of gigantic css files that analysing with DUst-Me Selector in Firefox return me with almost 2000 unused styles.
To remove them I'm trying to use grunt uncss, the problem is that I get the following error:
grunt uncss
Running "uncss:dist" (uncss) task
Fatal error: uncss/node_modules/css: missing '}' near line 2429:5
-> .mobile-hidden {
Those are my configuration files
package.json
{
"name": "tappr-registration",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-copy": "^0.7.0",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "^0.6.0",
"grunt-processhtml": "^0.3.3",
"grunt-uncss": "^0.3.7"
}
}
Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uncss: {
dist: {
options: {
media: ['min-width'],
timeout: 1000,
htmlroot: 'public_html',
report: 'max'
},
files: {
'dist/clean.css': ['public_html/index.php', 'public_html/page_2.html', 'public_html/page_3.html']
}
}
}
});
// Load the plugin that provides the "uncss" task.
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-processhtml');
grunt.registerTask('default', ['uncss','processhtml']);
};
Now, my best guess is that I get this error because I specifying in the wrong way the media queries to include but I haven't found some decent documentation on how uncss wants that option.
I already tried to take off the options.
Do somebody has some good suggestion?

Believe it or not the problem was caused by the comments:
<!-- ----- Responsive 34.2857142857em ------>
After that I remove them everything worked fine and I can say the it was very much needed.
Running "uncss:dist" (uncss) task
File cleancss/tidy.css created: 229.48 kB → 25.98 kB
:)

React and Grunt - Envify NODE_ENV='production' and UglifyJS

I am using Grunt to build a React project and I want to have 'dev' and 'prod' flavours. As react docs says:
To use React in production mode, set the environment variable NODE_ENV to production.
A minifier that performs dead-code elimination such as UglifyJS is
recommended to completely remove the extra code present in development mode.
I am very new using grunt, browserify and stuff but let's see. First problem I have is with envify, I use it as a transform:
browserify: {
options: {
transform: ['reactify'],
extensions: ['.jsx']
},
dev:{
options: {
watch: true //Uses watchify (faster)
},
src: ['js/app.js'],
dest: 'js/bundle.js'
},
/**
* To use React in production mode, set the environment variable NODE_ENV to production.
* A minifier that performs dead-code elimination such as UglifyJS is
* recommended to completely remove the extra code present in development mode.
**/
prod: {
options: {
transform: ['envify'] //How to set up NOD_ENV='production' ?
},
src: ['js/app.js'],
dest: 'js/bundle.js'
}
},
Ok, doing grunt:dev works just fine. So when running grunt:prod... How can I set NODE_ENV: 'production'? I mean, I know I am passing 'envify' as a transform but... No idea how to use that.
After this, I also have an uglify task:
uglify: {
prod: {
files: {
'js/bundle.min.js': ['js/bundle.js']
}
}
}
So after calling grunt:prod, what it creates is two files (bundle.js and bundle-min.js). In production I will like to only have bundle.min.js. I know I can do:
js/bundle.js': ['js/bundle.js']
But mmm I don't know if there is a way to just rename it to bundle.min.js, I guess so... the problem is that in the html I have:
<script src="js/bundle.js"></script>
Is there here also a trick to make it accepts either bundle.js or bundle.min.js?
Thanks in advance.

Transforms are local, and well made packages put their transforms in their package.json file. Unless you're using envify in your own code, you don't need to do anything with it.
What you do need is grunt-env, or another way to set environmental variables.
Here's an alternative by using package.json:
{
"scripts": {
"build": "NODE_ENV=development grunt build-dev",
"dist": "NODE_ENV=production grunt dist"
}
},
"devDependencies": {
"grunt": "...",
"grunt-cli": "..."
}
The benefit here is that the person using your package doesn't even need to install grunt globally. npm run build will run ./node_modules/.bin/grunt build-dev with the correct environmental variable set.

Both John Reilly's and FakeRainBrigand 's answers did not work for me. What worked for me was the following:
Step 1 - Run this command where your package.json is
npm i grunt-env --save-dev
Step 2 - Add the code in "evn:" to your Gruntfile.js within grunt.initConfig like so:
grunt.initConfig({
...
env: {
prod: {
NODE_ENV: 'production'
}
},
...
});
Step 3 - Add the grunt task to your Gruntfile.js
grunt.loadNpmTasks('grunt-env');
Step 4 - Call it before browserify like so:
grunt.registerTask("default", ["env", "browserify"]);

Just an addition to the great answer by FakeRainBrigand, if you're running on Windows (like me) then you need a subtly different syntax in your scripts section:
{
"scripts": {
"build": "SET NODE_ENV=development&&grunt build-dev",
"dist": "SET NODE_ENV=production&&grunt dist"
}
},
"devDependencies": {
"grunt": "...",
"grunt-cli": "..."
}

Setting jshint and travis-ci for javascript project

I'm trying to setup Travis CI on one JavaScript project hosted on GitHub but I'm getting error like
Loading "jshint.js" tasks...ERROR
>> Error: Cannot find module 'jshint/src/cli/cli'
Those are my files:
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
myFiles: ['cyrlatconverter-v0.5.4.js']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
};
.travis.yml
language: node_js
node_js:
- 0.10
package.json
{
"name": "node-travis",
"version": "0.1.0",
"devDependencies": {
"grunt": "0.4.1",
"grunt-cli": "0.1.9",
"grunt-contrib-jshint": "0.6.0"
},
"scripts": {
"test": "grunt --verbose"
}
}

Upgrading versions as discussed in github.com/gruntjs/grunt-contrib-jshint/issues/92 solved the problem.
Also as #Dexa pointed out, for him - removal of scripts part of the package.json worked and adding following to the Gruntfile.js :
grunt.registerTask('default', ['jshint']);
For clarification, ^ above registers default grunt task to run jshint when grunt is wrote to command line.