我的grunt学习笔记

时间:2024-08-02 19:06:50

什么是grunt?

   Grunt是一个JavaScript任务运行器,用于自动执行频繁任务(如压缩,编译,单元测试)的工具。它使用命令行界面来运行在文件中定义的自定义任务(这个文件称为Gruntfile)。 Grunt由Ben Alman创建,用Node.js编写。它通过npm分发。现在,Grunt生态系统中有超过5,000个插件可用。

如何使用grunt?

基本概念

1.CLI(Command-line interface):Grunt的命令行界面(CLI)可以通过npm全局安装。执行grunt命令将加载并运行当前目录中本地安装的Grunt版本。因此,我们可以在不同的文件夹中维护不同版本的Grunt,并根据需要执行相对应的版本。安装grunt-cli只是将grunt命令放在系统路径中,允许它从任何目录运行。安装grunt-cli不会安装Grunt任务运行器! Grunt CLI的工作很简单:运行已经安装在Gruntfile文件目录内的Grunt版本。所以允许多个版本的Grunt同时安装在同一台机器上。

2.package.json文件:包含项目的元数据,包括名称,版本,描述,作者,许可证及其依赖项(项目所需的Grunt插件)。所有依赖项都列在dependencies或devDependencies部分中。

3.Gruntfile文件:一个名为“Gruntfile.js”或“Gruntfile.coffee”的有效JavaScript或CoffeeScript文件,其中包含用于配置任务,加载现有插件以及创建自定义任务的代码。

4.任务运行:任务是执行指定作业的模块。它们在Gruntfile中定义。 开发人员可以从现有的Grunt插件加载预定义的任务以及编写自定义代码,以根据需求定义自己的任务。一旦定义,只需执行grunt <taskname>即可从命令行(CLI)运行这些任务。如果Gruntfile中定义的<taskname>是'default',那么只需执行grunt即可。即不加参数是执行默认的任务。

安装cli

  安装命令很简单,全局安装(首先需要先安装npm到全局),直接输入:

npm install -g grunt-cli

  npm是包管理的工具,-g表示全局安装,如果直接使用npm install它会找当前目录下是否有package.json,然后在当前目录安装这个文件里面配置的相关依赖。如果使用npm install <module name> 会安装指定的模块。

建立一个package.json

  这边我首先先在E盘的目录下面新建一个gruntTest的测试文件夹:

我的grunt学习笔记

  输入:

npm init

  接着会让你填写相关的信息,选择默认的,直接按enter下一步!

我的grunt学习笔记

  可以见到生成了相关的文件:

我的grunt学习笔记

安装grunt和相关插件

  安装相关的package的命令格式为:

npm install <module> --save-dev

  --save-dev的意思是把安装的module保存到package.json文件的依赖之中。

  首先需要安装grunt,安装后可以使用grunt命令来跑(因为已经安装了grunt-cli)当前目录下所安装的grunt版本。

npm install grunt --save-dev

  如果你想安装JSHint任务模块,运行npm install grunt-contrib-jshint --save-dev即可,可以按需求添加对应的任务模块(也叫插件)。

编写Gruntfile

  Gruntfile.js或Gruntfile.coffee文件是一个有效的JavaScript或CoffeeScript文件,它位于项目的根目录中,位于package.json文件旁边,做项目时应该与项目源码一起提交。

  Gruntfile.js一般由以下四部分组成

  1)wrapper“包装”函数

  2)项目和任务配置

  3)加载Grunt插件和任务

  4)自定义任务

  以下展示一份压缩的任务的Gruntfile.js的书写,

 module.exports = function(grunt) {

   // 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: { },
build: {
src: 'js/src/vue.js',
dest: 'js/dest/vue.min.js'
}
}
}); // 加载提供'uglify'任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify'); // 默认的任务
grunt.registerTask('default', ['uglify']); };

  先安装压缩的插件

npm install grunt-contrib-uglify --save-dev

  然后运行输入grunt,即可运行相关的默认任务,

我的grunt学习笔记

  可以看出vue.js从源目录被压缩到对应的目标目录。

我的grunt学习笔记

后面博客会继续学习grunt常用的相关插件。