Grunt自动化构建工具的使用技巧与常见问题解决

Grunt配置报错，折腾半天原来是路径问题

最近在用Grunt做项目自动化构建的时候，遇到了一个让人抓狂的问题。本来想快速搭个基础环境，结果一运行grunt命令就报错了，提示找不到某些任务。这里我踩了个大坑，跟大家分享下。

错误信息大概是这样的：Local Npm module “grunt-contrib-uglify” not found. Is it installed? 后来试了下发现，这其实是路径配置的问题，跟我预想的完全不一样。

排查过程：从插件安装到配置文件

一开始我以为是插件没装对，毕竟报错信息里提到了具体的插件名称。于是赶紧检查package.json，确认devDependencies里确实写了”grunt-contrib-uglify”: “^5.0.0″这些依赖。

然后我又跑去node_modules目录下确认，发现对应的插件文件夹都在，版本号也没问题。这里提醒下，很多人会习惯性地先删掉node_modules重装，其实没必要，亲测这种操作纯属浪费时间。

接着我就开始怀疑是不是Gruntfile.js写得有问题。我的配置大概长这样：

module.exports = function(grunt) {
  grunt.initConfig({
    uglify: {
      my_target: {
        files: {
          'dest/output.min.js': ['src/input.js']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
};

看起来挺正常的，网上找的例子也差不多这个结构。但就是跑不起来，真是愁死我了。

最终解决方案：加载方式要改

折腾了半天才发现，原来现在的Grunt推荐使用新的加载方式。把原来的grunt.loadNpmTasks改成require方式就搞定了：

module.exports = function(grunt) {
  require('load-grunt-tasks')(grunt);

  grunt.initConfig({
    uglify: {
      my_target: {
        files: {
          'dest/output.min.js': ['src/input.js']
        }
      }
    }
  });
};

当然，记得要先安装load-grunt-tasks这个插件：

npm install --save-dev load-grunt-tasks

这里要注意的是，改完之后虽然主要功能都正常了，但偶尔还是会有一些警告信息，不过不影响使用，我也就没继续深究了。

核心代码就这几行

完整的可用配置我贴一下，这是个最精简的能跑通的版本：

const sass = require('sass');

module.exports = function(grunt) {
  require('load-grunt-tasks')(grunt);

  grunt.initConfig({
    sass: {
      dist: {
        files: {
          'css/style.css': 'scss/style.scss'
        }
      }
    },
    watch: {
      scripts: {
        files: ['scss/*.scss'],
        tasks: ['sass']
      }
    },
    uglify: {
      my_target: {
        files: {
          'js/output.min.js': ['js/input.js']
        }
      }
    }
  });

  grunt.registerTask('default', ['sass','watch']);
};

配合这个package.json使用：

{
  "devDependencies": {
    "grunt": "^1.4.0",
    "grunt-contrib-sass": "^1.0.0",
    "grunt-contrib-watch": "^1.1.0",
    "grunt-contrib-uglify": "^5.0.0",
    "load-grunt-tasks": "^5.1.0"
  }
}

技术细节补充：为什么会有这个问题

后来我研究了下源码才知道，早期的Grunt确实是通过grunt.loadNpmTasks这种方式来加载任务的。但随着项目规模变大，这种方式会导致启动速度变慢，因为每个任务都要单独加载一次。

现在推荐的load-grunt-tasks方案会自动扫描package.json里的dependencies和devDependencies，一次性加载所有符合规范的任务。不仅写起来简单，性能也更好。

另外说个小技巧，在配置任务的时候，建议把常用的放前面，比如sass、watch这些，调试起来更方便。像uglify这种不常用的可以往后放。

踩坑提醒：这三点一定注意

• 确保Node.js版本在12以上，太老的版本可能会有兼容性问题
• 安装依赖的时候最好加上–save-dev，方便团队协作
• 配置文件里的路径要仔细检查，尤其是Windows系统，斜杠方向很容易写错

以上是我踩坑后的总结，如果你有更好的方案欢迎评论区交流。说实话Grunt虽然老了点，但胜在稳定，尤其适合一些不需要频繁更新的老项目维护。希望这篇分享能帮到遇到类似问题的同学。