什么是Grunt

摘要:
Grunt,简而言之,就是运行在Node.js上面的任务管理器,其可以在任何语言和项目中自动化指定的任务。我们可通过npm来安装Grunt和Grunt插件为什么使用Grunt?注意安装了grunt-cil并不意味这安装了Grunt任务管理器!GruntCLI是运行安装在邻近Gruntfile的Grunt版本。这允许了在同一台机器上同时安装不同版本的Grunt。这个Gruntfile.js文件同样需要放置在项目根目录中。你如果需要在coffee脚本中配置任务,你可以同样命名此文件为Gruntfile.coffee。这个函数被Grunt引擎调用,并且作为Grunt配置的入口点。

Grunt,简而言之,就是运行在Node.js上面的任务管理器(task runner),其可以在任何语言和项目中自动化指定的任务。我们可通过npm来安装Grunt和Grunt插件

为什么使用Grunt?

一词概括:自动化。

Grunt帮助你提高重复项目的性能,比如:

安装 Grunt CLI:

为了获得Grunt的更多产品特性,你需要全局安装Grunt's 命令行接口(CLI),运行下面的代码:

npm install -g grunt-cli

上述将你额grunt命令运行在你的系统路径上,这确保了其可以在任何的文件夹下面运行成功。

注意安装了grunt-cil并不意味这安装了Grunt 任务管理器(task runner)!

Grunt CLI是运行安装在邻近Gruntfile的Grunt版本。这允许了在同一台机器上同时安装不同版本的Grunt。

怎样在你的项目中使用Grunt

1.创建项目根目录

首先创建一个空的项目根目录且在目录中创建下面的文件:

  • package.json :这是npm使用的文件,用来存储作为npm模块发布的项目的meta数据。如果我们想要列举Grunt或者Grunt插件,那么我们需要在package.json文件中将此项目作为devDependencies。 这个文件需要放在项目的根目录中,你也可以使用nmp init命令来生成这个文件
  • cruntfile.js这个文件用来设置和定义任务以及加载Grunt插件。这个Gruntfile.js 文件同样需要放置在项目根目录中。 你如果需要在coffee脚本中配置任务,你可以同样命名此文件为 Gruntfile.coffee 。下文中将会讨论这个文件的具体内容。

2.增加Grutn 模块到你的项目中

我们接下来需要使用npm来增加Grunt 模块到你的项目中

运行如下语句

> npm install grunt --save-dev

上述命令安装了Grutn同时也在package,json中创建了一个入口,此入口说明了这个模块将作为devDependency。 被标记为devDependency的模块只能是在开发环境中(development environment)安装的模块。在产品环境(producion environment)中安装它们将被忽略。

理解Gruntfile文件

Gruntfile是一个有效的js或者CooffeeScript文件,放置在项目更目录中,和package.json一起放置,并且需要和你的项目元一起提交。 一个Gruntfile文件包含下面三部分:

1.“包裹(wrapper)”函数

2.项目和任务配置

3.加载的Grunt插件和任务

4.典型任务(custom tasks)

让我们逐一讨论:

关于Gruntfile中的“包裹(wrapper)”函数

wrapper函数是指定到module exports上的封装所有Grunt代码的函数。这个函数被Grunt引擎调用,并且作为Grunt配置的入口点。因此,至此我们的Gruntfile看起来如下:

module.exports =function(grunt) {
  //Do grunt-related things in here
};

所有的Gruntfile和Grunt 插件使用上述基本形式,且你所有的Grunt代码必须写在函数中

Gruntfile中的项目和任务配置

大多数的Grunt任务依赖于赋值到grunt.initConfig方法上的对象中的配置数据。 这就是我门为什么需要为我们需要的插件指定配置参数。我们可以同样指定我们将要适用的配置参数。让我们定义一些随机的配置参数:

module.exports =function(grunt) {
  //Project configuration.
grunt.initConfig({
    //Lets read the project package.json
    pkg: grunt.file.readJSON('package.json'),
    //Some other configs
    someKey: 'Some Value',
    author: 'Modulus.io'});

};

Grunt同样有一些帮助方法;其中的一个就是阅读文件。

所以我们使用grunt.file.readJson 来读取我们的package.json 文件并且存储转义好的对象到pkg key中。

我们同样可以将这些配置值设置成变量,动态化你的配置字符串。如下:

module.exports =function (grunt) {
  //Project configuration.
grunt.initConfig({
    //Lets read the project package.json
    pkg: grunt.file.readJSON('package.json'),
    //Some other configs
    someKey: 'Some Value',
    author: 'Modulus.io',
    filePostfix: '-<%= pkg.name %>-<%= pkg.version %>',
    greetingMessage: 'Running Grunt for project: <%= pkg.name %>, Version: <%= pkg.version %>, Author: <%= author %>'});

};

