如何使用Grunt（好文）

时间 2019-11-12

标签如何使用 grunt 栏目 Node.js 繁體版

原文原文链接

Grunt 是什么？javascript

Grunt 基于Node.js之上，是一个以任务处理为基础的命令行工具，能够减小优化开发版本为发布版本所需的人力和时间，从而加速开发流程。它的工做原理是把这些工做整合为不一样的任务，在你开发时自动执行。基本上，你可让Grunt完成任何让你厌烦的任务：那些你须要重复进行的手工设置和运行发布的任务。css

工具/原料

NodeJs
Windows系统

方法/步骤

要使用Grunt，第一件事是安装Node.js。（即便你没用过Node.js也不用担忧——你只需安装它让Grunt能运行。）html

安装了Node.js以后，用命令行工具执行如下命令：前端

$ npm install -g grunt-clijava

要确认Grunt是否正确安装，可使用如下命令：node

$ grunt --versionnpm
下一步是在你的项目的根目录下建立package.json和gruntfile.js两个文件。json

建立package.json文件sass

这个JSON文件让咱们指定咱们的开发环境所依赖的必须模块。有了它，项目的全部开发者都能保证安装上一致的必须模块，从而保证全部人拥有同样的开发环境。app

在项目根目录下的pacakge.json文件中写上：

{

    "name" : "SampleGrunt",

    "version" : "0.1.0",

    "author" : "Brandon Random",

    "private" : true,

    "devDependencies" : {

        "grunt" :                   "~0.4.0"

    }

}

而后在命令行工具运行：

$ npm install

该命令告诉npm 须要安装的必须模块，npm会安装它们，自动保存在项目根目录下一个叫作 node_modules 的文件夹里。

建立gruntfile.js文件

gruntfile.js 文件本质上就是一个wrapper函数，接受grunt做为参数：

module.exports = function(grunt){

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json')

    });

    grunt.registerTask('default', []);

};

如今你已经能够在项目根目录下运行grunt命令行工具了。

$ grunt

> Task "default" not found. Use --force to continue.

这里咱们只指定了Grunt做为必须模块，还没定义任何任务。接下来咱们就要指定任务和必须模块。首先来看如何拓展package.json文件。
拓展package.json文件

使用Node.js最好的一点，就是它能够根据package.json文件的内容，一次性查找和安装多个package。要安装咱们项目的全部必须任务，只须在package.json文件中加上如下内容：

{

    "name" : "SampleGrunt",

    "version" : "0.1.0",

    "author" : "Mike Cunsolo",

    "private" : true,

    "devDependencies" : {

        "grunt" :                       "~0.4.0",

        "grunt-contrib-cssmin":         "*",

        "grunt-contrib-sass":           "*",

        "grunt-contrib-uglify":         "*",

        "grunt-contrib-watch":          "*",

        "grunt-cssc":                   "*",

        "grunt-htmlhint":               "*",

        "matchdep":                     "*"

    }

}

那么如何实现安装？你确定已经猜到了：

$ npm install
使用Grunt载入任务

package安装好后，还必须被Grunt载入才能为咱们所用。使用 matchdep，咱们用一行代码就能够自动载入全部任务。这是开发流程的一大优化，由于如今咱们只须把必须任务列表写在package.json一个文件里，便于管理。

在gruntfile.js里，grunt.initConfig之上，写上如下代码：

require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);

要是没有matchdep，咱们就必须为每个必须任务写一次grunt.loadNpmTasks(“grunt-task-name”); ，随着咱们使用的任务的增长，这些载入任务的代码很快就会变得至关繁冗。在Grunt载入这些任务前，咱们还能够指定设置选项。
如今咱们须要建立咱们的HTML文件（index.html）：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta name="viewport"   content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

        <title>Enter your first name</title>

        <link rel="stylesheet" href="build/css/master.css">

    </head>

    <body>

        <label for="firstname">Enter your first name</label>

        <input id="firstname" name="firstname" type="text">

        <p id="namevalidation" class="validation"></p>

        <script type="text/javascript" src="build/js/base.min.js"></script>

    </body>

