什么是GRUNT?

基于任务的命令行工具。能做的事包括:

● 验证html,css, javascript
● 压缩css, javascript
● 编译CoffeeScript, TypeScript, etc
● 编译Less

● 等等

Pacakge.json

描述项目的元数据。

{
"name": "",
"version":"0.1.0",
"devDependencies":{
"grunt": "~0.4.1"
}
}

参考:http://package.json.nodejitsu.com/

Gruntfile.js

用来配置和定义GRUNT任务的文件。

"use strict";
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean:{
options:{
force: true
},
output: ['../Source/*/obj/debug']
}
}); grunt.loadNmpTasks('grunt-contrib-clean'); //加载npm任务用来加载特定的Grunt插件,前提是插件必须事先安装好
grunt.registerTask('efault',['clean']);//设置entiry point
};

运行GRUNT脚本

grunt taskName -v

搭建GRUNT环境

→ 安装Node.js  http://nodejs.org/

→ 安装Node Package Manager, https://npmjs.org/

→ 安装GRUNT cli

npm intstall -g grunt-cli
 
→ 安装GRUNT到本地项目文件夹

导航到项目文件夹输入:npm install grunt --save-dev
  创建完毕项目文件夹里多了一个node_modules文件夹
 
→ 创建项目package.json文件

在项目根文件夹下创建package.json文件

{
"name":"helloGrunt",
"version": "0.1.0",
"devDependencies" : {
"grunt": "~0.4.1"
}
}

→ 安装插件

导航到项目文件夹
npm install grunt-contrib-clean --save-dev

安装完毕,在package.json中有了变化:

{
"name": "helloGrunt",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-clean": "^0.7.0"
}
}

→ 在项目根文件夹下创建Gruntfile.js文件

'use strict';

module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: { //命令行运行的时候,会删除掉ToBeCleaned下的子文件夹
output: ['ToBeCleaned/*']
}
}); grunt.loadNpmTasks("grunt-contrib-clean"); grunt.registerTask("default",['clean']);
}

以上,任务的名称为default, 执行的任务是clean

→ 创建在项目根文件夹下创建ToBeCleaned文件夹,并创建几个文件

→ 导航到项目根目录下

grunt default -v

初识GRUNT的更多相关文章

  1. 利用 Grunt (几乎)无痛地做前端开发 (一)之单元测试

    前言 如果你想开发一个js应用,甭管多简单,都要先创建整个宇宙 来看看我们的Javascript小宇宙: 确定如何根据需求.功能划分模块,如何将代码分成多个文件开发,合成一个发布 保证上一条的同时,使 ...

  2. 我的Grunt之旅-初识gruntfile文件

    时间:2018-03-06 18:23  事件:配置 gruntfile.js文件 首先,回忆一下之前的点,grunt项目下面必须有两个文件  ,第一个  package.json ,第二个  Gru ...

  3. 解读ASP.NET 5 & MVC6系列(2):初识项目

    初识项目 打开VS2015,创建Web项目,选择ASP.NET Web Application,在弹出的窗口里选择ASP.NET 5 Website模板创建项目,图示如下: 我们可以看到,此时Web ...

  4. grunt实用总结

    grunt实用总结 文章梗概如下: 如何让Grunt在项目跑起来 初识:Gruntfile.js 术语扫盲:task & target 如何运行任务 任务配置 自定义任务 文件通配符:glob ...

  5. 初识node.js(通过npm下载项目依赖的包的过程)

    一.初识node.js 简单的说Node.js 就是运行在服务器端的JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一个事 ...

  6. 初学seaJs模块化开发,利用grunt打包,减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  7. grunt配置任务

    这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...

  8. 快速开发Grunt插件----压缩js模板

    前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...

  9. 是时候搁置Grunt,耍一耍gulp了

    也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...

随机推荐

  1. csfb

    SELECT CSDBTOGSMALLSuccessRate,CSFBTOGSMMODelay,CSFBTOGSMMODropRate,CSFBTOGSMMOFRStartCount,CSFBTOGS ...

  2. 利用backtrace和ucontex定位segment错误【转】

    转自:https://blog.csdn.net/gqtcgq/article/details/53883546 C程序运行时,经常会碰到”segmentfault”错误.这是由于程序中非法访问内存导 ...

  3. linux usb枚举过程分析之守护进程及其唤醒【转】

    转自:http://blog.csdn.net/xuelin273/article/details/38646765 usb热插拔,即usb设备可以实现即插即用,像U盘一样,插到电脑里就可以用,不用时 ...

  4. linux C守护进程编写

    linux编程-守护进程编写 守护进程(Daemon)是运行在后台的一种特殊进程.它独立于控制终端并且周期性地执行某种任务或等待 处理某些发生的事件.守护进程是一种很有用的进程. Linux的大多数服 ...

  5. 首发:极简的Centos主机监控方法,分分钟即可使用【转】

    需求天天有,今年事更多.硬盘测试刚刚完成,就又来了性能监控的需求.一般我们生产就用zabbix了,用起来还行,就是蛮多脚本要写.开发和测试都是分散的,经常还要重装系统,用zabbix就算了,开发和测试 ...

  6. vs中如何统计整个项目的代码行数

    在一个大工程中有很多的源文件和头文件,如何快速统计总行数? ------解决方案--------------------b*[^:b#/]+.*$^b*[^:b#/]+.*$ ctrl + shift ...

  7. 部分Web服务器信息对比

    本文参考wikipedia的Web服务器比较页面的数据,选取了其中自己感兴趣的Web服务器的信息进行了对比,包括,Apache HTTP Server.Apache Tomcat.Nginx.Catt ...

  8. 测试开发之前端——No2.HTML5中的标签

    HTML5中的标签. 标签 描述 <!--...--> 定义注释. <!DOCTYPE>  定义文档类型. <a> 定义超链接. <abbr> 定义缩写 ...

  9. day11--RabbitMQ、Redis

        RabbitMQ:就是消息队列与Python里面的queue功能类似.线程和进程queue只能Python自己使用:不同机器和程序传递消息就要使用RabbitMQ了,中间传递. RabbitM ...

  10. 【struts2基础】配置详解

    一.struts2工作原理(网友总结,千遍一律) 1 客户端初始化一个指向Servlet容器(例如Tomcat)的请求2 这个请求经过一系列的过滤器(Filter)(这些过滤器中有一个叫做Action ...