grunt: how to generate jshint output as HTML - javascript

I'm trying to run jshint using grunt. This works, but now I would like the output to be HTML. Here is my grunt file
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
jshint: {
all: ['Gruntfile.js', 'src/*.js']
, options: {
//reporter: 'jslint'
reporter:'checkstyle'
, reporterOutput: 'jshint.html'
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
};
Running this grunt taks, the output is in XML. Any suggestion how to turn this into something that outputs HTML ?
Thanks a lot

You would need to write a custom reporter. Check the jshint docs on writing custom reporters: http://jshint.com/docs/reporters/ Then you can specify the path to the reporter with:
options: {
reporter: '/path/to/custom/html/reporter',
reporterOutput: 'jshint.html'
}

You can use jshint reporter from nodejs
This generates output in HTML
https://www.npmjs.com/package/jshint-html-reporter
Include this in your GruntFile.js
grunt.initConfig({
jshint: {
options: {
reporter: require('jshint-html-reporter'),
reporterOutput: 'jshint-report.html'
},
target: ['file.js']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', ['jshint']);

Related

How to read an external file list with grunt

I'm trying to concatenate and then babelify and uglify files with Grunt.
I'd like to read an external file list, from a file where the files are written one for each line, newline separated.
I'm trying to use the following GruntFile.js, but Grunt says (after I added the src=['<%= jsFiles.toString().split("\n") %>'] line):
Running "browserify:dist1" (browserify) task
Warning: An error occurred while processing a template (Invalid or unexpected token). Use --force to continue.
Where is the error?
This is the GruntFile.js
module.exports = function(grunt) {
grunt.initConfig({
jsFiles: grunt.file.read('scripts/s.list'),
env: {
prod: {
NODE_ENV: 'production'
}
},
browserify: {
dist1: {
options: {
transform: [
['babelify', {presets: ['es2015']}]
]
},
src: ['<%= jsFiles.toString().split("\n") %>'],
dest: '/WebContent/js/libs/s.bundle.js'
},
},
uglify: {
my_target1: {
files: {
'/WebContent/js/libs/s.bundleuglified.js': ['/WebContent/js/libs/s.bundle.js']
}
},
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-env');
grunt.registerTask('default', ['release']);
grunt.registerTask('release', ['env', 'browserify', 'uglify']);
};
Edit: I added a backslash to \n and the error has gone, but the babelify task gives me an empty file...
Edit2: I was able to read the file list using the following two lines at the beginning of the GruntFile.js
const jsFiles = grunt.file.read('scripts/s.list');
const jsFilesArray = jsFiles.toString().split("\n");
and then
src: jsFilesArray.slice(0, jsFilesArray.length-1),
because the last element was '' and it gave the error Warning: must provide pattern” as Beniamin H suggested.
Edit3: I found that the babelify task was reading the files in alphabetical order, so I had to first concat them, as explained here, and then babelify and uglify
You don't need to use any '<%= %>'. The file is read synchronously into jsFiles property and it can be used immediately. You may want to specify encoding for grunt.file.read to get a string: https://gruntjs.com/api/grunt.file#grunt.file.read

Referencing a module / script when using npm and grunt

I'm looking into npm, grunt and bower, and I've made my first task which looks like this.
module.exports = function(grunt){
grunt.initConfig({
concat: {
options: {
separator: ';',
},
dist: {
src: ['node_modules/jquery/dist/jquery.js', 'node_modules/handlebars/dist/handlebars.js'],
dest: 'dist/scripts.js',
},
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
};
I was wondering if there's an easier/better way of adding the scripts. So that instead of typing the whole path you could just do src: [jquery, 'handlebars'],
and if bower is of any use regarding this?
Thank you.

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 js-hint: write output file of errors not working

I'm trying to use grunt with jshint and jshint-log-reporter, and can't get it to write the output file.
I have installed jshint and jshint-log-reporter.
My Gruntfile.js looks like this:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
options: {
jshintrc : '.jshintrc',
reporter: require('jshint-log-reporter'),
reporterOutput: 'WebContent/js/report.log'
},
files: {
src: ["WebContent/js/**/*.js"]
}
}......
When i execute grunt, the jshint task seems to work, BUT- no file is created or edited.
What am i doing wrong?
Thanks

Grunt - not able to minifiy js file

I am running grunt on my app to jshinting and minification, In which jshint is working but the minification command not working at all. getting error like this:
D:\grunt>grunt min
Warning: Task "min" not found. Use --force to continue.
Aborted due to warnings.
here is my config file:
module.exports = function(grunt){
// Project configuration.
grunt.initConfig({
jshint: {
options: {
curly: true,
eqeqeq: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
}
},
myFiles: ['js/**/*.js']
},
min:{
dest : {
src:'js/app.js',
dest:'js/app.min.js'
}
},
});
// Each plugin must be loaded following this pattern
grunt.loadNpmTasks('grunt-contrib-jshint');
}
In this project I have the modules installed is :
grunt, grunt-contrib-jshint, jshint - I don't know the wrong what i do..
Any one help me to figure-out the issue please.
thanks in advance!
To minify files you need, for example, uglify.
Install it with this command:
npm install grunt-contrib-uglify --save-dev
Then, add it in your Gruntfile
grunt.loadNpmTasks('grunt-contrib-uglify');
Finally, you have to change the code of your Gruntfile:
grunt.initConfig({
jshint: {
options: {
curly: true,
eqeqeq: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
}
},
myFiles: ['js/**/*.js']
},
uglify:{
dest : {
files: {
'js/app.min.js': ['js/app.js']
}
}
},
});
Regards.
You need to install a minify task like
grunt-contrib-uglify
in order to minify the files.
More on Grunt-contrib-uglify
Sample Grunt File using uglify

Categories