前端工程搭建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.建立工程目錄結構

 

 工程的目錄結構可以是任意的，沒有固定的結構，自已覺得合理就好了。

 

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 <[e-mail]>
? 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 <[e-mail]>'
  ],
  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 <[e-mail]>"
  ],
  "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 <[e-mail]>"
  ],
  "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 <[e-mail]>"
  ],
  "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": {
    "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']);
});