初识GRUNT
什么是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的更多相关文章
- 利用 Grunt (几乎)无痛地做前端开发 (一)之单元测试
前言 如果你想开发一个js应用,甭管多简单,都要先创建整个宇宙 来看看我们的Javascript小宇宙: 确定如何根据需求.功能划分模块,如何将代码分成多个文件开发,合成一个发布 保证上一条的同时,使 ...
- 我的Grunt之旅-初识gruntfile文件
时间:2018-03-06 18:23 事件:配置 gruntfile.js文件 首先,回忆一下之前的点,grunt项目下面必须有两个文件 ,第一个 package.json ,第二个 Gru ...
- 解读ASP.NET 5 & MVC6系列(2):初识项目
初识项目 打开VS2015,创建Web项目,选择ASP.NET Web Application,在弹出的窗口里选择ASP.NET 5 Website模板创建项目,图示如下: 我们可以看到,此时Web ...
- grunt实用总结
grunt实用总结 文章梗概如下: 如何让Grunt在项目跑起来 初识:Gruntfile.js 术语扫盲:task & target 如何运行任务 任务配置 自定义任务 文件通配符:glob ...
- 初识node.js(通过npm下载项目依赖的包的过程)
一.初识node.js 简单的说Node.js 就是运行在服务器端的JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一个事 ...
- 初学seaJs模块化开发,利用grunt打包,减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
- grunt配置任务
这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...
- 快速开发Grunt插件----压缩js模板
前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...
- 是时候搁置Grunt,耍一耍gulp了
也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...
随机推荐
- linux backtrace()详细使用说明,分析Segmentation fault【转】
转自:http://velep.com/archives/1032.html 在此之前,开发eCos应用程序时,经常碰到程序挂掉后,串口打印输出一大串让人看不懂的数据.今天才明白,原来这些数据是程序挂 ...
- 【译】ASP.NET Identity Core 从零开始
原文出自Rui Figueiredo的博客,原文链接<ASP.NET Identity Core From Scratch> 译者注:这篇博文发布时正值Asp.Net Core 1.1 时 ...
- C# XML 文档注释
原文链接:http://www.shinater.com/DocsBuilder/help.html <summary>description</summary> 描述类型或类 ...
- LCT摘要
介绍.用途 LCT是树链剖分中的一种,又叫实链剖分.动态树,常用于维护动态的树.森林. 维护方式 LCT并不直接维护原树,而是用一堆splay作为辅助树来维护.原树中的一条实链上的点在一棵splay中 ...
- Vue 实现一个中国地图
参考:https://www.cnblogs.com/mazey/p/7965698.html 重点:如何引入中国地图js文件,china.js require('echarts/map/js/chi ...
- 【Unity_UWP】Unity 工程发布win10 UWP 时的本地文件读取 (下篇)
Universal Windows Platform(UWP)是微软Windows10专用的通用应用平台,其目的在于在统一操作系统下控制所有智能电子设备. 自从Unity 5.2之后,配合VS 201 ...
- (一)Dubbo简介
Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和Spring框架无缝集成.具体可以看 百度百科 https://baike.ba ...
- 基于Prometheus的Pushgateway实战
一.Pushgateway 简介 Pushgateway 是 Prometheus 生态中一个重要工具,使用它的原因主要是: Prometheus 采用 pull 模式,可能由于不在一个子网或者防火墙 ...
- IntelliJ IDEA :Error:(1, 1) java: 非法字符: '\ufeff'
将file encodings由utf-8改成utf-16,再将utf-16改成utf-8就好了
- Codeforces Round #296 (Div. 1) B - Clique Problem
B - Clique Problem 题目大意:给你坐标轴上n个点,每个点的权值为wi,两个点之间有边当且仅当 |xi - xj| >= wi + wj, 问你两两之间都有边的最大点集的大小. ...