Karma grunt, where do the output go? - gruntjs

Karma is new to me. This is my configuration. I can run $grunt karma but it produces nothing? There should be a test in that location because running Jasmine works and I get an error from my test. Why dont i get any feedback from Karma.
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'css/common.css' : 'sass/style.scss'
}
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'js/dev/**/*.js',
dest: 'js/build/<%= pkg.name %>.min.js'
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
},
jshint: {
files: ['js/dev/**/*.js'],
options: {
globals: {
jQuery: true,
console: true,
module: true
}
}
},
jasmine : {
src : 'js/test/**/*.js',
},
karma: {
unit: {
options: {
files: ['js/test/**/*.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-jasmine');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-karma');
// Default task(s).
grunt.registerTask('default', ['uglify', 'sass', 'jshint', 'jasmine'] );
//Dev task(s)
grunt.registerTask('dev', ['watch'] );
//Karma
grunt.registerTask('karma', ['karma'] );
};

I don't think you have enough configuration information in your gruntfile for karma to do anything. For example, you don't specify what browser(s) to use.
Try changing your karma option section to something like this:
karma: {
unit: {
options: {
files: ['js/test/**/*.js'],
frameworks: ['jasmine'],
browsers: ['Chrome']
}
}
}
N.B: this assumes you have Chrome on your system. If you don't, you can easily install the karma launcher for your browser (Firefox, Safari, IE) via npm. You'll also need the karma-jasmine module, if not installed.
There are several good references you can use as a launching point for working with grunt and karma. Here are three to get you started:
karma project example - useful reference while reading the karma configuration docs
cobbdb/grunt-karma-example - puts all karma configuration into the gruntfile
hollandben/grunt-karma-example - specifies config is in karma.conf.js

Related

grunt watch task is not watching js files just says waiting

I have been trying to configure this gruntfile for days, I have seen and read multiple documents on how to set it up. I have been able to set it up so I can run individual tasks by typing in the individual commands into bash:
grunt uglify
grunt sass
grunt cssmin
However grunt watch seems to not watch any of my js files
All of which work fine, but when I tried to run them all under the "watch" task, my js files are all ignored. my command line just reads 'waiting...'. Changing any of the content in my js files does not trigger an update. I also had toruble running jshint as it kept telling me that it is looking for a string etc. so i disabled that plugin for now. Here is my file:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: { // Task
dist: { // Target
files: { // Dictionary of files
'assets/css/style.css': 'assets/scss/style.scss'
// 'destination': 'source'
}
}
},
cssmin: {
options: {
banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd")
%> \n*/\n'
},
build: {
files: {
'assets/css/style.min.css': 'assets/css/style.css'
}
}
},
uglify: {
options: {
banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd")
%> \n*/\n'
},
build: {
files: {
'assets/js/magic.min.js': ['assets/js/magic.js',
'assets/js/server.js', 'assets/js/script.js']
}
}
},
// configure jshint to validate js files -------------------------------
// jshint: {
// options: {
// reporter: require('jshint-stylish')
// },
// // when this task is run, lint the Gruntfile and all js files in
src
// build: ['Gruntfile.js', 'assets/**/*.js']
// },
watch: {
// for stylesheets, watch css and less files
// only run less and cssmin stylesheets: {
files: ['assets/**/*.css', 'assets/**/*.less'],
tasks: ['sass', 'cssmin']
},
// for scripts, run jshint and uglify
scripts: {
files: 'assets/**/*.js',
tasks: 'uglify'
}
});
// Default tasks
//grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['uglify', 'cssmin', 'sass', 'watch']);
};
I think you want to do this ?
watch: {
stylesheets: {
files: ['assets/**/*.css', 'assets/**/*.less'],
tasks: ['sass', 'cssmin']
},
// for scripts, run jshint and uglify
scripts: {
files: 'assets/**/*.js',
tasks: 'uglify'
}
}

Gruntfile.js not running certain packages

