前端自动化grunt轻松入门

如果你还不了解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很简单，打开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",
  // 项目用到的grunt插件列表及插件版本号
  "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个文件内容分别是:

// a.js内容
function aaa(){
    return "aaa";
}
// b.js内容
function bbb(){
    return "bbb";
}
// c.js内容
function ccc(){
    return "ccc";
}

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

module.exports = function(grunt) {
    // 任务配置
    grunt.initConfig({
        // 配置concat任务
        concat: {
            options: {
                // 配置合并的文件内容之间的分隔符
                separator: ';'
            },
            dist: {
                // 要合并的文件
                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 = function(grunt) {
    // 任务配置
    grunt.initConfig({
        // 配置concat任务
        concat: {
            options: {
                // 配置合并的文件内容之间的分隔符
                separator: ';'
            },
            dist: {
                // 要合并的文件
                src: ['src/a.js', 'src/b.js', 'src/c.js'],
                // 合并为哪个文件
                dest: 'dist/all.js'
            }
        },
　　　　// 配置压缩任务
        uglify: {
            client: {
                files:{
　　　　　　　　　　　　// 压缩后js路径和要压缩的js路径(没错，这里是个数组，可以直接将多个js合并后压缩)
                    "dist/all.min.js": ["dist/all.js"]
                }
            }
        }
    });
    // 加载插件
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('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 = function(grunt) {
    // 任务配置
    grunt.initConfig({
        // 配置watch任务
        watch: {
            // 要监听的文件
            files: ["less/index.less"],
            // 监听的文件发生变化时执行的任务
            tasks: ["less"]
        },
        less: {
            development: {
                options: {
                    // 是否压缩编译后的css
                    compress: true
                },
                files: {
                    // 编译后的css路径和要编译的less路径
                    "less/index.css": ["less/index.less"]
                }
            }
        }

    });
    // 加载插件
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-less');
    // 自定义任务
    grunt.registerTask("default",["watch"]);
} 

执行任务

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 "less\index.less" changed.
Running "less:development" (less) task
File less/index.css created

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

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

grunt中文官网

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