操作环境: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. View以自身中心旋转的代码解惑

    matrix.preTranslate(-centerX, -centerY); matrix.postTranslate(centerX, centerY); 经常在中心旋转的应用中看到这段代码. ...

  2. C++ Primer 随笔 Chapter 4 数组和指针

    1.数组:数组是由类型名.标识符和维数组成的符合数据类型,类型名规定了存放在数组中的元素类型,维数规定数组中包含元素的个数而标识符就是数组的名称.例如: int  arr[10]; 其中 int 是类 ...

  3. xcode duplicate symbol _GAD_MD5 解决方法

    添加了mobi的广告平台后,在Device状态打包时,出现此错误. duplicate symbol _GAD_MD5 in: 解决方法: Targets ->Build Setting  中设 ...

  4. Delphi的BPL介绍和使用 转

    了解BPL和DLL的关系将有助于我们更好地理解DELPHI在构件制作.运用和动态.静态编译的工作方式.对初学DELPHI但仍对DELPHI开发不甚清晰的朋友有一定帮助.BPL vs. DLL(原文ht ...

  5. Linux内核学习笔记2——Linux内核源码结构

    一 内核组成部分 内核是一个操作系统的核心,主要由五个部分组成:进程调度,内存管理,虚拟文件系统,网络结构,进程间通信. 1.进程调度(SCHED) 控制进程对CPU的访问.当需要选择下一个进程运行时 ...

  6. Unity3d Fast Indirect illumination Using Two Virtual Spherical Gaussian Lights-Square Enix论文

    博主实现(in Unity3d 5) used one spotlight 史克威尔效果展示(夜光引擎?) 博主近期渲染:最近用unity5弄的一些渲染 ---- by wolf96  http:// ...

  7. Bzoj 1042: [HAOI2008]硬币购物 容斥原理,动态规划,背包dp

    1042: [HAOI2008]硬币购物 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1747  Solved: 1015[Submit][Stat ...

  8. 1 weekend110的hdfs源码跟踪之打开输入流 + hdfs源码跟踪之打开输入流总结

    3种形式的元数据,fsimage是在磁盘上,meta.data是在内存上, 我们继续,前面呢,断点是打在这一行代码处, FileSystem fs = FileSystem.get(conf); we ...

  9. 【转】【opencv】仿射变换

    仿射变换 目标 在这个教程中你将学习到如何: 使用OpenCV函数 warpAffine 来实现一些简单的重映射. 使用OpenCV函数 getRotationMatrix2D 来获得一个  旋转矩阵 ...

  10. 329. Longest Increasing Path in a Matrix

    最后更新 三刷? 找矩阵里的最长路径. 看起来是DFS,实际上也就是.但是如果从每个点都进行一次DFS然后保留最大的话,会超时. 这里需要结合DP,dp[i][j]表示以此点开始的最长路径,这样每次碰 ...