Grunt的使用
在Node环境下。需要预先安装好Node。
1、安装grunt-cli
[root@Luxh-01 ~]# npm install -g grunt-cli
2、创建一个目录test
[root@Luxh-01 ~]# mkdir test
3、进入test目录,创建一个package.json文件,内容如下:
{
"name": "grunt_test",
"description": "this is a demo",
"author": "Luxh"
}
4、安装grunt,只需安装到开发环境依赖中。
[root@Luxh-01 test]# npm install grunt --save-dev
安装完成,package.json文件如下:
{
"name": "grunt_test",
"description": "this is a demo",
"author": "Luxh",
"devDependencies": {
"grunt": "^0.4.5"
}
}
5、这里我要是有grunt完成:clean(清除文件)、copy(复制文件)、coffee(coffee编译成js)三个功能,所有我需要安装三个grunt插件:
[root@Luxh-01 test]# npm install grunt-contrib-clean --save-dev
[root@Luxh-01 test]# npm install grunt-contrib-copy --save-dev
[root@Luxh-01 test]# npm install grunt-contrib-coffee --save-dev
安装完成后:package.json文件如下:
{
"name": "grunt_test",
"description": "this is a demo",
"author": "Luxh",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-coffee": "^0.12.0",
"grunt-contrib-copy": "^0.7.0"
}
}
6、编写Grunt的配置文件:Gruntfile.js 内容如下:
module.exports = function(grunt) {
grunt.initConfig({
clean:{
main:{
src:'dest' //清除dest目录
}
},
copy: {
main: {
expand: true,
cwd: 'src/', //指定源文件目录
src: ['**','!**/*.coffee'], //不复制coffee文件
dest: 'dest/' //复制到dest目录下
}
},
coffee:{
main:{
expand:true,
cwd:'src',
src:['**/*.coffee'], //src目录下的coffee文件编译到dest目录
dest:'dest',
ext:'.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.registerTask('default', ['clean:main','copy:main','coffee:main']);
};
7、在test目录下创建src目录,在里面编写coffee。
8、执行grunt命令,将会依次执行 clean、copy、coffee,如果只需要执行clean,则允许 grunt copy
Grunt的使用的更多相关文章
- 初学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肯定没 ...
- 应用Grunt自动化地优化你的项目前端
在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...
- Grunt(页面静态引入的文件地址的改变探究)-V2.0
相关插件的引用: grunt-usemin 对页面的操作 grunt-contrib-cssmin 压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...
- Grunt基本使用-V1.0
浅语:grunt中文网:http://www.gruntjs.net/ 第一步:Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js.然后开始安装 Grunt. 实际上,安装的 ...
- nodejs、npm、grunt——名词解释
最近着手开发一个新项目,打算从工程化的角度整理一套自己的前端开发.发布体系. grunt这些工具,之前别人用我也用,并没有认真想过它们的前世今生,正好趁着这个机会,我来理一理目前业界比较流行这些工具的 ...
- grunt自定义任务——合并压缩css和js
npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...
- Grunt学习使用
原文地址:Grunt学习使用必看 grunt简介神马的不多说,到处一大堆. 我只说说我已经实现了的代码. 按照官方的教程 相信已经配置好了,接下来说 package.json 和 Gruntfile. ...
随机推荐
- C#中as用法
在程序中,进行类型转换时常见的事,C#支持基本的强制类型转换方法,例如 Object obj1 = new NewType();NewType newValue = (NewType)obj1;这样强 ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 2013/10/24初学BOOST
今天第一次接触学习boost库,虽然以前也听过boost,但是没有用心学习和使用此库. 学习的材料是:Boost_c++库.pdf RAII 智能指针的原理基于一个常见的习语叫做RAII:资源申请即初 ...
- js的一点
1.js中实现继承的方法 1.js原型(prototype)实现继承 <SPAN style="<SPAN style="FONT-SIZE: 18px"&g ...
- Search Insert Position
int searchInsert(int* nums, int numsSize, int target) { ; ); ; int mid; while(low<=high){ mid=(lo ...
- c# List的排序
list 是我们常用到的数据类型,我们常常会用list去处理很多的数据.我们也常常会有这样的一个操作,就是排序sort list 所在的命名空间是System.Collections.Generic ...
- Linux-Rsync服务器/客户端搭建实战
一.需求 每晚汇总各机器的操作日志,同步到主服务器进行日志分析. 二.基础知识 rsync 分为服务器端.客户端,服务器端搭建比客户端辛苦一些(也是很简单). rsync 服务器是指以 deamon ...
- 将.war文件解压到指定目录
jar命令无法将.jar解压到指定目录,因为-C参数只在创建或更新包的时候可用 要将.jar文件解压到指定目录可以用unzip命令 unzip命令在windows下自带就有,不用另外下载安装 下面是将 ...
- 路由 - ASP.NET MVC 4 系列
软件开发人员常常对一些细小的细节问题倍加关注,由其在考虑源代码的质量和结构时更是如此.因此,当遇到大部分使用 ASP.NET 技术构建的站点,使用如下的 URL 地址时,可能会有些奇怪: ...
- 成员资格、授权 – ASP.NET MVC 4 系列
ASP.NET MVC 不像 ASP.NET WEB FORMS 那样提供了很多自动保护机制来保护页面不受恶意用户的攻击,更明确的说,后者是致力于使应用程序免受攻击: 服务器组件对显示的 ...