zoukankan      html  css  js  c++  java
  • 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.

     

  • 相关阅读:
    2049
    2046 ACM 数学
    1290 ACM 数学
    2017 ACM 字符串的本质
    1171 Big Event in HDU 01背包
    2045 数学:排列组合
    git命令(版本控制之道读书笔记)
    mysql:赋予用户权限、查看及修改端口号
    Linux系统的命令别名功能(转)
    回到上次目录、历史命令查找快捷方式及执行时间显示设置、查看系统版本
  • 原文地址:https://www.cnblogs.com/wangweizhang/p/10531848.html
Copyright © 2011-2022 走看看