Grunt 使用基础搭建

Posted wangweizhang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Grunt 使用基础搭建相关的知识,希望对你有一定的参考价值。

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.

 

 

 

 

以上是关于Grunt 使用基础搭建的主要内容,如果未能解决你的问题,请参考以下文章

前端开发环境搭建 grunt bowerrequirejs anjular

Grunt环境搭建及使用

用grunt搭建自动化的web前端开发环境-完整教程

用grunt搭建自动化的web前端开发环境-完整教程

用grunt搭建自动化的web前端开发环境-完整教程

用grunt搭建自动化的web前端开发环境-完整教程