操作环境: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. 灰度图像--图像增强 直方图均衡化(Histogram equalization)

    灰度图像--图像增强 直方图均衡化(Histogram equalization) 转载请标明本文出处:http://blog.csdn.net/tonyshengtan,欢迎大家转载,发现博客被某些 ...

  2. Centos6.4 为用户添加sudo功能

    sudo即super user do,以超级管理员的方式运行命令.使用时,只需在命令最前面加上sudo即可. 要为用户添加sudo功能,需要修改sudo的配置文件: vi /etc/sudoers ( ...

  3. ASP.NET中验证控件的使用

    转自:http://www.cnblogs.com/yangmingming/archive/2010/03/09/1682006.html 前言: 前几日,无奈用JS判断控件的有效性,发现的确是一件 ...

  4. Asp.Net 前后台交互小结

    转自:http://blog.csdn.net/wlccomeon/article/details/17270427 一.前台调用后台           前台调用后台的方法一共可分为两大类:使用Ht ...

  5. HDOJ/HDU 1075 What Are You Talking About(字符串查找翻译~Map)

    Problem Description Ignatius is so lucky that he met a Martian yesterday. But he didn't know the lan ...

  6. Spark RDD概念学习系列之rdd持久化、广播、累加器(十八)

    1.rdd持久化 2.广播 3.累加器 1.rdd持久化 通过spark-shell,可以快速的验证我们的想法和操作! 启动hdfs集群 spark@SparkSingleNode:/usr/loca ...

  7. Web开发,如何从小工到专家

    最近在研读关于“整体性学习”的一些东西,收获颇丰. 整体性学习强调的东西有三样:结构.模型.与高速通道.特别是关于结构的篇章: 理解是什么?理解就是结构高度发达完善的结果. 是不是有些学科你可以轻松“ ...

  8. hdoj 2502 月之数

    月之数 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  9. nginx日志格式含义

  10. Python自动化之session

    request.body 所有请求内容的原生数据 request.META 所有请求头的原生数据 cookie返回存在于响应头里面 session session是保存在服务端的键值对 cookie和 ...