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.

     

  • 相关阅读:
    十条jQuery代码片段助力Web开发效率提升
    C#如何释放已经加载的图片 (转)
    获取文件夹下最新文件 (转)
    时间格式转换
    调整ListBox控件的行间距及设置文本格式
    c++builder调用vc的dll
    mws文件中的tab文件改为相对路径
    .net 对配置文件内容的操作
    winform下mapxtreme2008 v7.0 生成release版提示找不到dll问题
    vue实现按字母A-Z选择城市
  • 原文地址:https://www.cnblogs.com/wangweizhang/p/10531848.html
Copyright © 2011-2022 走看看