上面我们使用<%= varName %>来确定string中的动态文本

加载的Grunt以及Grunt 配置

许多通常使用的任务比如concatenation,minificationhe linting对于Grunt插件而言是可用的,只要你在安装npm的时候在package.js中将插件定义成dependency,那么就可以在Gruntfile内部使用。

让我们安装一个简单的插件,grunt-clean到你的项目总共且尝试在Gruntfile中配置。使用下述命令通过vpm来安装这个模块

> npm install grunt-contrib-clean --save-dev

现在我们可以通过grunt.loadNpmTask('pluginName') 方法在我们的Gruntfile中加载这个任务,且做一些所需的配置。现在我们的Gruntfil文件如下:

module.exports =function (grunt) {
  //Project configuration.
grunt.initConfig({
    //Lets read the project package.json
    pkg: grunt.file.readJSON('package.json'),
    //Some other configs
    someKey: 'Some Value',
    author: 'Modulus.io',
    filePostfix: '-<%= pkg.name %>-<%= pkg.version %>',
    greetingMessage: 'Running Grunt for project: <%= pkg.name %>, Version: <%= pkg.version %>, Author: <%= author %>',

    //Configure Clean Module
    clean: ['.tmp', 'dist', 'npm-debug.log']
  });

  //Load the plugin that provides the "clean" task.
  grunt.loadNpmTasks('grunt-contrib-clean');

};

在上面的例子中,我们配置 clean 来删除 .tmp和dist文件夹以及项目根文件的npm-debug.log文件。你可指定任何数量的文件夹或者磁盘。每一个插件都有文档,用来指明必要的配置参数和形式(format)

注意:grunt --help 命令展示出所有可用的任务(tasks)

现在,在项目根目录下面尝试运行以下代码:

> grunt clean

这个命令用来删除特定的文件和配置的文件

Gruntfile中特定的子任务

因为子任务(sub task)被很多的插件支持,所以你同样可以设置子任务。为了理解这个概念,让我们看看下面的例子:

module.exports =function (grunt) {
 ***javascript***
 //Project configuration.
grunt.initConfig({
    //Lets read the project package.json
    pkg: grunt.file.readJSON('package.json'),
    //Some other configs
    someKey: 'Some Value',
    author: 'Modulus.io',
    filePostfix: '-<%= pkg.name %>-<%= pkg.version %>',
    greetingMessage: 'Running Grunt for project: <%= pkg.name %>, Version: <%= pkg.version %>, Author: <%= author %>',

    //Configure Clean Module
clean: {
      npm: 'npm-debug.log',
      temp: ['temp', '.tmp'],
      dist: ['dist', 'out/dist']
    }
  });

  //Load the plugin that provides the "clean" task.
  grunt.loadNpmTasks('grunt-contrib-clean');

};

在参数配置中我们指明了一个有着不同健(keys)的对象,这些健包含npm,temp和dist。

为划分任务成为子任务,我们可以想出很多的随意的名字。 现在我们可以运行子任务(subtasks)来删除所有上述的文件和磁盘,或者来删除一个子集团(subgroup)。下面进行说明:

#删除所有的文件包括npm-debug.log, temp, .tmp, dist, out/dist : grunt clean

#只删除npm-debug.log 文件:grunt clean:npm

#只删除temp文件: grunt clean:temp

#只删除dist, out/dist文件:grunt clean:dist

在上面的例子中,我们特定化了在config中设置的key来运行子任务(subtask)。用来书写key的语法是:

> grunt TaskName:SubTaskKeySpecifiedInConfig

用户自定义任务custom tasks

你可以使用自定义的名字来定义任务的名字。可以给已经存在的任务联合在一起命名亦可只是针对你自己的implementation来命名。如果你想implement自定义的任务,你必须在js中implement

让我们来给已经存在的任务的集合命名,且也给我们自己的implementment命名:

module.exports =function (grunt) {
  //Project configuration.
grunt.initConfig({
    //Lets read the project package.json
    pkg: grunt.file.readJSON('package.json'),
    //Some other configs
    someKey: 'Some Value',
    author: 'Modulus.io',
    filePostfix: '-<%= pkg.name %>-<%= pkg.version %>',
    greetingMessage: 'Running Grunt for project: <%= pkg.name %>, Version: <%= pkg.version %>, Author: <%= author %>. ',

    //Configure Clean Module
clean: {
      npm: 'npm-debug.log',
      temp: ['temp', '.tmp'],
      dist: ['dist', 'out/dist']
    }
  });

  //Load the plugin that provides the "clean" task.
  grunt.loadNpmTasks('grunt-contrib-clean');

  //Lets register a basic task.
  grunt.registerTask('print-info', 'Lets print some info about the project.', function() {
    grunt.log.write(grunt.config('greetingMessage')).ok();
  });

  //Specify a custom task which is combination of tasks.
  grunt.registerTask('my-clean', ['print-info', 'clean:dist', 'clean:npm']);

};

