你没有理由不学，不学！jQuery用的是grunt，bootstrap用的是grunt，百度UEditor用的是grunt，grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：压缩文件，合并文件，简单的语法检查。GRUNTJavaScript世界的构建工具为什么要使用构建工具？一句话：自动化。对于需要反复重复的任务，如压缩（minification）、编译、单元测试、linting等，自动化工具可以减少你的劳动，简化你的工作。当您在Gruntfile中正确配置任务时，任务运行器将自动为您或您的团队完成大部分无聊的工作。为什么要使用Grunt？Grunt生态系统非常庞大，而且一直在增长。通过大量的插件选择，您可以轻松地使用Grunt实现任何自动化。如果找不到所需的插件，请创建自己的Grunt插件并将其发布到npm。可用的Grunt插件您需要的大部分任务都已开发为Grunt插件，并且每天都在添加更多插件。插件列表页面有一个完整的列表。Grunt和Grunt插件通过Node.js的包管理器npm安装和管理。尽早体验Grunt！安装grunt虽然很简单，但更多的是涉及到如何运行项目。看看下面的演示。第一步肯定是安装Nodejs。方法可以参考我之前关于VUE的文章中的介绍。第二步是安装grunt-CLI。“CLI”译为“命令行”。要使用grunt，首先要在全局环境下安装grunt-cli，使用nodejs“npminstall...”进行安装。输入：**npminstall-ggrunt-cli**注意在macos系统和部分linux系统中，在这句话前面加上“sudo”命令。看起来安装成功了。Step3创建一个简单的网站后，重点是添加两个文件夹package.json添加一些内容“devDependencies”是什么意思？字面意思就是“开发依赖”，也就是我们当前的系统会依赖哪些工具进行开发。现在我一行代码都没写，依赖谁呢？没有人依赖！所以，先写一个空对象就行了。不过下面会慢慢补上的。第四步是安装grunt。输入**npminstallgrunt--save-dev**运行后，有两个地方会发生变化。第一个**“grunt”：“^1.0.1”，**第二个**还有一个文件夹**然后你在控制台运行“grunt”命令。如果您收到警告，则表明grunt正在运行。如下图所示：如果出现这个，说明grunt已经成功安装到该目录下。那么，为什么我们刚才执行grunt的时候会出现Warning提示呢？根据提示，我们了解到的信息是：没有找到任务“default”，如何解决这个问题？——当然要继续看下去。第五步配置Gruntfile.js//packagefunctionmodule.exports=function(grunt){//任务配置，所有插件的配置信息grunt.initConfig({//获取package.json信息pkg:grunt.file.readJSON('package.json'),});//当我们在终端输入grunt时告诉grunt做什么注意顺序grunt.registerTask('default',['jshint','uglify','watch']);};Grunt集成了web的智慧前端开发遍地开花，比你想象的还要强大。它的插件库可以应对你在Web前端开发中遇到的任何事情。第六步使用grunt插件1.使用uglify插件（压缩javascript代码）输入**npminstallgrunt-contrib-uglify--save-dev**看上图有什么问题,uglify标记为uplify，连错三四遍都是犯法的。真想当傻子哭三十遍。您必须清楚地阅读命令词。命令执行后，看下图。"grunt-contrib-uglify":"^3.0.1"既然我们要用uglify来压缩javascript代码，那当然要创建一个js文件来进行实验。我们在现有的“src”文件夹中创建一个新的“test.js”，并编写一些代码来测试创建它的文件。接下来，我们将压缩这个js文件。当然，压缩谁？在哪里压缩？这些都需要配置，配置在Gruntfile.js中。分为三步：第一步在grunt.initConfig方法中配置uglify的配置参数。如下图所示：//打包functionmodule.exports=function(grunt){//任务配置，所有插件的配置信息grunt.initConfig({//获取package.json信息pkg:grunt.file.readJSON('package.json'),//uglify插件配置信息：用于压缩javascript文件uglify:{options:{stripBanners:true,banner:'/*!<%=pkg.name%>*/\n/*!<%=pkg.version%><%=grunt.template.today("yyyy-mm-dd")%>*/\n',},build:{src:'src/test.js',dest:'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'}},});};第二步，在grunt.initConfig方法之后，让grunt加载这个插件。刚配置好，没有加载，怎么用？//告诉grunt我们将使用插件grunt.loadNpmTasks('grunt-contrib-uglify');//当我们在终端输入grunt时告诉grunt做什么注意顺序grunt.registerTask('default',['uglify'');在控制台运行grunt命令，可以到构建文件目录下查看是否有压缩的js文件。以上就是uglify插件的详细安装配置说明。javascript使用uglify压缩，css可以使用cssmin插件压缩。安装和配置方法相同，这里不再赘述。今天不写了。我家宝宝心情不好。等我的心情变美了，我会继续写下去。哇塞，下班还得吃小龙虾，拯救我这颗不美的小心脏。
