前端自动化grunt轻松入门

发布时间：2020-12-14 23:52:58 所属栏目：资源来源：网络整理

导读：如果你还不了解grunt，或者只是听过它的名字而没有去研究过它，那么这篇入门级的文章就是为你写的，相信看完你就会爱上grunt！ ? grunt是什么？ ? grunt是一个非常好的自动化工具，你只管codeing，它会自动帮你将代码合并（concat）、压缩（uglify）、语法检

如果你还不了解grunt，或者只是听过它的名字而没有去研究过它，那么这篇入门级的文章就是为你写的，相信看完你就会爱上grunt！

grunt是什么？?

grunt是一个非常好的自动化工具，你只管codeing，它会自动帮你将代码合并（concat）、压缩（uglify）、语法检查（jshint）、自动编译less（contrib-less）和sass（contrib-sass）、压缩图片（contrib-imagemin）、读写拷贝移动文件等等，极大地简化了你的工作，它有很多插件，前面说到的每个功能都是一个插件，如果没有符合你胃口的插件，你可以自己开发并提交到。

要使用grunt，从哪里开始？

OK，相信grunt提供的某些功能还是能吊起你的胃口，grunt和grunt的插件都是通过npm安装和卸载的，npm是Nodejs的包管理器，所以我们首先，有同学在这里就被吓到了，nodejs我完全不会啊，接下来还看得懂吗？放一万个心，完全没问题。安装nodejs很简单，打开nodejs官网，戳中间那个INSTALL按钮就好。安装好了之后打开命令行，不要告诉我你不知道什么叫命令行？OK，按下快捷键win+r键，输入cmd回车，出现一个黑黑的窗口，输入node -v回车之后会显示你刚刚安装好的nodejs版本，那就表示nodejs安装成功了，恭喜你完成了第一步！

接下来需要安装CLI，这是个什么鬼？为什么要装它？不爱问为什么的同学不是好同学。OK，CLI就是grunt的命令行，安装了CLI之后，就可以在任何目录下执行grunt命令了。什么是grunt命令？请继续往下看。

安装CLI命令：

npm install -g grunt-cli

执行完之后

接下来要讲的内容，是一个项目刚刚开始用grunt管理的时候应该怎么去做，就好像你学会了grunt，现在想将grunt应用到手上的项目中去。我们在E盘建一个demo文件夹，这个demo就好比你手上的项目。

首先在项目的根目录下（也就是demo下）新建两个文件：package.json?和?Gruntfile.js。

package.json里面放些什么东西呢？什么项目名称啊、版本号啊、描述之类的，当然最重要的是将项目所用到的grunt插件放到它的devDependencies字段内，它大概长这样：

"name": "demo""version": "1.0.0""description": "这就是个demo" "devDependencies""grunt": "^0.4.5""grunt-contrib-concat": "~0.3.0""grunt-contrib-copy": "^0.8.0""grunt-contrib-jshint": "^0.11.2""grunt-contrib-requirejs": "~0.4.1""grunt-contrib-uglify": "~0.2.1""grunt-contrib-watch": "^0.6.1"

当然了，如果你知道插件的版本号，可以直接写在这里面，如果不知道，可以在安装插件的时候在命令行后面加一个命令“--save-dev”让它自动保存在这里。

Gruntfile.js是用来配置grunt任务的，它还可以用来加载grunt插件。看到这里不明白不要紧，后面还会说。

配置好了package.json，回到命令行，切换到demo根目录下（怎么切换？直接输入E:然后回车就切换到E盘了，然后输入cd demo回车就打开demo目录），执行下面的命令会自动安装package.json里配置的grunt插件，现在知道package.json的用处了吧，执行命令前先把package.json里那句注释去掉，不然会报错

npm install

安装完后，demo里面会多出来一个node_modules文件夹，里面就是刚刚安装的grunt插件了

OK，安装步骤到这里结束，下面开始真正使用grunt的阶段了。

任务配置——文件合并

什么是任务？每个grunt插件都是一个任务，安装了上面那么些插件，都有些什么用？先来看第一个插件"grunt-contrib-concat"，它是用来合并文件的，下面看看它怎么用的吧。

先在demo下新建一个src文件夹，在里面新建3个js文件分别叫a.js、b.js和c.js；3个文件内容分别是:

"aaa" "bbb" "ccc"

