入门指南--grunt学习笔记(1)
来源:互联网 发布:英雄联盟 知乎 编辑:程序博客网 时间:2024/05/20 00:12
1.构件化工具的诞生
软件开发会经历如下几个过程。
- 混沌阶段:混乱不堪的代码,重复代码漫天飞
- 模块化阶段:为了增强维护性,把代码模块化,增强复用
- 配置化阶段:代码变成一个个模块,复用性提高啦,但每次仍然需要编码来吧这些模块串起来。虽然开发量很低啦,但仍然需要开发。将这些把模块串起来的逻辑放到框架里,框架根据一个配置文件(一般为ini,xml,json文件类型)来决定如何串起来这些模块。
管理系统化阶段:对于程序员用户来说,做成可以配置的就基本ok啦。但对于计算机小白用户,修改配置文件的门槛还是太高啦。我们需要做一个图形界面出来,来修改配置文件。
当然配置信息存储的形式,不一定非得是个文件,只要能存储的都可以啦。db,文件都行,各有优缺点,仔细权衡。
2.武器档案
grunt的工具就是一个处于配置化阶段的产物。它是一个小框架,负责把各种模块(grunt里称之为插件)串起来。支持了两个基本功能:1.能够容纳新的模块接入 2.模块间的关系配置化
名称:grunt
用途:构件化工具
使用文档:http://www.gruntjs.org/ 或http://www.gruntjs.com/
3.安装
第一步,安装grunt-cli
npm install -g grunt-cli
执行完这一步以后,grunt命令已经存在啦,只不过这个grunt命令依赖于模块还没有安装。所以这时执行grunt命令,提示错误如下。因此我们还需要下一步。
C:\模拟磁盘\projects\grunt\grunt-helloworld>grunt -vgrunt-cli: The grunt command line interface. (v0.1.13)Fatal error: Unable to find local grunt.If you're seeing this message, either a Gruntfile wasn't found or grunthasn't been installed locally to your project. For more information aboutinstalling and configuring grunt, please see the Getting Started guide:
第二步,安装grunt
npm install grunt
再当前目录下安装grunt模块,这次再执行grunt -v看看(注意:再当前目录下执行才可以)。
C:\模拟磁盘\projects\grunt\grunt-helloworld>grunt -vInitializingCommand-line options: --verboseReading "???" Gruntfile...ERRORA valid Gruntfile could not be found. Please see the getting started guide formore information on how to configure grunt: http://gruntjs.com/getting-startedFatal error: Unable to find Gruntfile.
可以看到第一步中的错误没有啦,但仍然有错误提示。根据提示我们知道,这个工具依赖的配置文件,我们没写。看样子还得再操作一步才行。
注意:grunt命令时安装grunt-cli模块时产生的,如果只是安装grunt模块是不会有grunt命令的。
第三步,写Gruntfile配置文件
在当前目录下新建一个文件,命名为Gruntfile.js,内容如下。
// 包装函数module.exports = function(grunt) { // 任务配置 grunt.initConfig({ 'hello-world':{} }); // 自定义任务 grunt.registerTask('hello-world', 'My "asyncfoo" task.', function() { grunt.log.writeln('hello world'); }); grunt.registerTask('default', ['hello-world']);};
然后再当前目录执行下grunt命令,输出如下:
C:\模拟磁盘\projects\grunt\grunt-helloworld>gruntRunning "hello-world" taskhello worldDone, without errors.
这里自定义一个输出hello world的模块,然后让grunt框架使用它。具体api就不细说啦,参考上面提到的文档。
- 入门指南--grunt学习笔记(1)
- grunt入门指南系列一
- grunt入门指南系列一
- grunt 入门笔记
- Grunt使用学习入门
- grunt学习笔记(适用初学者)
- grunt学习笔记八:插件(补)
- grunt学习笔记
- grunt学习笔记
- grunt学习笔记
- grunt学习笔记一:grunt安装
- grunt学习笔记四:grunt实例demo
- grunt学习笔记五:grunt模板
- Getting started—grunt入门指南
- 任务配置详解—grunt入门指南
- grunt学习入门之一uglify
- grunt学习(一)——nodejs入门
- grunt学习(一)——nodejs入门
- node和npm的安装
- npm命令
- GridView的监听,选择,美化等详解
- 腾讯云服务器,给力来袭,,开发者扶持计划,,最高1000元的代金券..
- AdapterView、Adapter深度学习
- 入门指南--grunt学习笔记(1)
- XML文件解析
- 同时弹出顶部和底部的菜单
- baseadapter和cursoradapter与ListView
- Android中EditTex焦点设置和弹不弹出输入法的问题
- shell知识点总结
- gcc
- gdb
- make /makefile