前端工程籌建NodeJs+gulp+bower

1、安裝nodejs

nodejs 官網下載安裝文件

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

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-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

查看gulp版本號：

C:\Windows>gulp --version

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?: YesD:\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.4angularjs#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同樣執行。

7.使用gulp?

?在工程根目錄（web）下執行gulp命令：

1 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.jsflags 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'));//cssgulp.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']); });


轉自：http://www.myexception.cn/javascript/1781968.html(為方便使用，本人略微有修改) posted on 2015-10-27 11:28?發哥要做活神仙(筆記) 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/91allan/p/4913689.html

總結

以上是生活随笔為你收集整理的前端工程筹建NodeJs+gulp+bower的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。