在上述例子中,我们创建了一个用户自定义项目print-info, 且在js中执行它。

我们使用grunt.registerTask()方法。

同时我们也定义了一个用户自定义的任务my-clean,这是其他任务的联合体。

因为你在任务中运行任何的js文件,所以命名有多重可能性。

使用下面的命令来看看哪些任务是可用的:

> grunt --help

你应该可见两个你指定的用户自定义任务(custom tasks),现在你可以运行你的my-clean 任务:

> grunt my-clean

默认任务:

当你木有特别指明任何的文件就在你的项目根目录下面运行grunt,那么代码将寻找默认的任务且运行它。

你可以通过简单的发布一项指令来指定默认的任务

> grunt

指明一个默认的任务,我们简单的注册了一个名字为default的任务。

现在我们的Grutnfile看起来如下:

module.exports =function (grunt) {
 ***javascript***
 //Project configuration.
grunt.initConfig({
    //Lets read the project package.json
    pkg: grunt.file.readJSON('package.json'),
    //Some other configs
    someKey: 'Some Value',
    author: 'Modulus.io',
    filePostfix: '-<%= pkg.name %>-<%= pkg.version %>',
    greetingMessage: 'Running Grunt for project: <%= pkg.name %>, Version: <%= pkg.version %>, Author: <%= author %>. ',

    //Configure Clean Module
clean: {
      npm: 'npm-debug.log',
      temp: ['temp', '.tmp'],
      dist: ['dist', 'out/dist']
    }
  });

  //Load the plugin that provides the "clean" task.
  grunt.loadNpmTasks('grunt-contrib-clean');

  //Lets register a basic task.
  grunt.registerTask('print-info', 'Lets print some info about the project.', function() {
    grunt.log.write(grunt.config('greetingMessage')).ok();
  });

  //Specify a custom task which is combination of tasks.
  grunt.registerTask('my-clean', ['print-info', 'clean:dist', 'clean:npm']);

  //Specify a default task
  grunt.registerTask('default', ['my-clean', 'clean:temp']);

};

官网:https://gruntjs.com/api/grunt

来源:https://blog.xervo.io/introduction-to-grunt

免责声明:文章转载自《什么是Grunt》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Val简介(来源维基百科)Kratos 读源码笔记一(配置加载)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

微信内置浏览器清理缓存方法

给出清除微信浏览器缓存的终极方法:您可以尝试可能不会成功的方法:window。name){varstr=Math.random().toString(36).substr(2);S='+str;//兼容微信浏览器刷新窗口。name='isread';}&lt;3.Android可以打开此网站以清除cache://debugx5.qq。com公司/☆☆...

小米路由器3-R3 刷固件

3-3、大功告成,实测:带机12台,内存占用100MB、CPU使用20%不到满载200M带宽。...

VirtualBox虚拟机下Windows登录密码破解方法(阿里云推荐码:1WFZ0V,立享9折!)

过去两年虚拟机的发展给开发者带来了极大的便利。要安装新环境,只需从其他人复制虚拟机文件即可。我以前在Ubuntu下工作,Windows偶尔也会使用它。所以我在Ubuntu VirtualBox下安装了Windows7。两天前,我在MacAir下打开了VirtualBox并启动了Win7虚拟机。在Win7登录界面输入密码后,系统提示我密码不正确。我只能在最初的...

ArcGIS Server服务状态正在停止。。。问题BUG解决

1、 ArcGISServer服务器存在服务问题:ArcGISServerManager的所有服务都显示为“正在停止…”。N个解决方案1)港口占用问题。端口4000-4002已被其他程序占用,导致服务无法正常启动。您可以通过CMD找到相关PID占用的端口,停止它,然后启动GIS服务。您也可以在安装目录中将其手动更改为D:ProgramFiles ArcGIS...

TensorRT在ubuntu18.04的安装

安装TensorRT前需要安装Cuda和cudnn,安装步骤可以参考ubuntu安装cuda和cudnn。...

JVM内存状况查看方法和分析工具

Java本身提供了多种丰富的方法和工具,帮助开发人员查看和分析GC和JVM内存的状态。同时,开源社区和商业社区也有一些工具来查看和分析GC和JVM内存的状态。在内存分析中,JVisualVM的最大优点是可以通过安装VisualGC插件来分析GC趋势和内存消耗细节。使用JMap查看当前JVM中每一代的内存状态、JVM中对象的内存使用情况,并导出整个JVM中的内...