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:\reporter> 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:\reporter> grunt

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

D:\reporter> grunt

Done.

 

Grunt 使用(一)基础搭建的更多相关文章

  1. 0基础搭建Hadoop大数据处理-编程

    Hadoop的编程可以是在Linux环境或Winows环境中,在此以Windows环境为示例,以Eclipse工具为主(也可以用IDEA).网上也有很多开发的文章,在此也参考他们的内容只作简单的介绍和 ...

  2. SpringBoot学习(一)—— web项目基础搭建

    首先我们在浏览器打开这个网站 https://start.spring.io/ 打开后可以看到以下页面 在这里我们可以快速搭建一个SpringBoot基础项目,填写和选择完相应的信息后,我们点击那个绿 ...

  3. 【原】Spring整合Shiro基础搭建[3]

    1.前言 上个Shiro Demo基础搭建是基于官方的快速入门版本,没有集成其他框架,只是简单的通过Main方法来执行Shiro工作流程,并测试一下比较核心的函数:但在企业开发中一般都会集成Sprin ...

  4. Grunt JS构建环境搭建以及使用入门

    Grunt JS构建环境搭建以及使用入门 1.应用场景 一种自动化任务处理工具,对于日常的需求(代码规则检查.代码合并)可以实现自动化执行,只需要保留package.json和Gruntfile.js ...

  5. 零基础搭建 spring mvc 4 项目(本文基于 Servlet 3.0)

    作者各必备工具的版本如下: Tomcat:apache-tomcat-7.0.63 (下载链接) Java EE - Eclipse:Luna Service Release 1 v4.4.1 (下载 ...

  6. Maven多模块,Dubbo分布式服务框架,SpringMVC,前后端分离项目,基础搭建,搭建过程出现的问题

    现互联网公司后端架构常用到Spring+SpringMVC+MyBatis,通过Maven来构建.通过学习,我已经掌握了基本的搭建过程,写下基础文章为而后的深入学习奠定基础. 首先说一下这篇文章的主要 ...

  7. smarty模板的基础搭建

    1.下载smarty模板,官方即有 2.解压即可.你会得这样的目录 除了libs文件夹其余都可以删掉(不知道有啥用). 3.在当前目录下分别创建templates.templates_c.cache. ...

  8. Python web 框架之 Django 基础搭建服务

    1. 需要安装 Python 和 Django 环境,Python 环境的安装我就不在多说了 2. 安装框架 Django Django 安装,推荐先装个 pip吧,easyinstall也可以,然后 ...

  9. 【原】Shiro框架基础搭建[2]

    简介: 关于搭建一个最基础的shiro网上的例子有很多,这里是记录一下自己尝试去看官方文档所搭建的一个小demo,项目采用的是原始的java静态工程,导入相关jar包后就能运行. 首先进入官网http ...

随机推荐

  1. Word常用定义的变量

    unit U_WordConst;  interface {*******Word窗体状态************} const   wdWindowStateNormal = $00000000;  ...

  2. window下,nodejs 安装 http-server,开启命令行HTTP服务器

    第一步:http://nodejs.cn/  官网下载安装文件,安装nodejs: 第二步:运行中输入cmd进入命令行模式,输入  node -v ,显示版本号,代表安装成功: 第三步:在node命令 ...

  3. 自动化测试之旅--selenium+python--001

    在学习selenium之前,首先感谢网络上的虫师和乙醇老师,或许他们并不知道我这个菜鸟的存在,但是我仍然要感谢他们,因为在学习的路上拜读了许多他们的博客和文章,对于我来说有着很重要的意义,因此在学习之 ...

  4. 1 复习ha相关 + weekend110的hive的元数据库mysql方式安装配置(完全正确配法)(CentOS版本)(包含卸载系统自带的MySQL)

    本博文的主要内容是: .复习HA相关 .MySQL数据库 .先在MySQL数据库中建立hive数据库 .hive的配置 以下是Apache Hadoop HA的总结.分为hdfs HA和yarn HA ...

  5. 关于table-layout的用法

    定义:tableLayout 属性用来显示表格单元格.行.列的算法规则. 自动表格布局:auto(默认) 在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的. 此算法有时会较慢,这是由 ...

  6. Django级联删除的选项

    Django级联删除的选项 Django模型中的on_delete属性具有如下选项: CASCADE 级联删除,也就是被引用的实体被删除后,相关的记录信息都会被删除. PROTECT 阻止删除被引用的 ...

  7. uni-app 页面配置和跳转(一)转

    今天看Dcloud官网更新了个uni-app,据说一套代码三端发布(Android,iOS,微信小程序),果断一试. uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面 ...

  8. 一个Java小菜鸟的实习之路

    博主今年大四,六月份毕业,之前一直对编程感兴趣,于是在大学里自学了Java,(本专业是通信工程).在今年过年的时候,父母让来南方过年,于是博主自己也想着能不能在南方找份java的实习先干着,了解一下行 ...

  9. Cheatsheet: 2017 02.01 ~ 02.28

    Web Debouncing and Throttling Explained Through Examples What is TypeScript? An Absolute Beginner's ...

  10. Java线程入门第三篇

    Java内存模型(jmm) Why:保证多线程正确协同工作 看图说明: 文字解释:线程a和线程b通信过程,首先线程a把本地内存的共享变量更新到主内存中,然后线程b去读取主内存的共享变量,最后更新到自己 ...