javascript - 如何调试 Gruntfile.js？

Question

我刚刚创建了 Gruntfile.js，它在运行 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

(用“??????????”代替此处的帖子)

现在我不知道我做错了什么，因为上面的堆栈跟踪没有给我任何相关信息(据我所知)。

有没有办法从总体上调试 Gruntfile.js？

这是我的 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 1

首先你的 grunt 配置有 2 个语法错误:

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',
},

在这里:

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

其次，您可以使用 Visual Studio Code 进行调试:点击左边的Debug按钮，新建一个配置文件。将configuration中的“program”修改为grunt bin文件，如下，然后开始调试:

"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
    },