前端工程搭建NodeJs+gulp+bower

時間 2019-11-07

標籤前端工程搭建 nodejs+gulp+bower nodejs gulp bower 欄目 JavaScript 简体版

原文原文鏈接

$ cd frontend目錄
$ npm install
$ bower install
$ gulp servejavascript

一安裝nodejscss

nodejs 官司網下載安裝文件html

官網地址：http://www.nodejs.org/download/前端

由於是在64位win7上開發，所以下載windows64位msi版本的nodejs.java

下載完成後，進行安裝，默認安裝路徑爲C:\Program Files\nodejs\，直接下一步就能夠了。node

安裝完成以後，在命令窗口執行，node -v (顯示nodejs版本) 和npm -v (顯示npm版本)可使用這兩個命令查看是否安裝成功：jquery

2.npm 簡介git

nodejs 安裝過程當中會自動安裝npm,npm 是nodejs的程序包管理工具，用於從網上下載程序包並安裝還能夠管理工程對程序包的依賴，相似於java平臺上的maven。angularjs

程序包是指實現了某些功能，並能夠運行於nodejs平臺，通常是開源程序，如壓縮js代碼程序，檢查js代碼正確性的程序等等。github

使用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-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詳細說明見：http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

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中的dependencies中,還寫入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": {
    "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']);
});