0

0

js模块化开发—Gruntfile.js详解

angryTom

angryTom

发布时间:2019-11-28 15:38:40

|

2727人浏览过

|

来源于博客园

转载

js模块化开发—Gruntfile.js详解

一、grunt模块简介

grunt插件,是一种npm环境下的自动化工具。对于需要反复重复的任务,例如压缩、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。grunt模块根据gruntfile.js文件中的配置进行任务。
如果在package.json中定义如下命令:

【相关课程推荐:JavaScript视频教程】  

"scripts": {
    "build": "npm install && grunt"
}

因为运行npm run build会先安装devDependencies中定义的一些模块,则运行npm run build这个命令相当于做如下操作:

● npm install grunt-cli -g

● npm install

● grunt

二、gruntfile.js的结构:

● "wrapper" 函数

● 项目和任务配置

● 加载 grunt 插件和任务

● 自定义任务

三、"wrapper" 函数

每一份 Gruntfile.js(和grunt插件)都遵循同样的格式,你所书写的Grunt代码必须放在此函数内:

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

四、项目和任务配置

大部分的Grunt任务都依赖某些配置数据,我们通过grunt.initConfig 方法来配置Grunt任务的参数。
grunt.initConfig 方法的参数是一个JSON对象,你可以在这个配置对象中存储任意的数据。此外,由于这本身就是JavaScript,你还可以在这里使用任意的有效的JS代码。甚至你可以用模板字符串来引用已经配置过的属性,例如:

// 项目和任务配置
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'), //获取 package.json 中的元数据(js代码)
  proj:{
    name:'hello',
    description:'a hello demo'
  },
  hello: {
    options: {
      name: '<%= proj.name %>'  //用<% %>模板字符串匹配hello
    },
    srcs: ['1.txt', '2.txt']
  }
});

在grunt.initConfig 方法中配置的属性,在任务模块中,可用grunt.config方法进行访问,例如:

grunt.config("proj.name");

另外,grunt任务模块会自动根据任务名来提取配置对象中和任务名对应的属性,比如定义任务hello,则在配置对象对应的属性"hello"中配置任务执行函数中所需用到的配置和数据。

95Shop仿醉品商城
95Shop仿醉品商城

95Shop可以免费下载使用,是一款仿醉品商城网店系统,内置SEO优化,具有模块丰富、管理简洁直观,操作易用等特点,系统功能完整,运行速度较快,采用ASP.NET(C#)技术开发,配合SQL Serve2000数据库存储数据,运行环境为微软ASP.NET 2.0。95Shop官方网站定期开发新功能和维护升级。可以放心使用! 安装运行方法 1、下载软件压缩包; 2、将下载的软件压缩包解压缩,得到we

下载

五、加载grunt插件任务

为了减少重复劳动,我们可以加载已有的插件任务。

1.加载自己私有的grunt插件

可将自己定义的一些task脚本放在同一个目录下,通过grunt.loadTasks方法从指定目录加载该目录下所有的grunt任务脚本。

2.加载在npm中发布的grunt插件

像 grunt-contrib-copy和grunt-contrib-uglify这些常用的任务都已经以grunt插件的形式被开发出来了,且被发布在npm公开库中,只要在 package.json 文件中将需要使用的插件列在dependency中,并通过npm install安装之后,就可以直接加载该任务。

// 加载能够提供"copy"任务的插件。
grunt.loadNpmTasks('grunt-contrib-copy');

3.直接加载所有以"grunt-"打头的插件

npm上有个load-grunt-tasks插件可以用来加载dependency列表中所有以"grunt-"打头的插件。
将需要使用的"grunt-"打头的插件列在dependency中,然后在Gruntfile.js中进行调用。

//Load grunt tasks from NPM packages
load-grunt-tasks

六、自定义任务

1.直接定义任务的行为

grunt.registerTask('hello', 'Show some msg', function() {
  console.log(this.options().name); //输出hello
});

2.定义为任务列表

可以将一个任务定义为一系列任务的组合,这一系列任务将按照顺序执行。

grunt.registerTask('dothings', 'copy and Show some msg', ['copy','hello']);

3.定义默认任务

通过定义 default 任务,可以让Grunt默认执行一个或多个任务。执行 grunt 命令时如果不指定一个任务的话,将会执行默认任务。如进行下面定义的话执行grunt 相当于执行grunt hello。

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

4.定义复合任务

registerMultiTask方法可以定义一个复合任务,复合任务将会对grunt.initConfig 方法中配置的相应属性中除了options外定义的属性依次作为target:data对进行处理。

module.exports = function(grunt) {
    grunt.initConfig({
        Log: {
            options: {
                sep: ';'
            },
            srcs: ['1.txt', '2.txt'],
            dests: ['d1.txt', 'd2.txt']
        }
    });
    grunt.registerMultiTask("Log", function() {
        var options = this.options({ sep: '&' });
        console.log(this.target); 
        console.log(this.data.join(options.sep));
    });
};

执行grunt Log将会输出:

Running "Log:srcs" (Log) tasksrcs1.txt;2.txtRunning "Log:dests" (Log) taskdestsd1.txt;d2.txt

定义任务行为Tips

1.任务内部可以执行其他的任务。

grunt.registerTask('mytask', function() {
  grunt.task.run('task1', 'task2');
  // Or:
  grunt.task.run(['task1', 'task2']);
});

2.定义异步任务

grunt.registerTask('mytask', function() {
  var done = this.async();
  //do something
  done();
});

3.当任务失败时,所有后续任务都将终止

在任务中,当执行失败,可以return false来表明当前任务执行失败,一般,多个任务按顺序执行,如果有任务失败时,所有后续任务都将终止。可以通过在命令行后加上--force来使有任务失败时,后续任务能继续进行。

4.任务中检查前置任务状态

有些任务可以依赖于其他任务的成功执行。通过grunt.task.requires方法来检查其前置任务是否已经执行,并且没有失败。

5.任务中检查配置属性

可以用方法grunt.task.requiresConfig指定一个或者多个字符串或者数组的配置属性为必需的。如果一个或多个必需的配置属性缺失,就通知系统当前任务失败。

本文来自 js教程 栏目,欢迎学习!  

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

0

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

0

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

0

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

1

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

19

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

16

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

17

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

2

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
【web前端】Node.js快速入门
【web前端】Node.js快速入门

共16课时 | 2万人学习

Go语言实战之 GraphQL
Go语言实战之 GraphQL

共10课时 | 0.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号