在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的使用的更多相关文章

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

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

  2. grunt配置任务

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

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

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

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

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

  5. 应用Grunt自动化地优化你的项目前端

    在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...

  6. Grunt(页面静态引入的文件地址的改变探究)-V2.0

    相关插件的引用: grunt-usemin  对页面的操作 grunt-contrib-cssmin  压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...

  7. Grunt基本使用-V1.0

    浅语:grunt中文网:http://www.gruntjs.net/ 第一步:Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js.然后开始安装 Grunt. 实际上,安装的 ...

  8. nodejs、npm、grunt——名词解释

    最近着手开发一个新项目,打算从工程化的角度整理一套自己的前端开发.发布体系. grunt这些工具,之前别人用我也用,并没有认真想过它们的前世今生,正好趁着这个机会,我来理一理目前业界比较流行这些工具的 ...

  9. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  10. Grunt学习使用

    原文地址:Grunt学习使用必看 grunt简介神马的不多说,到处一大堆. 我只说说我已经实现了的代码. 按照官方的教程 相信已经配置好了,接下来说 package.json 和 Gruntfile. ...

随机推荐

  1. Python 中的map和reduce学习笔记

    map和reduce都是Python中的内置函数 map函数接受两个参数,第一个参数是函数,第二个参数是列表,将函数依次作用于列表中的元素,并返回一个元素 reduce同样以函数和列表作为参数,区别在 ...

  2. 前端学习 第五弹: CSS (一)

    前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="my ...

  3. 《java编程思想》读书笔记(二)第五章(2)

    成员初始化 Java尽力保证:所有变量在使用前都能得到恰当的初始化. 对于方法的局部变量,Java会以编译时报错的形式贯彻这种保证,比如: void f() { int i; //这里编译时就会报错, ...

  4. 转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks

    [总结]浏览器CSS Hacks汇总   浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...

  5. 关系与导航属性(摘自微软MSDN)

    关系与导航属性 本主题概述实体框架如何管理实体间的关系.还对如何映射和操作关系提供了一些指南. 关系.导航属性和外键 在关系数据库中,表之间的关系(也称为关联)是通过外键定义的.外键 (FK) 是用于 ...

  6. (转) Artificial intelligence, revealed

    Artificial intelligence, revealed Yann LeCunJoaquin Quiñonero Candela It's 8:00 am on a Tuesday morn ...

  7. IDEA使用maven中tomcat插件启动项目乱码问题

    今天用IDEA来启动项目,使用的是maven中的tomcat7插件,正常启动后,再页面操作新增或修改数据时,发生了诡异的事, 中文保存后全部乱码...顿时不淡定了,接着就开始排查原因 首先检查IDEA ...

  8. 基于 fuzz 技术验证移动端 app 的健壮性

    问题定义 app发布后经常容易出现各种诡异的crash, 这些crash固然可以通过各种崩溃分析服务去定位. 但是的确很影响用户体验. 在crash分类中有一类是后端接口引发的. 比如常见的引发app ...

  9. Changing SID Server 2012

    Changing SID Server 2012  Windows Server > Windows Server 2012 General Question 0 Sign in to vote ...

  10. 解决魅族MX5卸载debug-app不干净,导致安装、升级不成功的问题

    环境:魅族MX5,Android 5.1 问题:开发app使用真机调试后,在桌面上拖动图标卸载app-debug.apk,然后安装签名版本的app-release.apk提示替换xxx版本,按确定后提 ...