初学grunt

徐泰0421

于 2019-08-04 10:34:46 发布

阅读量144

点赞数

CC 4.0 BY-SA版权

分类专栏： grunt 文章标签： grunt

本文链接：https://blog.youkuaiyun.com/qq_42095204/article/details/98447168

grunt 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨Grunt自动化构建工具的功能与应用，包括文件最小化、整合、依赖管理及自定义任务设置。通过示例讲解如何利用Grunt进行项目配置，实现文件压缩、模板字符串解析等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

check the official docs first

grunt到底可以做些什么？

最小化文件 uglify
文件整合 concat

install node.js && npm

install git(optional),

install vscode editor, in terminal select default shell ( from cmd to git bash )

for example, use following command to copy the repository to your pc:

git clone https://github.com/cowboy/jquery-tiny-pubsub

cd to the folder “jquery-tiny-pub”

use command npm install to install all dependencies

Gruntfile组成，一般用Gruntfile.js。

组成为：

wrapper function 包装器函数:

module.exports = function(grunt) {}

这个算是入口，当在terminal中输入grunt时，node知道加载这个文件。

Project and task configuration 项目和任务配置

如： pkg: grunt.file.readJSON('package.json'), uglify: {}

文档中写到：

In this example, grunt.file.readJSON('package.json') imports the JSON metadata stored in package.json into the grunt config.

我的理解：

pkg的全称是package。 grunt这个对象，后面跟一个file属性，然后一个readJSON方法，应该都是grunt自定义的, 可能只有查看源文件才能明白作者是怎么设计的。看名字readJSON就知道是读json文件去了。

那么读文件的目的是什么？读什么内容呢？

文档中写到：
```
Because <% %> template strings may reference any config properties, configuration data like filepaths and file lists may be specified this way to reduce repetition.
```
这个模板语法可能引用任何配置属性，为了减少重复，配置数据如文件路径和文件列表可能用这种方式来指定
```
You may store any arbitrary data inside of the configuration object, and as long as it doesn't conflict with properties your tasks require, it will be otherwise ignored. 
```
```
Also, because this is JavaScript, you're not limited to JSON;
```
```
you may use any valid JS here. 
```
```
You can even programmatically generate the configuration if necessary.
```
内容等会再看，先看后面的

示例如下：
```
// Project configuration.
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    },
    build: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'build/<%= pkg.name %>.min.js'
    }
  }
});
```
这里提到了模版字符串<% %>，一开始听着名字还以为是js中的模板字符串呢，这看不起不像，为什么呢，可能因为*``*是es6的语法吧，Template literals。至于这个模版字符串怎么定义的，估计只能查看源码了。然后查看api吧，grunt.template。

<%= pkg.name %>应该指的是，去package.json里面去找name这个key。即{“name”: ??}，如我自定义的这个name是gruntproject，然后我在根目录新建一个文件夹src，在里面在建一个文件gruntproject.js。这个src: 'src/<%= pkg.name %>.js'就是原文件的位置。然后dest: 'build/<%= pkg.name %>.min.js'就是目标文件的位置和文件名。当我在terminal中输入grunt uglify，就会输出下面的Logs
```
 Running "uglify:build" (uglify) task
 
 > > 1 file created 30 B → 63 B
 
 Done.
```
再看根目录，就会发现有个文件夹build自动生成了，里面有一个文件gruntproject.min.js。打开这个文件，代码如下：
```
    /*! gruntproject 2019-08-02 */

    +gruntproject.js里面的代码
```
所以这个{options: {banner: ??}}的意思，banner是横幅的意思，然后会在新文件的第一行开始写入，然后基本格式是一个字符串，如“某个字符串\n”，\n是换行的意思。可以看出模版字符串里面的代码是会先解析的，解析完后再合并到字符串里面。
Loading Grunt plugin and tasks 加载grunt插件和任务

是不是说需要grunt插件来处理特定的任务，及uglify任务就必须要grunt-contrib-uglify插件来处理。这时候pkg应该排上用处了
Custom tasks 自定义任务

首要要设置一个默认的任务，即告诉grunt，如果我没有指定要做哪个任务，那么就做这个default任务

实例代码块：
```
// Default task(s).
grunt.registerTask('default', ['uglify']);
```
文档中写到：

You can configure Grunt to run one or more tasks by default by defining a default task. In the following example, running grunt at the command line without specifying a task will run the uglify task. This is functionally the same as explicitly running grunt uglify or even grunt default. Any number of tasks (with or without arguments) may be specified in the array.

即在这个实例中，我可以用grunt default或grunt uglify来执行default任务uglify。

如果我想添加更多的任务，那么就直接在这个数组里面加就可以了

文档中写到：
```
If your project requires tasks not provided by a Grunt plugin, you may define custom tasks right inside the Gruntfile. For example, this Gruntfile defines a completely custom default task that doesn't even utilize task configuration:
```
如果某些情况，没有相应的插件可以处理，那么就可以直接在这个文件里定义。

如下面这个列子就完全没有使用第二步中的任务配置
```
module.exports = function(grunt) {

  // A very basic default task.
  grunt.registerTask('default', 'Log some stuff.', function() {
    grunt.log.write('Logging some stuff...').ok();
  });

};
```
通过查文档api中的grunt.task，grunt.registerTask是grunt.task.registerTask的缩写，然后这里用到了3个参数，用的是这个grunt.task.registerTask(taskName, description, taskList)。然后grunt.log的api中的一个用法grunt.log.write(msg)，看是要看api怎么写的，比如grunt.log.write和grunt.log.writeln的区别。