Grunt 使用基础搭建

Posted 2021-02-13 wangweizhang

jQuery在使用grunt，bootstrap在使用grunt，百度UEditor在使用grunt，你没有理由不学、不用！废话不多说，直接上干货。

 

1、安装node.js并检查node -v 和 npm -v 

注意：node版本需在v0.8.0及以上版本

 

2、安装Grunt-Cli

npm install -g grunt-cli

 

3、验证grunt-cli是否安装成功

输入grunt命令

//出现以下描述代表安装成功

grunt-cli: The grunt command line interface (v1.3.2)

Fatal error: Unable to find local grunt.

If you‘re seeing this message, grunt hasn‘t been installed locally to
your project. For more information about installing and configuring grunt,
please see the Getting Started guide:

https://gruntjs.com/getting-started

 

4、创建项目

//目录解构

reporter                      //根目录

    ++++build                 //打包输出目录
        -------打包生成的文件

    ++++src                   //源代码开发文件目录
        -------add.js
        -------delete.js

Gruntfile.js                  //grunt项目配置文件
package.json                  //项目信息文件（查看依赖）

package.json 内容

{
    "name": "reporter",
    "version": "1.0.0",
    "devDependencies": {
        
    }
}
// name：项目名称
// version：项目版本号
// devDependencies：项目说安装的依赖项

 

5、局部项目安装grunt

//安装方法

D:
eporter> npm install grunt --save-dev

//--save-dev 保存到局部依赖，进入package.json文件

此时package.json

{
    "name": "grunt_demo",
    "version": "1.0.1",
    "devDependencies": {
        "grunt": "^1.0.3" //新增刚刚下载的依赖项
    }
}

 

6、配置Gruntfile.js

module.exports=function(grunt){

  //任务配置，所有插件的配置信息
  grunt.initConfig({
    //获取package.json的信息
    pkg:grunt.file.readJSON(‘package.json‘)
  });
 
  //告诉grunt当我们在终端中输入grunt时需要做些什么（注意先后顺序）
  grunt.registerTask(‘default‘,[]);
};

命令行执行grunt

D:
eporter> grunt

//出现以下代表成功配置了grunt基础框架

D:
eporter> grunt

Done.