</html>
用HTMLHint验证HTML

在grunt.initConfig里加入下列设置代码：

htmlhint: {

    build: {

        options: {

            'tag-pair': true,

            'tagname-lowercase': true,

            'attr-lowercase': true,

            'attr-value-double-quotes': true,

            'doctype-first': true,

            'spec-char-escape': true,

            'id-unique': true,

            'head-script-disabled': true,

            'style-disabled': true

        },

        src: ['index.html']

    }

}

一般来讲，一个plugin的设置方法以下：plugin的名称（去掉grunt-contrib-或grunt-前缀），选择使用此plugin的一个或多个对象（在这里能够给不一样文件设置此plugin 的不一样选项），一个选项object，以及plugin要做用的对象。如今，若是咱们用命令行工具运行grunt htmlhint，该plugin就会检查咱们在src里指定的HTML文件，验证其中有没有错误！可是每一个小时都要手动运行几回这个任务，很快就让人以为很繁琐了。
自动化任务运行

watch是一个特殊的任务，它能够在目标文件保存时自动触发一系列任务的运行。在grunt.initConfig里加入如下设置：

watch: {

    html: {

        files: ['index.html'],

        tasks: ['htmlhint']

    }

}

然后，在命令行工具中运行grunt watch命令。如今，你能够试试在index.html里加一行注释，保存文件。你会注意到，保存文件时会自动触发 HTML的验证！这是对开发流程的一大优化：在你写代码时，watch任务就会默默同时为你验证代码，若是验证失败任务就会报告失败（它还会告诉你问题在哪）。

注意grunt watch任务会一直运行，直到命令行工具关闭，或手动中止（control+c在Mac中)。
保持JavaScript极简

让咱们来写一个验证用户输入的名字的JavaScript文件。简便起见，咱们这里只检查其中是否含有非字母的字符。咱们的JavaScript会使用 strict模式，这能够防止咱们写可用但低质量的JavaScript。建立assets/js/base.js文件并在其中写上：

function Validator()

{

    "use strict";

}

Validator.prototype.checkName = function(name)

{

    "use strict";

    return (/[^a-z]/i.test(name) === false);

};

window.addEventListener('load', function(){

    "use strict";

    document.getElementById('firstname').addEventListener('blur', function(){

        var _this = this;

        var validator = new Validator();

        var validation = document.getElementById('namevalidation');

        if (validator.checkName(_this.value) === true) {

            validation.innerHTML = 'Looks good! :)';

            validation.className = "validation yep";

            _this.className = "yep";

        }

        else {

            validation.innerHTML = 'Looks bad! :(';

            validation.className = "validation nope";

            _this.className = "nope";

        }

    });

});

让咱们用UglifyJS来极简化这个源代码，在grunt.initConfig中加上如下设置：

uglify: {

    build: {

        files: {

            'build/js/base.min.js': ['assets/js/base.js']

        }

    }

}

UglifyJS会替换全部的变量和函数名，剔除全部空白和注释，从而生成占据最小空间的JavaScript文件，对发布很是有用。一样地，咱们须要设置一个watch任务来使用它，在watch的设置里加入如下代码：

watch: {

    js: {

        files: ['assets/js/base.js'],

        tasks: ['uglify']

    }

}
如今咱们有了一个静态HTML页面，一个存放Sass和JavaScript源文件的assets文件夹，一个存放优化后的CSS和JavaScript的build文件夹，以及package.json文件和gruntfile.js文件。

至此你已经有了一个不错的基础来进一步探索Grunt。像以前提到的，一个很是活跃的开发者社区在为Grunt开发前端plugin。我建议你如今就到plugin library 去看看那300个以上的plugin。

END

注意事项

Grunt.js 是一个JavaScript 任务运行工具，它能替你完成重复性的任务，如极简化、编译、单元测试和linting。