Grunt Less task no output - javascript

I'm running Grunt on Windows 10 (using old console). All tasks works perfectly fine except grunt-contrib-less. There's relevant part of my Gruntfile.js:
less: {
development: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: {
"css/jg_shop.css": "css/jg_shop.less"
}
}
}
...
grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('less', ['less:development']);
When I type grunt less the console freezes and produces no output.

Rename the task less to less_abc and try grunt less_abc in console.
grunt.registerTask('less_abc', ['less:development']);

Related

Does grunt-contrib-jasmine limit the number of tests?

I'm kind of new to grunt and jasmine, so I hope i'm not wasting your time.
I'm getting this error when trying to run more than 29 tests:
Warning: PhantomJS failed to load your page. Use --force to continue.
Aborted due to warnings.
Process finished with exit code 90
It doesn't matter which tests I comment out, as long as there are less than 30 test, I will not receive this warning.
All my tests pass, so I don't think it's something to do with them.
My (simplified) gruntfile:
module.exports = function (grunt) {
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Define the configuration for all the tasks
grunt.initConfig({
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost',
livereload: 35729
},
livereload: {
options: {
open: true,
base: [
'.tmp',
'<%= yeoman.app %>'
]
}
},
}
jasmine: {
pivotal: {
src: ['/scripts/*.js'],
options: {
specs: 'tests/**/*Spec.js',
helpers: 'tests/**/*Helper.js',
summary: true
}
}
}
});
grunt.registerTask('unit-tests', [
'jasmine'
]);
}
I'm using:
grunt-cli v0.1.13
grunt v0.4.5
and
grunt-contrib-jasmine ^0.9.0
I'd be happy to add more information if needed.
Thanks
Clarification
I mean there are 29 it(...) clauses (not expect(...)'s)
Update 1
When running with the --debug flag, I see that the last log is this (This does not appear when running less than 30 specs):
[D] ["phantomjs","onResourceReceived",{"contentType":"image/svg+xml","headers":[{"name":"Content-Type","value":"image/svg+xml"},{"name":"Content-Length","value":"8834"}],"id":68,"redirectURL":null,"stage":"end","status":null,"statusText":null,"time":"2016-01-11T10:06:46.813Z","url":"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj..."}]
I didn't put the whole base64 representation of the image file, because it is big.
And when I opened the file in the browser I saw that it is the Jasmine logo.
Update 2
I noticed it doesn't happen when I run it on a different computer (our Jenkins server)

Grunt notify not running

I am trying to get desktop notifications working with Grunt, and have installed Grunt notify. As per the instructions, I have also installed "Growl" (I'm on Windows 7), and also included the line grunt.loadNpmTasks('grunt-notify'); in my Gruntfile, however desktop notifications are not showing at all.
Am I missing something? The Grunt Notify page seems to imply that adding in the loadNpmTasks line is the only addition needed in my gruntfile for it to work with default options.
Here is my Gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
less: {
development: {
options: {
paths: ["less"],
compress: true,
strictMath: true,
sourceMap: false,
sourceMapFilename: 'css/styles.css.map',
sourceMapRootpath: '/'
},
files: {
"css/styles.css": "css/style.less"
}
}
},
uglify: {
my_target: {
files: {
'js/custom.min.js': ['js/custom.js']
}
}
},
watch: {
compile: {
files: ['**/*.php', 'css/**/*.less', 'js/**/*.js', '!js/custom.min.js'],
tasks: ['less', 'uglify'],
options: {
atBegin: true,
livereload: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-notify');
// Default task(s).
grunt.registerTask('default', ['less']);
};
Hum... I never used the grunt-notify plugin, but as the doc says, this plugin shows warning or errors of your tasks. So if your task run successfully, you shouldn't be notified.
If you wan't custom messages on success too, you'll have to add the optionnal messages.
To be sure that the problem isn't an effect of a bad installation, try to run the simple gruntfile shown as example on the plugin's page.
If it works, you should consider my first explanation and add a custom message on success.
[Edit: try to run your task with the attribute -v to have a verbose run. As specified in the doc, it will write logs if there is errors with the plugin]
This is the grunt-notify example file (from the plugin's doc) :
grunt.initConfig({
// This is optional!
notify_hooks: {
options: {
enabled: true,
max_jshint_notifications: 5, // maximum number of notifications from jshint output
title: "Project Name", // defaults to the name in package.json, or will use project directory's name
success: false, // whether successful grunt executions should be notified automatically
duration: 3 // the duration of notification in seconds, for `notify-send only
}
}
});
// Load the task
grunt.loadNpmTasks('grunt-notify');
// This is required if you use any options.
grunt.task.run('notify_hooks');

Grunt - Concat multiple JS files and watch for changes

Still a bit of a newbie with Grunt, so please bear that in mind with your answers. I am trying to setup a task in Grunt that will concat any JS files within a directory called "custom", into a single file called custom-concat.js, however after running grunt watch (which runs fine without error), nothing is happening when I try and make changes to any of the files within my "custom" directory (i.e. console just sits at "waiting...." even after I make changes to any JS files within "custom" directory). Clearly there is something wrong with my concat task, but I can't seem to see what the problem is. Can anyone see where the problem lies? Full gruntfile below:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
//pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';',
},
dist: {
src: ['scripts/custom/**/*.js'],
dest: 'scripts/custom-concat.js',
},
},
uglify: {
build: {
src: 'scripts/custom-concat.js',
dest: 'scripts/custom.min.js'
}
},
less: {
options: {
paths: ["css"]
},
files: {
"styles.css": "less/styles.less"
}
},
watch: {
scripts: {
files: 'scripts/**/*.js',
task: ['concat', 'uglify:build']
},
styles: {
files: 'css/less/**.less',
task: 'less'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
grunt.registerTask('default', ['concat', 'uglify']);
};
As far as I see, there are three small issues with your watch task:
The correct attribute for watch is taskS not task
If you want to run the tasks of watch, directly at the beginning, use options { atBegin: true }
Your watch task monitors the script folder. However, this folder will also contain your concated and uglified files. So this task will run into an infinite loop. You should probably only watch the scripts/custom folder
So your watch task should probably look something like this:
watch: {
scripts: {
files: 'scripts/custom/**/*.js',
tasks: ['concat', 'uglify:build'],
options: {
atBegin: true
}
},
styles: ...
}
Github grunt-contrib-watch

Grunt server error, EMFILE

Whenever I do "grunt server" it automatically gives me this error:
Running "watch" task
Waiting...
Warning: EMFILE, too many open files
and next this:
(node) warning: Recursive process.nextTick detected. This will break in the next version of node. Please use setImmediate for recursive deferral.
This usual fix I've seen on the web is changing the name as shown bellow:
grunt.registerTask('uglify', ['jshint', 'uglify']);
grunt.registerTask('myuglify', ['jshint', 'uglify']);
Although my problem cannot be fixed with such method because I'm not using the same name as the task.
My gruntfile.js:
module.exports = function(grunt){
grunt.initConfig({
sass: {
dist: {
files: {
'styles/css/main.css': 'styles/sass/main.scss'
}
}
}
,watch: {
options:{livereload:true},
sass:{
files:'styles/sass/*.scss',
tasks:'sass'
}
},
express:{
all:{
options:{
port:9000,
hostname:'localhost',
bases:'.',
livereload:true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-express');
grunt.registerTask('default', ['sass'])
grunt.registerTask('server',['express','watch'])
}
Any idea?
I encountered this time-wasting error today, and the solution on the GitHub repository did not work for me. After searching for this issue in relation to the process.nextTick deprecation warning, I came to the conclusion that running a task dependent on a watched file/glob is a potential cause.
Here's the Gruntfile for my website:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
dev: {
files: ['**/*.js', 'public/stylesheets/**/*.scss'],
tasks: ['express:dev'],
options: {
spawn: false
}
}
},
express: {
dev: {
options: {
script: 'server.js',
node_env: 'development'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-express-server');
grunt.registerTask('default', ['express:dev', 'watch']);
};
I resolved the issue by removing js files from my watch task, which restarts Express. The below configuration of the aforementioned task works fine for me:
watch: {
dev: {
files: ['public/stylesheets/**/*.scss'],
tasks: ['express:dev'],
options: {
spawn: false
}
}
},
This SO answer provides a similar fix. Interestingly, I've never encountered this problem on my Ubuntu machine; it happened on my MacBook today when I cloned my repository.
worked for me when i typed
sudo grunt serve
possibly another solution. just increase increase read file limit.
https://github.com/gruntjs/grunt-contrib-watch#how-do-i-fix-the-error-emfile-too-many-opened-files
ulimit -n 10480

How can I make 'grunt less' automatically run autoprefixer?

I have a working Gruntfile with less and autoprefixer. I also have 'grunt watch' working fine.
Before I was using autoprefixer, I was using less mixins for vendor prefixes. Running 'grunt less' would build working CSS with all my prefixes.
Now I have autoprefixer, but if I want to do a once-off build of my styles, I now have to run 'grunt less' then 'grunt autoprefixer' to get working CSS with prefixes.
How can I modify 'grunt less' so it build working, prefixes less again?
I've read the docs, and I know I could add an additional task to do both these things. However:
'grunt less' now doesn't have usable output. A task should always produce usable output.
I don't want to have to tell other people that 'grunt less' doesn't produce usable output
An additional task should not be required to replace one that doesn't work
I.e., I just want grunt less to produce working CSS (with prefixes).
module.exports = function(grunt) {
// Load Grunt tasks declared in the package.json file
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
// Configure Grunt
grunt.initConfig({
less: {
development: {
options: {
paths: ["./less"],
yuicompress: false
},
files: {
"./public/css/style.css": "./public/less/style.less"
}
}
},
autoprefixer: {
development: {
browsers: ['last 2 version', 'ie 9'],
expand: true,
flatten: true,
src: 'public/css/*.css',
dest: 'public/css'
}
},
watch: {
less: {
files: ["./public/less/*"],
tasks: ["less", "autoprefixer:development"],
options: {
livereload: true
}
}
},
});
};
For using autoprefixer as plugin for LESS, you must install npm-package less-plugin-autoprefix:
npm install grunt-contrib-less less-plugin-autoprefix --save-dev
Gruntfile.js
module.exports = function(grunt) {
"use strict";
var gruntConfig = {
less : {
options : {
plugins : [ new (require('less-plugin-autoprefix'))({browsers : [ "last 2 versions" ]}) ]
},
main : {
files: {
'src/css/desktop/bootstrap-theme.css' : 'src/less/desktop/bootstrap-theme.less',
'src/css/desktop/company.css' : 'src/less/desktop/company.less',
'src/css/desktop/index.css' : 'src/less/desktop/index.less',
'src/css/desktop/login.css' : 'src/less/desktop/login.less'
}
}
}
};
grunt.initConfig(gruntConfig);
grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('default', [ 'less' ]);
};
Grunt can't do what you describe in the question as tasks do not know about each other inherently. You have to glue tasks together using aliases, (easy) or functions (for when you want a bit more control), but there's no way of modifying the way one of these tasks behaves without changing the source.
As an example, you could fork grunt-contrib-less and add the code to run the auto prefixing directly into the task, around here: https://github.com/gruntjs/grunt-contrib-less/blob/master/tasks/less.js#L69 - inject this line here https://github.com/nDmitry/grunt-autoprefixer/blob/master/tasks/autoprefixer.js#L56 and then use your fork instead of the official plugin.
The easiest and best way is to register a new task that does the job of these two tasks but in the one command, i.e:
grunt.registerTask('buildless', ['less', 'autoprefixer']);
I do this with all my own tasks - SASS compilation, JS concat + uglify, webfont generation etc. Just tell the others in your team to run those tasks and not grunt less or grunt autoprefixer on their own.
Better still, use my Grunt plugin available tasks. With this (and the filter config) you will be able to produce a trimmed down list of tasks whenever someone runs grunt availabletasks although I prefer to alias this with tasks for quicker typing. If you're like me and have been bitten by the automation bug (and have registered loads of plugins in your Gruntfile), this can really help a newcomer to the project with which tasks should be run.

Categories