前端工程搭建NodeJs+gulp+bower

需要node、npm的事先安装！！

1、nodejs安装程序会在环境变量中添加两个变量：

系统环境变量中：path 增加C:\Program Files\nodejs\ 因为在该目下存在node.exe 和npm.cmd,加入path后可以全局调用该命令。

用户变量中设置：

path=C:\Users\Administrator\AppData\Roaming\npm

该目录下node_modules目录用来存放安装的全局的nodejs模块，并在npm目录中生成相应的命令行可执行的文件。而将该路径加入path 是为了全局调用nodejs模块。

2、npm 简介

nodejs 安装过程中会自动安装npm,npm 是nodejs的程序包管理工具

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

4.安装bower

Bower是一个适合Web应用的包管理器，它擅长前端的包管理。

Bower安装方法：npm install -g bower， -g参数是全局安装，在哪个目录下执行这个命令都行，bower 最终被安装到C:\Users\Administrator\AppData\Roaming\npm\node_modules\（默认情况下）

使用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中的dependencies中,还写入devDependencies

5.安装gulp

gulp 用于前端项目的构建，如监控程序文件变化，检查js代码正确性，压缩js,源码转换到发布目录，启动web 服务测试等等。

安装方法： npm install -g gulp

C:\>npm install -g gulp

6.建立工程目录结构

工程的目录结构可以是任意的，没有固定的结构，自已觉得合理就好了。

前端工程搭建NodeJs+gulp+bower

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目录看一下：

前端工程搭建NodeJs+gulp+bower

安装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"

  }

}

目录结构：

前端工程搭建NodeJs+gulp+bower

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": {

    "gulp": "^3.8.10"

  },

  "devDependencies": {},

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC"

}

Is this ok? (yes) yes

项目根目录下增加了package.json文件。

安装gulp到本地：

D:\web>npm install gulp

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

├── v8flags@1.0.4

├── tildify@1.0.0 (user-home@1.1.0)

├── semver@4.1.0

├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5)

├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, has-ansi@0

├── liftoff@0.13.6 (extend@1.3.0, flagged-respawn@0.3.1, resolve@1.0.0, findup-sync@0.1.3)

├── vinyl-fs@0.3.13 (graceful-fs@3.0.4, mkdirp@0.5.0, strip-bom@1.0.0, defaults@1.0.0, vinyl@0.4

└── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, dateformat@1.0.8, lodash@2.4.1, vinyl@0.4.5, t

执行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']);

});

秒客网

前端工程搭建NodeJs+gulp+bower

相关文章