grunt 构建工具(build tool)初体验

时间:2022-07-18 07:47:28

操作环境:win8 系统,建议使用 git bash (window下的命令行工具)

1,安装node.js

官网下载:https://nodejs.org/   直接点击install ,会根据你的操作系统下载对应的 版本

检测是否安装 node -v

现在我们来运行一个简单的node程序,创建hello.js 文件,复制下面的代码:

var http = require("http");
http.createServer(function(request, response) {
response.writeHead(200, {"Content-Type": "text/html"});
response.write("Hello World!");
response.end();
}).listen(8080);
console.log("Server running at http://localhost:8080/");

打开cmd命令行,转到hello.js 所在目录,运行 node hello.js

grunt 构建工具(build tool)初体验

打开浏览器输入 http://localhost:8080/

grunt 构建工具(build tool)初体验

nodejs的理解:node 其实就是一个javascript 运行环境,对v8 引擎的封装

我的node版本是:v0.12.4 ,默认安装 NPM 管理安装包

检测是否安装NPM 管理包  npm -v

##独立安装 npm 管理包(在安装git的情况下)

将 npm 包下载到你的本地

git clone --recursive git://github.com/isaacs/npm.git

下载到NPM文件后,命令行首先转到npm所在地址,输入以下代码进行安装。

node cli.js install npm -gf 

node 参考资料:

node.js 初体验

node.js 笔记,nodejs、express、npm安装

node.js 入门书

node 入门社区

2,安装yeoman  (现在web app 脚手架工具)

npm install -g yo

// 检测是否安装
yo -v

参考资料:
前端构建工具-yeoman
yeoman 官网

yeoman 笔记

3,安装 bower  (web包(框架、库、公共部分)管理器)

npm install -g bower

bower 是一个web 包管理工具,bower 是基于node js 的,所以要首先安装node,不论是注册自己的模块还是下载包都是从github 上下载,所以保证你的电脑安装git,并能够使用。具体细节 参考 下面的文章 bower 解决js 的依赖管理,写的很详细了。

安装      bower install jquery

查看包的列表  bower list

更新包     bower update jquery

包的搜索    bower search jquery

包的信息    bower info jquery  ,查看单个包的信息   bower info jquery#1.7.1

包的卸载    bower uninstall  jquery

查看本地缓存的包  bower cache list

查看jquery 库的url  bower lookup jquery

提交自己的类库:   bower init     生成json配置文件

提交自己的类库,其实就是,把自己需要的库,上传到自己的git仓库,然后注册为 bower 所能认识的安装包

bower register 名字  git地址

然后你就可以查看自己的类库,安装,卸载,和原有包使用是一样的。

参考资料:

bower 解决js的依赖管理

bower 官网

包管理工具 bower

4,安装grunt 到全局(在系统中任何地方都可以使用)  自动化工具,build tool

npm install -g grunt-cli

前端集成解决方案,解决前端工程的根本问题:

开发团队代码风格不统一,如何强制开发规范
前端开发的组件库如何维护和使用
如何模块化前端项目
服务器部署前必须的压缩,检查流程如何简化,流程如何完善