Marc M Marc M - 5 months ago 90
Javascript Question

How to debug Gruntfile.js?

I've just created my Gruntfile.js which shows me the following Error when running

grunt -v
:

Reading "Gruntfile.js" Gruntfile...OK

Registering Gruntfile tasks.
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected identifier
>> at exports.runInThisContext (vm.js:53:16)
>> at Module._compile (module.js:373:25)
>> at Object.Module._extensions..js (module.js:416:10)
>> at Module.load (/home/marc/repo/??????????/node_modules/grunt/node_modules/coffee-script/lib/coffee-script/register.js:45:36)
>> at Function.Module._load (module.js:300:12)
>> at Module.require (module.js:353:17)
>> at require (internal/module.js:12:17)
>> at loadTask (/home/marc/repo/??????????/node_modules/grunt/lib/grunt/task.js:316:10)
>> at Task.task.init (/home/marc/repo/??????????/node_modules/grunt/lib/grunt/task.js:437:5)
>> at Object.grunt.tasks (/home/marc/repo/??????????/node_modules/grunt/lib/grunt.js:111:8)
>> at Object.module.exports [as cli] (/home/marc/repo/??????????/node_modules/grunt/lib/grunt/cli.js:27:9)
>> at Object.<anonymous> (/usr/lib/node_modules/grunt-cli/bin/grunt:44:20)
>> at Module._compile (module.js:409:26)
>> at Object.Module._extensions..js (module.js:416:10)
>> at Module.load (module.js:343:32)
>> at Function.Module._load (module.js:300:12)
>> at Function.Module.runMain (module.js:441:10)
>> at startup (node.js:139:18)
>> at node.js:968:3


(substituted '??????????' for that post here)

Now I don't know what I did wrong since the stack-trace from above gives me no information about that (as fa I understand).

Is there a way to debug the Gruntfile.js in general?

Here is my Gruntfile.js:

module.exports = function(grunt) {

//Initializing the configuration object
grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),

/**
* Set project object
*/
project: {
app: './app',
output: './dist',
styles_path: './app/assets/stylesheets',
styles_output_path: './dist/assets/css'
js_path: './app/assets/js',
js_output_path: './dist/assets/js',
images_path: './app/assets/images',
images_output_path: './dist/assets/images',
},

// Task configuration
/**
* ------------------- concat
*/
concat: {

options: {
separator: ';',
},
js_main: {
src: [
'./bower_components/jquery/dist/jquery.js',
'./bower_components/bootstrap/dist/js/bootstrap.js',
'<%= project.js_path %>/*.js'
],
dest: '<%= project.js_output_path %>/main.js',
}
},
/**
* ------------------- copy
*/
copy: {
main: {
files: [

// includes files within path and its sub-directories
{
expand: true,
flatten: true,
src: ['<%= project.app %>/*.html'],
dest: '<%= project.output %>/',
filter: 'isFile'
}
],
},
images: {
files: [

// includes files within path and its sub-directories
{
expand: true,
flatten: true,
src: ['<%= project.images_path %>/**'],
dest: '<%= project.images_output_path %>/',
filter: 'isFile'
}
],
},
},
/**
* ------------------- Project banner
*/
// tag: {
// banner: '/*!\n' +
// ' * <%= pkg.name %>\n' +
// ' * <%= pkg.title %>\n' +
// ' * <%= pkg.url %>\n' +
// ' * @author <%= pkg.author %>\n' +
// ' * @version <%= pkg.version %>\n' +
// ' * Copyright <%= pkg.copyright %>. <%= pkg.license %> licensed.\n' +
// ' */\n'
// },
/**
* ------------------- Sass
*/
sass: {
dev: {
options: {
style: 'expanded',
// banner: '<%= tag.banner %>'
},
files: {
'<%= project.styles_output_path %>/app.css': '<%= project.styles_path %>/main.scss'
}
},
dist: {
options: {
style: 'compressed'
},
files: {
'<%= project.styles_output_path %>/app.css': '<%= project.styles_path %>/main.scss'
}
}
},
/**
* ------------------- uglify
*/
uglify: {
options: {
mangle: false // Use if you want the names of your functions and variables unchanged
},
main: {
files: {
'<%= project.js_output_path %>/main.js': '<%= project.js_output_path %>/main.js',
}
}
}

/**
* ------------------- Filesystem watcher
*/
watch: {
html_main: {
files: ['<%= project.app %>/*.html'], //watched files
tasks: ['copy'], //tasks to run
options: {
livereload: true //reloads the browser
}
},
js_main: {
files: [
//watched files
'<%= project.js_path %>/**'
],
tasks: ['concat:js_main', 'uglify:main'], //tasks to run
options: {
livereload: true //reloads the browser
}
},
sass: {
files: ['<%= project.styles_path %>/*.scss'], //watched files
tasks: ['sass:dev'], //tasks to run
options: {
livereload: true //reloads the browser
}
}
}
});

// Plugin loading
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');

// Task definition
grunt.registerTask('default', ['watch']);
// grunt.registerTask('build', ['copy', 'sass:dev', 'concat:js_main', 'uglify:main']);

};

Answer

First your grunt config has 2 syntax errors:

project: {
    app: './app',
    output: './dist',
    styles_path: './app/assets/stylesheets',
    styles_output_path: './dist/assets/css'  <== missing comma here
    js_path: './app/assets/js',
    js_output_path: './dist/assets/js',
    images_path: './app/assets/images',
    images_output_path: './dist/assets/images',
},

And here:

uglify: {
    options: {
        mangle: false // Use if you want the names of your functions and variables unchanged
    },
    main: {
        files: {
            '<%= project.js_output_path %>/main.js': '<%= project.js_output_path %>/main.js',
        }
    }
} <== another missing comma here

Secondly you can use Visual Studio Code to debug: Click on the Debug button on the left, create a new configuration file. Change the "program" in configuration to the grunt bin file, like below, then start debugging:

"configurations": [
    {
        "name": "Launch",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/node_modules//grunt/bin/grunt",
        "stopOnEntry": false,
        "args": [],
        "cwd": "${workspaceRoot}",
        "preLaunchTask": null,
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "env": {
            "NODE_ENV": "development"
        },
        "externalConsole": false,
        "sourceMaps": false,
        "outDir": null
    },
Comments