can you please take a look at the following Gruntfile to see if you can determine why it isn't running cssnano and autoprefixer?
Grunt is currently watching my project and with each save grunt-sass compiles fine but neither grunt-cssnano or autoprefixer are doing their thing and no errors are reported.
Done, without errors.
Completed in 1.906s at Wed Nov 25 2015 13:12:18 GMT+0000 (GMT Standard Time) - Waiting...
File "sass\styles.scss" changed.
Running "sass:dist" (sass) task
I figure I've done something wrong with grunt-contrib-watch setup (specifically the css part) but that's just a guess.
My project folder looks like so
dist
css
styles.css
node_modules (includes all relevant packages)
sass
styles.css
Gruntfile.js
package.json
And my Gruntfile is as follows
module.exports = function (grunt) {
grunt.initConfig({
sass: {
options: {
sourceMap: false
},
dist: {
files: {
'dist/css/styles.css': 'sass/styles.scss'
}
}
},
postcss: {
options: {
map: {
inline: false,
annotation: 'dist/css/maps/'
},
processors: [
require('autoprefixer')({
browsers: 'last 2 versions'
}),
require('cssnano')()
]
},
dist: {
src: 'dist/css/styles.css'
}
},
watch: {
sass: {
files: 'sass/*.scss',
tasks: ['sass']
},
css: {
files: 'dist/css/styles.css',
tasks: ['cssnano', 'autoprefixer']
}
},
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-cssnano');
grunt.registerTask('default', ['watch', 'sass', 'postcss:dist', 'cssnano', 'autoprefixer']);
};
registering a task like you do :
grunt.registerTask('default', ['watch', 'sass', 'postcss:dist', 'cssnano']);
will execute the tasks one by one. So in your case, only the watch task will be executed because it "never ends" till you finish it. So the sass, postcss:dist, cssnano wont be reached.
So in your case it will execute the watch task only, which will watch the *.scss files to execute the sass task and watch the style.css to execute the cssnano and autoprefixer task.
But these 2 last tasks aren't defined in your config, so it won't do anything.
To solve your problem, remove the tasks from your default registered task because they aren't used :
grunt.registerTask('default', ['watch']);
And add a config for each missing task. for example:
cssnano: {
options: {
sourcemap: true
},
dist: {
files: {
'dist/css/styles.min.css': 'dist/css/styles.css'
}
}
},
//and same for autoprefixer
With a lot more trial and error it looks like I have a solution. The below file now runs Sass, cssnano, autoprefix and watch. Sass, cssnano and autoprefix packets (and I assume any others that are added in future) will do their thing in grunt.initConfig while and at the bottom of the file registerTask takes care of watch.
More work is need to figure out how to create other registerTasks but that's for another day.
Thanks to Mian who set me on the right track.
module.exports = function (grunt) {
grunt.initConfig({
sass: {
options: {
sourceMap: false
},
dist: {
files: {
'dist/css/styles.css': 'sass/styles.scss'
}
}
},
postcss: {
options: {
map: {
inline: false,
annotation: 'dist/css/maps/'
},
processors: [
require('autoprefixer')({
browsers: 'last 2 versions'
}),
require('cssnano')()
]
},
dist: {
src: 'dist/css/styles.css'
}
},
watch: {
sass: {
files: 'sass/*.scss',
tasks: ['sass', 'postcss']
},
},
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-cssnano');
grunt.registerTask('default', ['watch']);
};

grunt browser sync not injecting changes

I'm trying to get grunt-browser-sync to inject any css changes into an open browser when a file is updated/changed. But for some reason, I can seem to get it to work and grunt is not giving me any errors to let me know it's not working.
I'm currently using MAMP since it's a Wordpress based project.
Here's my Gruntfile.js:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: '_/js/libs/*.js', //input
dest: '_/js/functions.min.js' //output
}
},
sass: {
dist: {
options: {
loadPath: require('node-bourbon').includePaths,
loadPath: require('node-neat').includePaths,
style: 'compressed'
},
files: {
'style.css': 'scss/style.scss'
}
}
},
autoprefixer: {
dist: {
files: {
'style.css': 'style.css'
}
}
},
browserSync: {
dev: {
bsFiles: {
src : 'style.css'
},
options: {
watchTask: true
}
}
},
watch: {
options: {
livereload: true
},
js: {
files: ["_/js/libs/*.js"],
tasks: ["ugilify"],
},
sass: {
files: ["scss/*.scss"],
tasks: ["sass", "autoprefixer", "browserSync"],
},
php: {
files: ['*.php']
},
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-browser-sync');
// Default task(s).
grunt.registerTask('default', ['uglify', 'sass', 'browserSync', 'watch', 'autoprefixer']);
};
and here's the output when I save/update a file:
Running "watch" task
Waiting...
>> File "scss/global.scss" changed.
Running "sass:dist" (sass) task
File style.css created.
Running "autoprefixer:dist" (autoprefixer) task
File style.css created.
Running "browserSync:dev" (browserSync) task
Done, without errors.
Completed in 1.478s at Wed May 07 2014 18:47:40 GMT-0500 (CDT) - Waiting...
But then I have to physically refresh the browser to see the changes.
I'm not sure if I am missing something within the grunt file or what.
The only version of grunt-browser-sync that works for me with this code is 1.9.1. So, un-install your current version and
npm install grunt-browser-sync#1.9.1 --save-dev
I encountered the same issue and have opened an issue here
Github grunt-browser-sync repo with issues 58

Why can't I get 'grunt-browser-sync' to work with jekyll?

I am trying to set up a workflow using grunt, to help with development of my jekyll site.
Found this great TUT which basically goes through how to install it in your workflow.
However, I get these errors when I run the 'grunt' command.
**[BS] Warning: Multiple External IP addresses found**
**[BS] If you have problems, you may need to manually set the 'host' option**
**[BS] Server running. Use this URL: http://192.168.1.5:3005**
[BS] Serving files from: /Users/antonioortiz/Sites/newaortiz/_site
**[BS] Not watching any files...**
[BS] Browser Connected! (Chrome, version: 33.0.1750.146)
Obviously the ones I bolded are most glaring, as NO css is being generated in my 'assets/css
Below is my Gruntfile. Thank you in advance.
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-jekyll');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-browser-sync');
// All configuration goes here
grunt.initConfig({
jekyll: {
build: {
dest: '_site'
}
},
sass: {
dist: {
files: {
'assets/css/*.css': 'assets/sass/*.scss'
}
}
},
compass: {
dev: {
options: {
config: 'config.rb'
} //options
} // dist
}, //compass
watch: {
sass: {
files: 'assets/**/*.scss',
tasks: ['sass']
},
jekyll: {
files: ['_layouts/*.html', '_includes/*.md', 'assets/css/*.css'],
tasks: ['jekyll']
}
},
compass: {
files: ['assets/sass/*.scss'],
tasks: ['compass:dev']
}, // sass
browser_sync: {
files: {
src: ['_site/assets/css/*.css']
},
options: {
watchTask: true,
ghostMode: {
clicks: true,
scroll: true,
links: true,
forms: true
},
server: {
baseDir: '_site'
}
}
}
});
// Custom tasks
grunt.registerTask('build', ['sass', 'jekyll']);
grunt.registerTask('default', ['build', 'browser_sync', 'watch']);
};

