一 安装nodejs
nodejs 官司网下载安装文件
官网地址:http://www.nodejs.org/download/
因为是在64位win7上开发,因此下载windows64位msi版本的nodejs.
下载完成后,进行安装,默认安装路径为C:\Program Files\nodejs\,直接下一步就可以了。
安装完成之后,在命令窗口执行,node -v (显示nodejs版本) 和npm -v (显示npm版本)可以使用这两个命令查看是否安装成功:
2.npm 简介
nodejs 安装过程中会自动安装npm,npm 是nodejs的程序包管理工具,用于从网上下载程序包并安装还可以管理工程对程序包的依赖,类似于java平台上的maven。
程序包是指实现了某些功能,并可以运行于nodejs平台,一般是开源程序,如压缩js代码程序,检查js代码正确性的程序等等。
使用npm 管理项目,一般工程目录下会有一个名为package.json 的json格式文件,该文件定义了工程的名称、作者、仓库地址、开发时依赖的模块,该工程的使用版本等等,如下bootstrap中的package.json:(详细配置说明见:http://blog.csdn.net/woxueliuyun/article/details/39294375)
{
"name": "bootstrap",//项目名称
"description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",//项目说明
"version": "3.3.0",//项目版本
"keywords": [///关键字,用于别人搜索找到
"css",
"less",
"mobile-first",
"responsive",
"front-end",
"framework",
"web"
],
"homepage": "http://getbootstrap.com",//项目主页地址
"author": "Twitter, Inc.",//作者
"scripts": { //定义脚本,key为脚本名 value为可执行的nodejs命令
"test": "grunt test"
},
"style": "dist/css/bootstrap.css",
"less": "less/bootstrap.less",
"main": "./dist/js/npm",
"repository": {//定义了仓库类型及地址
"type": "git",
"url": "https://github.com/twbs/bootstrap.git"
},
"bugs": {//提交bug地址
"url": "https://github.com/twbs/bootstrap/issues"
},
"license": {//版权声明
"type": "MIT",
"url": "https://github.com/twbs/bootstrap/blob/master/LICENSE"
},
"devDependencies": {//开发依赖哪些nodejs模块
"btoa": "~1.1.2",
"glob": "~4.0.6",
"grunt": "~0.4.5",
"grunt-autoprefixer": "~1.0.1",
"grunt-banner": "~0.2.3",
"grunt-contrib-clean": "~0.6.0",
"grunt-contrib-concat": "~0.5.0",
"grunt-contrib-connect": "~0.8.0",
"grunt-contrib-copy": "~0.7.0",
"grunt-contrib-csslint": "~0.3.1",
"grunt-contrib-cssmin": "~0.10.0",
"grunt-contrib-jade": "~0.13.0",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-less": "~0.12.0",
"grunt-contrib-qunit": "~0.5.2",
"grunt-contrib-uglify": "~0.6.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-csscomb": "~3.0.0",
"grunt-exec": "~0.4.6",
"grunt-html-validation": "~0.1.18",
"grunt-jekyll": "~0.4.2",
"grunt-jscs": "~0.8.1",
"grunt-saucelabs": "~8.3.2",
"grunt-sed": "~0.1.1",
"load-grunt-tasks": "~1.0.0",
"npm-shrinkwrap": "~4.0.0",
"remarkable": "^1.2.2",
"time-grunt": "~1.0.0"
},
"engines": {//nodej引擎版本
"node": "~0.10.1"
}
}
如果需要对bootstrap开发,则在package.json所在目录中执行npm install 就可以下载所有的依赖包到当前目录的node_modules中,因此源码中不需要带有依赖包,只需要有一个package.json就搞定了。
npm install --save 模块名 :将模块下载到当前目录的node_modules中并将依赖写入 package.json中的dependencies中
npm install --save-dev 模块名 : 将模块下载到当前目录的node_modules中并将依赖写入 package.json中的devDependencies中
nodejs安装程序会在环境变量中添加两个变量:
系统环境变量中:path 增加C:\Program Files\nodejs\ 因为在该目下存在node.exe 和npm.cmd,加入path后可以全局调用该命令。
用户变量中设置:
path=C:\Users\Administrator\AppData\Roaming\npm
该目录下node_modules目录用来存放安装的全局的nodejs模块,并在npm目录中生成相应的命令行可执行的文件。而将该路径加入path 是为了全局调用nodejs模块。
使用npm config list 可以查看npm 配置信息:
C:\Users\Administrator>npm config list
; cli configs
registry = "https://registry.npmjs.org/" 模块注册地址
user-agent = "npm/1.4.28 node/v0.10.33 win32 x64"
; builtin config undefined
prefix = "C:\\Users\\Administrator\\AppData\\Roaming\\npm" 模块的存放目录
; node bin location = C:\Program Files\nodejs\\node.exe
; cwd = C:\Users\Administrator
; HOME = C:\Users\Administrator
; 'npm config ls -l' to show all defaults.
registry = "https://registry.npmjs.org/"
表明npm insall 模块时,到模块注册地址寻找,找到后获取模块代码的仓库地址,就可以下载了。
可以使用npm config set <key> <value> 修改默认设置,如
npm config set prefix = 'c:\node',改prefix 时要记得修改path ,以使安装后可以直接运行。
如查使用npm config配置了环境变量,则在C:\Users\Administrator中生成了一个.npmrc文件,记录了配置信息,修改该文件也相当于执行了npm config 命令。
3 安装git
git是分布式版本控制系统,现在的开源项目一般都放到公网上的git仓库上,如github(https://github.com/),项目中的使用的依赖包(开源项目)需要使用git从公网仓库中下载到本地。
windows 平台git 下载地址:http://msysgit.github.io/,安装时下一步就可以 了。 默认安装地址C:\Program Files (x86)\Git,安装完成后,在环境变量path中增加:C:\Program Files (x86)\Git\bin,目的是在cmd窗口中可以引用git命令。
进入cmd 窗 口:执行命令git --version,显示git版本号,则安装成功
C:\Users\Administrator>git --version
git version 1.9.4.msysgit.2
$ git config --global user.name "你的名字"
$ git config --global user.email "您的email地址"
4.安装bower
Bower是一个适合Web应用的包管理器,它擅长前端的包管理。
Bower安装方法:npm install -g bower, -g参数是全局安装,在哪个目录下执行这个命令都行,bower 最终被安装到C:\Users\Administrator\AppData\Roaming\npm\node_modules\(默认情况下)
C:\Users\Administrator>npm install -g bower
C:\Users\Administrator\AppData\Roaming\npm\bower -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\bower\bin\bower
bower@1.3.12 C:\Users\Administrator\AppData\Roaming\npm\node_modules\bower
├── is-root@1.0.0
├── junk@1.0.0
├── stringify-object@1.0.0
├── abbrev@1.0.5
├── chmodr@0.1.0
├── which@1.0.5
├── osenv@0.1.0
├── archy@0.0.2
├── opn@1.0.0
├── rimraf@2.2.8
├── bower-logger@0.2.2
├── graceful-fs@3.0.4
├── lru-cache@2.5.0
├── bower-endpoint-parser@0.2.2
├── lockfile@1.0.0
├── retry@0.6.0
├── nopt@3.0.1
├── tmp@0.0.23
├── q@1.0.1
├── semver@2.3.2
├── request-progress@0.3.0 (throttleit@0.0.2)
├── p-throttler@0.1.0 (q@0.9.7)
├── shell-quote@1.4.2 (array-reduce@0.0.0, array-map@0.0.0, array-filter@0.0.1, jsonify@0.0.0)
├── fstream@1.0.2 (inherits@2.0.1)
├── promptly@0.2.0 (read@1.0.5)
├── bower-json@0.4.0 (intersect@0.0.3, deep-extend@0.2.11, graceful-fs@2.0.3)
├── mkdirp@0.5.0 (minimist@0.0.8)
├── chalk@0.5.0 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
├── fstream-ignore@1.0.1 (inherits@2.0.1, minimatch@1.0.0)
├── bower-config@0.5.2 (osenv@0.0.3, graceful-fs@2.0.3, optimist@0.6.1)
├── glob@4.0.6 (inherits@2.0.1, once@1.3.1, minimatch@1.0.0)
├── tar-fs@0.5.2 (pump@0.3.5, tar-stream@0.4.7)
├── decompress-zip@0.0.8 (nopt@2.2.1, mkpath@0.1.0, readable-stream@1.1.13, touch@0.0.2, binary@0.3.0)
├── cardinal@0.4.0 (redeyed@0.4.4)
├── mout@0.9.1
├── request@2.42.0 (caseless@0.6.0, forever-agent@0.5.2, aws-sign2@0.5.0, tunnel-agent@0.4.0, oauth-sign@0.4.0, json-stringify-safe@5.0.0, stringstream@0.0.4, node-uuid@1.4.1, qs@1.2.2, mime-types@
1.0.2, form-data@0.1.4, bl@0.9.3, tough-cookie@0.12.1, http-signature@0.10.0, hawk@1.1.1)
├── bower-registry-client@0.2.1 (graceful-fs@2.0.3, request-replay@0.2.0, lru-cache@2.3.1, mkdirp@0.3.5, async@0.2.10, request@2.27.0)
├── update-notifier@0.2.0 (semver-diff@0.1.0, string-length@0.1.2, latest-version@0.2.0, configstore@0.3.1)
├── inquirer@0.7.1 (figures@1.3.5, mute-stream@0.0.4, through@2.3.6, readline2@0.1.0, lodash@2.4.1, cli-color@0.3.2, rx@2.3.18)
├── insight@0.4.3 (object-assign@1.0.0, async@0.9.0, chalk@0.5.1, tough-cookie@0.12.1, os-name@1.0.1, lodash.debounce@2.4.1, configstore@0.3.1, inquirer@0.6.0)
打开C:\Users\Administrator\AppData\Roaming\npm目录,发现node_modules目录下已经安装了bower,并在npm目录中生成了可执行的命令 bower 和 bower.cmd (不知道是怎么调用的)。因此需要把 C:\Users\Administrator\AppData\Roaming\npm加入path环境变量中。
执行命令:bower --version 可以显示bower版本:
C:\Users\Administrator>bower --version
1.3.12
使用bower 可以管理工程中对js类库的依赖,如果程序中依赖jquery ,不需要再到网上下载jquery.min.js了,使用命令 bower install jquery --save,jquery 会动下载到当前目录下的bower_componets目录中了 。
bower还可以管理js类库之间间依赖,如果需要bootstrap 那么 bower install bootstrap --save,就把bootstrap下载到bower_components目录,同时由就bootstrap依赖于jquery,jquery 也被下载到bower_components目录了。
上面命令中:bower install bootstrap --save,--save参数是指工程对bootstrap的依赖关系写入bower.json。 (使用bower init 可以交互的方式建立bower.json)。
bower.json格式:
{
"name": "my-project",//工程名
"version": "1.0.0",//版本号
"main": "path/to/main.css",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {//工程依赖的javascript类库
"<name>": "<version>",
"<name>": "<folder>",
"<name>": "<package>"
},
"devDependencies": {//开发环境依赖包
"<test-framework-name>": "<version>"
}
}
有了bower.json文件,不需要将bower_componets目录加入版本管理中了。别人使用该项目时,从版本管理系统中检出来,在bower.json 所在目录执行命令 bower install ,那么依赖的javascript类库就自动下载安装到当前目录bower_componets下了。
bower install bootstrap --save 将bootstrap依赖写入bower.json中的dependencies中
bower install bootstrap --save-dev 将bootstrap依赖写入bower.json中的devDependencies中
5.安装gulp
gulp 用于前端项目的构建,如监控程序文件变化,检查js代码正确性,压缩js,源码转换到发布目录,启动web 服务测试等等。
安装方法: npm install -g gulp
C:\>npm install -g gulp
\
> v8flags@1.0.4 install C:\Users\Administrator\AppData\Roaming\npm\node_modules\gulp\node_modules\v8flags
> node fetch.js
flags for v8 3.14.5.9 cached.
C:\Users\Administrator\AppData\Roaming\npm\gulp -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js
gulp@3.8.10 C:\Users\Administrator\AppData\Roaming\npm\node_modules\gulp
├── pretty-hrtime@0.2.2
├── interpret@0.3.8
├── deprecated@0.0.1
├── archy@1.0.0
├── minimist@1.1.0
├── semver@4.1.0
├── v8flags@1.0.4
├── tildify@1.0.0 (user-home@1.1.0)
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
├── orchestrator@0.3.7 (sequencify@0.0.7, stream-consume@0.1.0, end-of-stream@0.1.5)
├── liftoff@0.13.6 (extend@1.3.0, flagged-respawn@0.3.1, resolve@1.0.0, findup-sync@0.1.3)
├── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, dateformat@1.0.8, lodash@2.4.1, through2@0.6.3, vinyl@0.4.5, multipipe@0.1.2, lodash.template@2.4.1)
└── vinyl-fs@0.3.13 (graceful-fs@3.0.4, strip-bom@1.0.0, mkdirp@0.5.0, through2@0.6.3, vinyl@0.4.5, defaults@1.0.0, glob-stream@3.1.17, glob-watcher@0.0.6)
查看gulp版本号:
C:\Windows>gulp --version
[10:37:20] CLI version 3.8.10
gulpfile.js用于定义gulp执行的任务。
6.建立工程目录结构
工程的目录结构可以是任意的,没有固定的结构,自已觉得合理就好了。
image :图片目录
scripts:脚本目录
styles:css目录
vender :依赖的第三方javscript类库或css样式库,(最好是把第三方的类库放到一个公共的http地址或引用cdn ,而不是将第三方类库存在本地程序中)
vender/css:第三方css样式库
vender/js:第三方javascript类库
views :html模版
index.html:程序入口
6.安装依赖库 angularjs 和bootstrap
首先初始化bower.json
在工程根目录(我是里是web目录)执行命令:
D:\web>bower init
? name: webtest
? version: 0.1.0
? description: 前端测试项目
? main file: ./app/index.html
? what types of modules does this package expose?: globals
? keywords:
? authors: yanlei <java.yanlei@163.com>
? license: MIT
? homepage:
? set currently installed components as dependencies?: Yes
? add commonly ignored files to ignore list?: No
? would you like to mark this package as private which prevents it from being accidentally pub
{
name: 'webtest',
version: '0.1.0',
authors: [
'yanlei <java.yanlei@163.com>'
],
description: '前端测试项目',
main: './app/index.html',
moduleType: [
'globals'
],
license: 'MIT',
private: true
}
? Looks good?: Yes
D:\web>
初始化完成,打开bower.json:
{
"name": "webtest",
"version": "0.1.0",
"authors": [
"yanlei <java.yanlei@163.com>"
],
"description": "前端测试项目",
"main": "./app/index.html",
"moduleType": [
"globals"
],
"license": "MIT",
"private": true
}
安装 angularjs :
D:\web>bower install --save angularjs
bower angularjs#* cached git://github.com/angular/bower-angular.git#1.3.3
bower angularjs#* validate 1.3.3 against git://github.com/angular/bower-angular.git
bower angularjs#* new version for git://github.com/angular/bower-angular.git#*
bower angularjs#* resolve git://github.com/angular/bower-angular.git#*
bower angularjs#* download https://github.com/angular/bower-angular/archive/v1.3.4.
bower angularjs#* extract archive.tar.gz
bower angularjs#* resolved git://github.com/angular/bower-angular.git#1.3.4
bower angularjs#~1.3.4 install angularjs#1.3.4
angularjs#1.3.4 bower_components\angularjs
再次打开bower.json:
{
"name": "webtest",
"version": "0.1.0",
"authors": [
"yanlei <java.yanlei@163.com>"
],
"description": "前端测试项目",
"main": "./app/index.html",
"moduleType": [
"globals"
],
"license": "MIT",
"private": true,
"dependencies": {
"angularjs": "~1.3.4"
}
}
打开web目录看一下:
安装bootstrap:
D:\web>bower install --save bootstrap
bower bootstrap#* cached git://github.com/twbs/bootstrap.git#3.3.1
bower bootstrap#* validate 3.3.1 against git://github.com/twbs/bootstrap.git#*
bower jquery#>= 1.9.1 cached git://github.com/jquery/jquery.git#2.1.1
bower jquery#>= 1.9.1 validate 2.1.1 against git://github.com/jquery/jquery.git#>= 1.9.1
bower bootstrap#~3.3.1 install bootstrap#3.3.1
bower jquery#>= 1.9.1 install jquery#2.1.1//jquery也安装了
bootstrap#3.3.1 bower_components\bootstrap//
└── jquery#2.1.1
jquery#2.1.1 bower_components\jquery
bower.json:
{
"name": "webtest",
"version": "0.1.0",
"authors": [
"yanlei <java.yanlei@163.com>"
],
"description": "前端测试项目",
"main": "./app/index.html",
"moduleType": [
"globals"
],
"license": "MIT",
"private": true,
"dependencies": {
"angularjs": "~1.3.4",
"bootstrap": "~3.3.1"
}
}
目录结构:
7.使用gulp
在工程根目录(web)下执行gulp命令:
D:\web>gulp
[11:26:39] Local gulp not found in D:\web
[11:26:39] Try running: npm install gulp
提示本地没有安装gulp ,需要安装,安装之间需要初始化 package.json文件:
D:\web>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (web) webtest //项目名称
version: (1.0.0) //项目版本
description: 前端测试项目 //说明
entry point: (index.js) //项目的程序入口
test command: //测试命令
git repository: //项目仓库地址
keywords://关键字 为了别人可以搜索到
author://作者
license: (ISC)//版权
About to write to D:\web\package.json:
{
"name": "webtest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {},//还没有依赖包
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
"author": "",
"license": "ISC"
}
Is this ok? (yes) yes
项目根目录下增加了package.json文件。
安装gulp到本地:
D:\web>npm install --save-dev gulp
npm WARN package.json webtest@1.0.0 No description
npm WARN package.json webtest@1.0.0 No repository field.
npm WARN package.json webtest@1.0.0 No README data
|
> v8flags@1.0.4 install D:\web\node_modules\gulp\node_modules\v8flags
> node fetch.js
flags for v8 3.14.5.9 cached.
gulp@3.8.10 node_modules\gulp
├── interpret@0.3.8
├── pretty-hrtime@0.2.2
├── deprecated@0.0.1
├── archy@1.0.0
├── minimist@1.1.0
├── semver@4.1.0
├── v8flags@1.0.4
├── tildify@1.0.0 (user-home@1.1.0)
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── liftoff@0.13.6 (extend@1.3.0, flagged-respawn@0.3.1, resolve@1.0.0, findup-sync@0.1.3)
├── orchestrator@0.3.7 (sequencify@0.0.7, stream-consume@0.1.0, end-of-stream@0.1.5)
├── vinyl-fs@0.3.13 (graceful-fs@3.0.4, defaults@1.0.0, mkdirp@0.5.0, strip-bom@1.0.0, vinyl@0.4.5, glob-watcher@0.0.6, glob-stream@3.1.17, through2@0.6.3
└── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, dateformat@1.0.8, vinyl@0.4.5, lodash@2.4.1, through2@0.6.3, multipipe@0.1.2, lodash.template@2.4.1)
打开package.json 看一下:
{
"name": "webtest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {},
"devDependencies": {
"gulp": "^3.8.10"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
执行gulp命令时,提示:
D:\web>gulp
[11:32:32] No gulpfile found
gulp执行需要gulpfile.js ,该 文件里定义了需要执行的任务。 可以手动建一个:
gulpfile.js
var gulp = require('gulp');
browserSync = require('browser-sync');
// Start the server
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./app"
}
});
});
// 将bower的库文件对应到指定位置
gulp.task('refBowerComponents',function() {
gulp.src('./bower_components/angularjs/angular.min.js')
.pipe(gulp.dest('./app/vender/js'));
gulp.src('./bower_components/angularjs/angular.min.js.map')
.pipe(gulp.dest('./app/vender/js'));
gulp.src('./bower_components/bootstrap/dist/js/bootstrap.min.js')
.pipe(gulp.dest('./app/vender/js'));
gulp.src('./bower_components/jquery/dist/jquery.min.js')
.pipe(gulp.dest('./app/vender/js'));
gulp.src('./bower_components/jquery/dist/jquery.min.map')
.pipe(gulp.dest('./app/vender/js'));
//css
gulp.src('./bower_components/bootstrap/dist/css/bootstrap.min.css')
.pipe(gulp.dest('./app/vender/css/'));
});
// Compile SASS & auto-inject into browsers
gulp.task('sass', function () {
return gulp.src('./app/sass/*.scss')
.pipe(sass({includePaths: ['scss']}))
.pipe(gulp.dest('./app/styles/style.css'))
.pipe(browserSync.reload({stream:true}));
});
// Reload all Browsers
gulp.task('bs-reload', function () {
browserSync.reload();
});
var files = [
'./app/*.html',
'./app/images/**/*.*',
'./app/views/**/*.html',
'./app/scripts/**/*.js',
'./app/styles/**/*.css'
];
// Watch scss AND html files, doing different things with each.
gulp.task('default', ['browser-sync'], function () {
gulp.watch("scss/*.scss", ['sass']);
gulp.watch(files, ['bs-reload']);
});
gulp详细文档见:http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/
这里使用了一个browser-sync,它能够开启一个静态web服务器,供测试,当源码发生变化时,可以自动刷新页面,不用担心缓存问题 。
安装browser-sync:(官网:http://www.browsersync.io/)
D:\web>npm install browser-sync --save-dev
npm WARN package.json webtest@1.0.0 No description
npm WARN package.json webtest@1.0.0 No repository field.
npm WARN package.json webtest@1.0.0 No README data
|
> ws@0.5.0 install D:\web\node_modules\browser-sync\node_modules\socket.io\node_modules\engine.io\node_modules\ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)
/
D:\web\node_modules\browser-sync\node_modules\socket.io\node_modules\engine.io\node_modules\ws>node "C:\Program Files\nodejs\node_modules\npm\bin\node-g
.js" rebuild
/
> ws@0.4.31 install D:\web\node_modules\browser-sync\node_modules\socket.io\node_modules\socket.io-client\node_modules\engine.io-client\node_modules\ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)
-
D:\web\node_modules\browser-sync\node_modules\socket.io\node_modules\socket.io-client\node_modules\engine.io-client\node_modules\ws>node "C:\Program Fil
..\node_modules\node-gyp\bin\node-gyp.js" rebuild
browser-sync@1.7.1 node_modules\browser-sync
├── emitter-steward@0.0.1
├── opt-merger@1.1.0
├── commander@2.5.0
├── easy-extender@2.1.0
├── opn@1.0.0
├── object-path@0.6.0
├── minimist@1.1.0
├── ua-parser-js@0.7.3
├── browser-sync-client@0.5.1
├── lodash@2.4.1
├── eazy-logger@1.5.0 (opt-merger@0.2.1)
├── dev-ip@0.1.7 (lodash@2.2.1)
├── resp-modifier@1.0.0 (minimatch@1.0.0)
├── glob-watcher@0.0.7 (gaze@0.5.1)
├── portscanner-plus@0.1.0 (q@1.0.1, portscanner@0.2.3)
├── serve-index@1.5.1 (parseurl@1.3.0, batch@0.5.1, accepts@1.1.3, debug@2.1.0, mime-types@2.0.3, http-errors@1.2.7)
├── connect@3.3.3 (utils-merge@1.0.0, parseurl@1.3.0, debug@2.1.0, finalhandler@0.3.2)
├── localtunnel@1.5.0 (debug@0.7.4, optimist@0.3.4, request@2.11.4)
├── serve-static@1.7.1 (utils-merge@1.0.0, escape-html@1.0.1, parseurl@1.3.0, send@0.10.1)
├── foxy@5.0.1 (http-proxy@1.6.2)
├── tfunk@2.1.0 (chalk@0.5.1)
└── socket.io@1.2.1 (debug@0.7.4, has-binary-data@0.1.3, socket.io-adapter@0.3.1, socket.io-parser@2.2.2, engine.io@1.4.3, socket.io-client@1.2.1)
安装完成后,执行gulpfile.js里定义的任务:‘refBowerComponents’,将bower_components中的第三方javascript及css文件copy 到 vender目录,refBowerComponents任务定义如下:
// 将bower的库文件对应到指定位置
gulp.task('refBowerComponents',function() {
gulp.src('./bower_components/angularjs/angular.min.js')
.pipe(gulp.dest('./app/vender/js'));
gulp.src('./bower_components/angularjs/angular.min.js.map')
.pipe(gulp.dest('./app/vender/js'));
gulp.src('./bower_components/bootstrap/dist/js/bootstrap.min.js')
.pipe(gulp.dest('./app/vender/js'));
gulp.src('./bower_components/jquery/dist/jquery.min.js')
.pipe(gulp.dest('./app/vender/js'));
gulp.src('./bower_components/jquery/dist/jquery.min.map')
.pipe(gulp.dest('./app/vender/js'));
//css
gulp.src('./bower_components/bootstrap/dist/css/bootstrap.min.css')
.pipe(gulp.dest('./app/vender/css/'));
});
执行命 令:gulp refBowerComponents
D:\web>gulp refBowerComponents
[14:44:08] Using gulpfile D:\web\gulpfile.js
[14:44:09] Starting 'refBowerComponents'...
[14:44:09] Finished 'refBowerComponents' after 13 ms
查看vender目录:
需要的js库文件已经copy 过来了。
环境就搭建好了,可以开发了。
需要测试的时候执行:gulp (default任务被调用),启用web服务器,端口为3000,以./app为webroot,当html或css或js变化时自动刷新打开的页面。
gulpfile.js 配置如下:
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./app"
}
});
});
// Reload all Browsers
gulp.task('bs-reload', function () {
browserSync.reload();
});
var files = [
'./app/*.html',
'./app/images/**/*.*',
'./app/views/**/*.html',
'./app/scripts/**/*.js',
'./app/styles/**/*.css'
];
// Watch scss AND html files, doing different things with each.
gulp.task('default', ['browser-sync'], function () {
gulp.watch("scss/*.scss", ['sass']);
gulp.watch(files, ['bs-reload']);
});
执行gulp命令:
D:\web>gulp
[14:53:19] Using gulpfile D:\web\gulpfile.js
[14:53:19] Starting 'browser-sync'...
[14:53:19] Finished 'browser-sync' after 43 ms
[14:53:19] Starting 'default'...
[14:53:19] Finished 'default' after 13 ms
[BS] Local URL: http://localhost:3000
[BS] Serving files from: ./app
8.使用git
打开 git bash :
在这个窗口中执行git命令。
需要配置用户名和邮箱:
$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"
配置完成后会在 C:\Users\Administrator生成一个.gitconfig文件。
a.初始化本地仓库:
在项目根目录下执行命令:git init
$git init
Initialized empty Git repository in /D/web/.git/
会生成一个.git的目录,就是git版本库的地址,提交的文件都会保存到该目录中,也可以从目录中检出之前版本的文件。
执行命令:git status (查看文件状态)
$git status
On branch master
Initial commit
Untracked files:
(use "git add <file>..." to include in what will be committed)
.gitignore
.idea/
app/
bower.json
bower_components/
gulpfile.js
node_modules/
package.json
nothing added to commit but untracked files present (use "git add" to track)
提示标红的文件未被git所监控,需要执行git add命令将文件提交到git索引区,再执行git commit 提交到版本库。
但目录:bower_components/,node_modules/,.idea/(使用webstromIDE开发自动生成的目录)不希望提交的版库,则在.git同级目录中创建.gitignore文件,这个文件表示忽略一些文件及目录,即不添加到版本库中。
.gitignore文件如下:
$more .gitignore
Thumbs.db
bower_components
node_modules
.idea
再次执行 git status
$git status
On branch master
Initial commit
Untracked files:
(use "git add <file>..." to include in what will be committed)
.gitignore
app/
bower.json
gulpfile.js
package.json
nothing added to commit but untracked files present (use "git add" to track)
配置的文件和目录被忽略掉了。
执行命令:git add -A ,(所有文件添加到git索引区)
$git add -A
再执行git status 看一下:
$git status
On branch master
Initial commit
Changes to be committed:
(use "git rm --cached <file>..." to unstage)
new file: .gitignore
new file: app/index.html
new file: app/vender/css/bootstrap.min.css
new file: app/vender/js/angular.min.js
new file: app/vender/js/angular.min.js.map
new file: app/vender/js/bootstrap.min.js
new file: app/vender/js/jquery.min.js
new file: app/vender/js/jquery.min.map
new file: bower.json
new file: gulpfile.js
new file: package.json
这些文件可以使用 git commit -m '说明' 提交到版本库,这些文件就生成了一个版本,可以根据说明再取出来。
$git commit -m '模版项目'
[master (root-commit) 9d3d713] '模版项目'
11 files changed, 378 insertions(+)
create mode 100644 .gitignore
create mode 100644 app/index.html
create mode 100644 app/vender/css/bootstrap.min.css
create mode 100644 app/vender/js/angular.min.js
create mode 100644 app/vender/js/angular.min.js.map
create mode 100644 app/vender/js/bootstrap.min.js
create mode 100644 app/vender/js/jquery.min.js
create mode 100644 app/vender/js/jquery.min.map
create mode 100644 bower.json
create mode 100644 gulpfile.js
create mode 100644 package.json
提交完成后执行git status 看一下:
$ git status
On branch master
nothing to commit, working directory clean
修改index.html ,再执行 git status:
$ git status
On branch master
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working direct
modified: app/index.html
no changes added to commit (use "git add" and/or "git commit -a")
Administrator@LNYD-03-04-YANL /d/web (master)
再次执行 git add 文件名,--> git commit -m 就可以再次提交了。
也可以执行 git checkout --文件名 ,从索引区取出覆盖修改过的工作目录的本地文件(未执行add的)。
$ git checkout -- app/index.html
Administrator@LNYD-03-04-YANL /d/web (master)
git checkout 执行完之后,发现index.html 又变回修改之间的样子了。
再次修改index.html ,并add 、commit 到版本库 。
现在测试一下,把index 回退到最版本:
使用git log 查看commit信息:
$ git log
commit 46b7d3018493a993c90038d59bc14c56414effb0
Author: yanlei <java.yanlei@163.com>
Date: Tue Nov 25 16:24:13 2014 +0800
增加HELLO输出
commit dd6969e241b41b40390a4a59501b1a47f03c20f6
Author: yanlei <java.yanlei@163.com>
Date: Tue Nov 25 16:04:53 2014 +0800
'空白目录补充'
commit 9d3d71370b78fed189b209cd59bbab4dfc161a5d
Author: yanlei <java.yanlei@163.com>
Date: Tue Nov 25 16:02:36 2014 +0800
'模版项目'
所index.html回退到第一次提交时的样子:
将指定版本的index.html 存入索引区:
$ git reset dd6969e241b41b40390a4a59501b1a47f03c20f6 app/index.html
Unstaged changes after reset:
M app/index.html
已在索引区恢复,但当前版本库和工作目录还是之间的文件。
提交到当前版本库:
$ git commit -m 'revert index.html'
[master d3a37db] revert index.html
1 file changed, 1 insertion(+), 1 deletion(-)
恢复工作目录中的index.html:
进入app目录:
$ git checkout index.html
再打开index.html ,发现已回退到最初版本。
如果当前程序想回退到某个commit 版本,先查看一下commit log :
$ git log
commit d3a37dbc2bdb039afec546ad1fa0d638506b3226
Author: yanlei <java.yanlei@163.com>
Date: Tue Nov 25 16:39:06 2014 +0800
revert index.html
commit 46b7d3018493a993c90038d59bc14c56414effb0
Author: yanlei <java.yanlei@163.com>
Date: Tue Nov 25 16:24:13 2014 +0800
增加HELLO输出
commit dd6969e241b41b40390a4a59501b1a47f03c20f6
Author: yanlei <java.yanlei@163.com>
Date: Tue Nov 25 16:04:53 2014 +0800
'空白目录补充'
commit 9d3d71370b78fed189b209cd59bbab4dfc161a5d
Author: yanlei <java.yanlei@163.com>
Date: Tue Nov 25 16:02:36 2014 +0800
'模版项目'
Administrator@LNYD-03-04-YANL /d/web/app (master)
如果要回退到‘增加HELLO输出’这一版(工作目录中文件被该版文件覆盖,该版之后修改过的未提交的将
找不到了。)
$ git reset --hard 46b7d3018493a993c90038d59bc14c56414effb0
HEAD is now at 46b7d30 增加HELLO输出
当前工作区的程序就回退到'增加HELLO输出'这一版了。 可以继续修改提交了。
git 命令:
git add 文件名 :把文件添加到索引区
git commit :把索引区的文件提前到版本库
git status:查看文件状态
git log:查看commit 日志
git checkout 文件名,文件修改但未add的可以从索引区检出覆盖本地工作目录文件
git reset HEAD 文件名:文件修改已经add过了,需要使用’git reset HEAD 文件名‘ ,从当前版本库检出覆盖索引区,再执行 git checkout 文件名,从索引区覆盖本地工作目录文件
git reset --hard commit版本号: 当前工作目录及索引区由指定commit版本号的程序覆盖。
git reset commit版本号 文件名:单个文件回退到某一版本号,仅覆盖索引区对应的文件,需要执行 commit 提交到当前版,git checkout 文件名,从索引区检出覆盖本地工作目录中对应的文件。
发布到远程仓库:
先生成ssh key:
$ ssh-keygen -t rsa -C "java.yanlei@163.com"
在 C:\Users\Administrator\.ssh下会生成密钥文件:
把id_rsa.pub文件的内容配置到远程仓库中,就允许连接到远程仓库了。
添加远程仓库地址到本地,并设置别名为 :origin
$ git remote add origin https://git.oschina.net/iframe/FrontWebTemplate.git
在工程根目录下,推送本地仓库内容到远程仓库:
$ git push origin master
Username for 'https://git.oschina.net': java.yanlei@163.com
Password for 'https://java.yanlei@163.com@git.oschina.net':
Counting objects: 29, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (23/23), done.
Writing objects: 100% (29/29), 272.41 KiB | 0 bytes/s, done.
Total 29 (delta 4), reused 0 (delta 0)
To https://git.oschina.net/iframe/FrontWebTemplate.git
* [new branch] master -> master
Administrator@LNYD-03-04-YANL /d/web/app (master)
这样在家里电脑上,生成ssh key ,配置到远程仓库,执行命令:
$ git clone https://git.oschina.net/iframe/FrontWebTemplate.git
Cloning into 'FrontWebTemplate'...
Username for 'https://git.oschina.net': java.yanlei@163.com
Password for 'https://java.yanlei@163.com@git.oschina.net':
remote: Counting objects: 29, done.
remote: Compressing objects: 100% (23/23), done.
remote: Total 29 (delta 4), reused 0 (delta 0)
Unpacking objects: 100% (29/29), done.
Checking connectivity... done.
Administrator@LNYD-03-04-YANL /d/web1
$ ls
FrontWebTemplate
Administrator@LNYD-03-04-YANL /d/web1
$ cd FrontWebTemplate
Administrator@LNYD-03-04-YANL /d/web1/FrontWebTemplate (master)
$ ls
app bower.json gulpfile.js package.json
Administrator@LNYD-03-04-YANL /d/web1/FrontWebTemplate (master)
进入colne 的项目目录,执行npm install 和 bower install 就可以了。
$ npm install
npm WARN package.json webtest@1.0.0 No description
npm WARN package.json webtest@1.0.0 No repository field.
npm WARN package.json webtest@1.0.0 No README data
-
> v8flags@1.0.4 install d:\web1\FrontWebTemplate\node_modules\gulp\node_modules\
v8flags
> node fetch.js
flags for v8 3.14.5.9 cached.
/
> ws@0.5.0 install d:\web1\FrontWebTemplate\node_modules\browser-sync\node_modul
es\socket.io\node_modules\engine.io\node_modules\ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)
-
d:\web1\FrontWebTemplate\node_modules\browser-sync\node_modules\socket.io\node_m
odules\engine.io\node_modules\ws>node "c:\Program Files\nodejs\node_modules\npm\
bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild
-
> ws@0.4.31 install d:\web1\FrontWebTemplate\node_modules\browser-sync\node_modu
les\socket.io\node_modules\socket.io-client\node_modules\engine.io-client\node_m
odules\ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)
\
d:\web1\FrontWebTemplate\node_modules\browser-sync\node_modules\socket.io\node_m
odules\socket.io-client\node_modules\engine.io-client\node_modules\ws>node "c:\P
rogram Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-g
yp\bin\node-gyp.js" rebuild
gulp@3.8.10 node_modules\gulp
├── pretty-hrtime@0.2.2
├── interpret@0.3.8
├── deprecated@0.0.1
├── archy@1.0.0
├── v8flags@1.0.4
├── minimist@1.1.0
├── tildify@1.0.0 (user-home@1.1.0)
├── semver@4.1.0
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-colo
r@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream
@0.1.5)
├── liftoff@0.13.6 (extend@1.3.0, flagged-respawn@0.3.1, resolve@1.0.0, findu
p-sync@0.1.3)
├── vinyl-fs@0.3.13 (graceful-fs@3.0.4, mkdirp@0.5.0, strip-bom@1.0.0, defaul
ts@1.0.0, vinyl@0.4.5, through2@0.6.3, glob-watcher@0.0.6, glob-stream@3.1.17)
└── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, dateformat@1.0.8, lodash@2.
4.1, vinyl@0.4.5, through2@0.6.3, multipipe@0.1.2, lodash.template@2.4.1)
browser-sync@1.7.1 node_modules\browser-sync
├── emitter-steward@0.0.1
├── opt-merger@1.1.0
├── easy-extender@2.1.0
├── commander@2.5.0
├── opn@1.0.0
├── object-path@0.6.0
├── eazy-logger@1.5.0 (opt-merger@0.2.1)
├── minimist@1.1.0
├── ua-parser-js@0.7.3
├── browser-sync-client@0.5.1
├── lodash@2.4.1
├── dev-ip@0.1.7 (lodash@2.2.1)
├── resp-modifier@1.0.0 (minimatch@1.0.0)
├── tfunk@2.1.0 (chalk@0.5.1)
├── foxy@5.0.1 (http-proxy@1.6.2)
├── connect@3.3.3 (utils-merge@1.0.0, parseurl@1.3.0, debug@2.1.0, finalhandl
er@0.3.2)
├── portscanner-plus@0.1.0 (q@1.0.1, portscanner@0.2.3)
├── serve-static@1.7.1 (utils-merge@1.0.0, escape-html@1.0.1, parseurl@1.3.0,
send@0.10.1)
├── glob-watcher@0.0.7 (gaze@0.5.1)
├── serve-index@1.5.1 (parseurl@1.3.0, batch@0.5.1, debug@2.1.0, accepts@1.1.
3, http-errors@1.2.7, mime-types@2.0.3)
├── localtunnel@1.5.0 (debug@0.7.4, optimist@0.3.4, request@2.11.4)
└── socket.io@1.2.1 (debug@0.7.4, has-binary-data@0.1.3, socket.io-adapter@0.
3.1, socket.io-parser@2.2.2, engine.io@1.4.3, socket.io-client@1.2.1)
$ bower install
bower cached git://github.com/angular/bower-angular.git#1.3.4
bower validate 1.3.4 against git://github.com/angular/bower-angular.git#~1.
3.4
bower cached git://github.com/twbs/bootstrap.git#3.3.1
bower validate 3.3.1 against git://github.com/twbs/bootstrap.git#~3.3.1
bower cached git://github.com/jquery/jquery.git#2.1.1
bower validate 2.1.1 against git://github.com/jquery/jquery.git#>= 1.9.1
bower install angularjs#1.3.4
bower install bootstrap#3.3.1
bower install jquery#2.1.1
angularjs#1.3.4 bower_components\angularjs
bootstrap#3.3.1 bower_components\bootstrap
└── jquery#2.1.1
jquery#2.1.1 bower_components\jquery
执行gulp命 令:
$ gulp
[17:29:50] Using gulpfile d:\web1\FrontWebTemplate\gulpfile.js
[17:29:50] Starting 'browser-sync'...
[17:29:50] Finished 'browser-sync' after 53 ms
[17:29:50] Starting 'default'...
[17:29:50] Finished 'default' after 15 ms
[BS] Local URL: http://localhost:3000
[BS] Serving files from: ./app
web 服务器启动了。 修改测试了。