操作环境: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

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

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

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

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

grunt 构建工具(build tool)初体验的更多相关文章

  1. Grunt构建工具能做哪些事?

    Grunt到底有什么作用?一般用来干嘛? 很多前端的工作,包括Less编译.javascript压缩.Css压缩等零零碎碎的工作, 都可以让Grunt来做. 实际上在项目开发中,一般是前端代码 与 后 ...

  2. 前端工程化系列[04]-Grunt构建工具的使用进阶

    在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇文章中,我们对Grunt以及Grunt插件的使用已经有了初步的认识,并探讨了Grunt ...

  3. 前端工程化系列[03]-Grunt构建工具的运转机制

    在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中,已经对Grunt做了简单的介绍,此外,我们还知道了该如何来安装Grunt环境,以及使用一些常见的插件了,这篇文章主要介绍Grunt的核 ...

  4. Grunt构建工具插件篇——之less工具

    Grunt--Less 摘要: 之前介绍了自动构建工具Grunt,其中有一个模块是"grunt-contrib-less",下面是配置Grunt自动编译less文件. 安装: Gr ...

  5. gradle的安装,配置,构建,研究,初体验......(入职一周研究的第一个大知识点)

    (1)Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建工具.它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,抛弃了基于XML的各种繁琐配置.更 ...

  6. 前端工程化系列[02]-Grunt构建工具的基本使用

    本文主要介绍前端开发中常用的构建工具Grunt,具体包括Grunt的基本情况.安装.使用和常见插件的安装.配置和使用等内容. 1.1 Grunt简单介绍 Grunt是一套前端自动化构建工具.对于需要反 ...

  7. Grunt构建工具

    Grunt是javascript的构建工具,对于需要反复重复的任务,例如压缩(minification).编译.单元测试.linting等,自动化工具可以简化工作.Grunt生态系统非常庞大.你可以利 ...

  8. C#代码生成工具:文本模板初体验 使用T4批量修改实体框架(Entity Framework)的类名

    转自:http://www.cnblogs.com/huangcong/archive/2011/07/20/1931107.html 在之前的文本模板(T4)初体验中我们已经知道了T4的用处,下面就 ...

  9. 构建工具build tools

    构建工具是从源代码自动创建可执行应用程序的程序(例如.apk for android app).构建包括将代码编译,链接和打包成可用或可执行的形式. 基本上,构建自动化是脚本或自动化软件开发人员在日常 ...

随机推荐

  1. 结论: blocking_query 是当前堵塞其他会话正在运行的SQL.而不是原始堵塞SQL

    查看当前session线程号 mysql> select connection_id(); +-----------------+ | connection_id() | +---------- ...

  2. Linux 日常使用指令大全

    001.日常维护常用查询命令 #top    显示系统进程 #clear  清理屏幕信息 #cat /etc/redhat-release  查看系统版本信息 #cat /proc/version   ...

  3. 转载--C语言运算符优先级和口诀

    转载:http://www.cnblogs.com/zhanglong0426/archive/2010/10/06/1844700.html 一共有十五个优先级: 1   ()  []  .  -& ...

  4. Linux NTP校时

    1.安装客户端(root权限运行) apt-get install ntpdate 2.修改配置文件:“/etc/default/ntpdate”,     NTPSERVERS="ntp. ...

  5. windwos server 2008下iis7各种操作

    1.发布一个asp程序带access数据库的 默认server 08是安装了iis7的,但是它默认没支持asp这项,这时你可以直接去控制面板--程序和功能--打开或关闭windows功能(双击打开)- ...

  6. Spring框架整合Struts2

    1,用Spring架构,及Struts2-spring-plugin插件 导入Spring的dist全部所需的jar包 Struts2的spring插件 struts2-spring-plugin.X ...

  7. YII 表单验证规则

    官方文档:http://www.yiichina.com/guide/form.model 类参考手册:http://www.yiichina.com/api/CValidatorhttp://www ...

  8. How to create XML validator(验证器;验证程序) from XML schema

    In order to check XML data for validity we have to prepare its schema XSD-file. This file will be lo ...

  9. 探讨Web组件化的实现

    CMS组件化,简单架构示意图: Web组件使用WebPage+WebAPI的好处: Ø  组件复用(组件条件管理页面复用+获取组件数据API复用). Ø  组件是分布式的第三方应用,本身高内聚.组件之 ...

  10. 准备在新项目中使用pgsql【资源收集】

    pgsql大象数据库 是我最近在关注的一款开源数据库,可以自由修改,没那么多限制,准备在新项目中使用 postgresql中国下载站 http://www.postgres.cn/download#s ...