Where are JSHint errors logged?

I just started messing around with Grunt. I have a basic implementation running successfully, minifying my code and running JSHint.
It says 0 files lint free, which I've gathered means that all of the files it's checking have lint.
However, I've been googling for an hour, and somehwat incredibly, cannot figure out where the hell these errors are being saved.
Do I need to specify a logfile in the grunt config? I don't see anything like that in the JSHint or grunt documentation.
Gruntfile below, taken pretty much straight from Grunt's "Getting Started". I pulled out qunit because I don't currently have any tests -
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
// define a string to put between each file in the concatenated output
separator: ';'
},
dist: {
// the files to concatenate
src: ['spin/**/*.js'],
// the location of the resulting JS file
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
// the banner is inserted at the top of the output
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
jshint: {
// define the files to lint
files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
// configure JSHint (documented at http://www.jshint.com/docs/)
options: {
// more options here if you want to override JSHint defaults
"curly": true,
"eqnull": true,
"eqeqeq": true,
"undef": true,
globals: {
jQuery: true,
console: true,
module: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('test', ['jshint']);
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
};
0 files lint free does not mean that you have files which have errors, it means that zero files are checked!
the jshint-task will output errors to your console (including file, linenumber and column)
thats where you specify your files to check:
files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
if you change 'gruntfile.js' to 'Gruntfile.js' (case sensitive!) it should check your gruntfile (which you of course already have).

Resources