grunt学习笔记(适用初学者)
2014-09-08 21:47
204 查看
1、在学习grunt之前,首先要对nodejs有一些简单的理解。安装nodejs的步骤很简单,根据官网的提示安装即可,在此文中将不再累述。
http://www.nodejs.org/2. Grunt介绍
Grunt是一个自动化的项目构建工具. 如果你需要重复的执行像压缩, 编译, 单元测试, 代码检查以及打包发布的任务. 那么你可以使用Grunt来处理这些任务, 你所需要做的只是配置好Grunt, 这样能很大程度的简化你的工作.如果在团队中使用Grunt, 你只需要与其他人员约定好使用Grunt应该规避的问题, 就能够很方便的自动化的处理大部分的常见工作任务, 你所付出的努力几乎为0.
3. Grunt安装
Grunt和Grunt插件都是通过npm, Node.js包管理器安装和管理的.D:\>cd nodeTest1\nodejs-grunt\ D:\>cd nodeTest1\nodejs-grunt\npm install -g grunt-cli
这是全局安装。
D:\>cd nodeTest1\nodejs-grunt\grunt
将会出现如下错误:
grunt-cli: The grunt command line interface. (v0.1.9) Fatal error: Unable to find local grunt. If you're seeing this message, either a Gruntfile wasn't found or grunt hasn't been installed locally to your project. For more information about installing and configuring grunt, please see the Getting Started guide: http://gruntjs.com/getting-started[/code]
执行grunt命令,我们发现系统报错了,提示不能加载本地库。因为,grunt命令执行,是需要当前目录中包括package.json和Gruntfile.js两个文件。
package.json,是npm项目配置文件
Gruntfile.js,是专门用来配置grunt的配置文件
为了做验证,本文做了一个例子:~ D:\>express -e nodejs-grunt ~ D:\>cd nodejs-grunt && npm install ~ D:\nodejs-grunt>npm install grunt --save-dev在package.json文件中输入如下量:{ "name": "nodejs-grunt", "version": "0.0.1", "private": true, "scripts": { "start": "node app.js" }, "dependencies": { "express": "3.2.2", "ejs": "*" }, "devDependencies": { "grunt": "~0.4.1", } }
并在Gruntfile.js文件中输入如下量(需要新建):module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); // Default task(s). grunt.registerTask('default', ['uglify']); };
再次编辑package.json, 在devDependencies中增加grunt-contrib-uglify的依赖库{ "name": "nodejs-grunt", "version": "0.0.1", "private": true, "scripts": { "start": "node app.js" }, "dependencies": { "express": "3.2.2", "ejs": "*" }, "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-uglify": "~0.1.1" } }继而,再在nodejs-grunt目录下创建src和build,和nodejs-grunt.js的文件,其中nodejs-grunt.jsvar sayHello=function(name) { return "你好 "+ name; }为确保依赖库被加载,需要再次执行npm
install 命令
接着执行:D:\nodejs-grunt>grunt控制台输入如下:Running "uglify:build" (uglify) task File "build/nodejs-grunt.min.js" created. Uncompressed size: 59 bytes. Compressed size: 40 bytes gzipped (43 bytes minified). Done, without errors.打开nodejs-grunt\build\nodejs-grunt.min.js/*! nodejs-grunt 2014-09-08 */ var sayHello=function(l){return"hello "+l};这是一个压缩实例。Grunt常用插件
grunt-contrib-uglify:压缩js代码
grunt-contrib-concat:合并js文件
grunt-contrib-qunit:单元测试
grunt-contrib-jshint:js代码检查
grunt-contrib-watch:监控文件修改并重新执行注册的任务
上述已经讲述一个压缩实例。后面几个插件就不再一一介绍。
下面将demo放到资源中供大家免费下载
http://download.csdn.net/detail/zz410675629/7881187
参考文章:http://blog.fens.me/nodejs-grunt-intro/
相关文章推荐
- 学习中间件ICE笔记(初学者必读)
- java学习笔记,关于java的一些基础知识,适用于初学者,第一节
- 入门指南--grunt学习笔记(1)
- cocos2dx 适合初学者的学习笔记【二】
- java学习笔记(只适用于初学者)
- Qt中SQL QSqlQuery 对象中prepare()函数的用法(初学者,学习笔记,还望指正)
- grunt学习笔记
- Sass和compass 安装 和配合grunt实时显示 [Sass和compass学习笔记]
- cocos2dx 适合初学者的学习笔记【四】
- 最近学习C++ 数据结构 尝试代码就放上来吧 初学者适用
- .net 初学者。学习笔记 [web网页后台导出数据]
- .net 初学者。学习笔记 [html的<select>下拉标签option赋值]
- 09年学习笔记-初学者
- Enterprise Library 4.1学习笔记 配置应用程序块(c/s和b/s均适用)
- Kafka学习笔记02 - 适用场景
- (JAVA SE 学习笔记)Java.SE.第011讲.面向对象之封装.续二(对一些原理机制进行了详细的解释,适合初学者学习)
- 【Java学习笔记】一个初学者的学习历程,分享学习JAVA心得
- Enterprise Library 4.1学习笔记1----配置应用程序块(c/s和b/s均适用)
- Java学习笔记——thread派生类的适用
- snmp学习笔记——让初学者的我们共同进步吧