那么怎么用插件"grunt-contrib-concat"来合并这3个文件呢？请在Gruntfile.js里面写入下面的内容：

module.exports = separator: ';' src: ['src/a.js','src/b.js','src/c.js' dest: 'dist/all.js' grunt.loadNpmTasks('grunt-contrib-concat'

保存之后在命令行里输入grunt concat回车，命令行输出“File 'dist/all.js' created”就表示文件合并成功了！就这么简单！

demo文件夹下会多出一个dist文件夹，里面就是合并好的文件all.js

到这一步你已经学会了grunt的基本用法了，其它任务也都是两步：一配置任务，二调用任务执行，而且任务配置好了以后只要调用命令执行就好了，一劳永逸啊。

也许你还不太理解上面Gruntfile.js的配置怎么来的？Gruntfile.js包括四个部分：

"wrapper" 函数
任务配置
加载grunt插件和任务
自定义任务

从上面的配置已经可以看得很清楚了，最外层的函数就是"wrapper"函数，任务配置即grunt.initConfig({……})这一段，grunt.loadNpmTasks(插件名称)用于加载grunt插件和任务的，最后一个自定义任务在哪呢？

自定义任务：grunt.registerTask(taskName,description,taskFunction)接收三个参数，第一个是任务名称，第二个是任务描述，第三个是任务执行时执行的函数。当第二个参数是数组时，数组内可以传入其它任务名称，当执行自定义任务时，就会执行数组内的任务。

任务配置里面配置了哪个任务，那么下面就要用grunt.loadNpmTasks加载对应的插件，这里配置的是concat这个任务，因此下面对应加载grunt-contrib-concat插件。任务配置是以任务名称命名的属性，grunt.initConfig中可以配置多个任务，每个任务的具体配置参数可以到找到对应的插件进行查看。

任务配置——代码压缩

接下来我们来配置多个任务，将合并后的js压缩，压缩js的插件"grunt-contrib-uglify"在package.json有配置过，在执行npm install命令的时候已经安装好了，下面开始配置：

module.exports = separator: ';' dest: 'dist/all.js'　　　　// uglify: { client: { files:{
　　　　　　　　　　　　// "dist/all.min.js": ["dist/all.js" grunt.loadNpmTasks('grunt-contrib-concat''grunt-contrib-uglify' grunt.registerTask("build",["concat","uglify"

执行自定义任务build

grunt build

输出的all.min.js就是合并且压缩后的代码

任务配置——文件watch+自动编译less

最后，来做一个自动编译less的案例，这个案例需要用到watch插件和less插件，这俩插件之前没有安装，那么现在安装一下

npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-less --save-dev

后面的“--save-dev”会将这个插件及其版本号保存到package.json。安装完成后在Gruntfile.js加入配置：

module.exports = files: ["less/index.less" tasks: ["less" compress: "less/index.css": ["less/index.less"

});
</span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 加载插件</span>
grunt.loadNpmTasks('grunt-contrib-watch'<span style="color: #000000;"&gt;);
grunt.loadNpmTasks(</span>'grunt-contrib-less'<span style="color: #000000;"&gt;);
</span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 自定义任务</span>
grunt.registerTask("default",["watch"<span style="color: #000000;"&gt;]);

}<span style="font-family: verdana,Arial,Helvetica,sans-serif; font-size: 14px; line-height: 1.5; background-color: #ffffff;">?

执行任务

grunt

注意：因为配置里面自定义任务设置了default即默认任务为watch，所以命令行里输入grunt和grunt watch的效果是一样的。执行后，命令行输出

Running "watch" task
Waiting...

表示正在监听，切换到index.less去新增一些样式然后保存，watch监听到index.less有变化输出

Completed in 1.560s at Fri Jun 26 2015 23:41:22 GMT+0800 (中国标准时间) - Waitin
g...
>> File "lessindex.less" changed.
Running "less:development" (less) task
File less/index.css created

同时执行了less编译任务，在less文件夹自动生成了index.css。以前用考拉（一个less编译软件）编译less，经常写了几行样式发现软件没有打开，换做grunt之后就方便多了。

以上就是本次要分享的全部内容了，是不是很轻松就入门了？如果本文对你有所帮助，麻烦点个赞吧！

by: from：http://www.cnblogs.com/wangmeijian/ 转载请保留署名及出处！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!