1.1環境css
運行環境nodejshtml
使用gulp自動化編譯scss,js等vue
使用bower管理依賴插件node
使用requirejs做爲模塊加載器jquery
使用bootstrap css做爲樣式框架linux
依賴jquery,jquery-ui兩個庫git
1.2項目目錄github
node_modules爲依賴模塊文件web
.bowerrc 爲bower配置文件,包含模塊安裝目錄配置express
bower.json爲bower配置文件,包含依賴模塊等
gulpfile.js爲gulp任務配置文件
package.json爲程序配置文件,包含npm依賴模塊等
Lib爲bower.json dependencies中的依賴文件
進入正題:
node.js開發環境搭建
一、進入官網https://nodejs.org/en/download/
二、下載文件後,雙擊安裝
三、安裝相關環境
打開C:\Program Files\nodejs目錄你會發現裏面自帶了npm,直接用npm安裝相環境既可
安裝步驟以外的引伸:
npm介紹
一、說明:npm(node package manager)nodejs的包管理器,用於node插件管理(包括安裝、卸載、管理依賴等);
二、使用npm安裝插件:命令提示符執行npm install <name> [-g] [--save-dev];
2.一、<name>:node插件名稱。例:npm install gulp --save-dev
2.二、-g:全局安裝。將會安裝在C:\Users\Administrator\AppData\Roaming\npm,而且寫入系統環境變量; 非全局安裝:將會安裝在當前定位目錄; 全局安裝能夠經過命令行在任何地方調用它
2.三、--save:將保存配置信息至package.json(package.json是nodejs項目配置文件);
2.四、-dev:保存至package.json的devDependencies節點,不指定-dev將保存至dependencies節點;通常保存在dependencies的像這些express/ejs/body-parser等等。
2.五、爲何要保存至package.json?由於node插件包相對來講很是龐大,因此不加入版本管理,將配置信息寫入package.json並將其加入版本管理,其餘開發者對應下載便可(命令提示符執行npm install,則會根據package.json下載全部須要的包,npm install --production只下載dependencies節點的包)。
一、說明:由於npm安裝插件是從國外服務器下載,受網絡影響大,可能出現異常,若是npm的服務器在中國就行了,因此咱們樂於分享的淘寶團隊幹了這事。!來自官網:「這是一個完整 npmjs.org 鏡像,你能夠用此代替官方版本(只讀),同步頻率目前爲 10分鐘 一次以保證儘可能與官方服務同步。」;
二、官方網址:http://npm.taobao.org;
三、安裝:命令提示符執行npm install cnpm -g --registry=https://registry.npm.taobao.org
; 注意:安裝完後最好查看其版本號cnpm -v或關閉命令提示符從新打開,安裝完直接使用有可能會出現錯誤;
注:cnpm跟npm用法徹底一致,只是在執行命令時將npm改成cnpm(如下操做將以cnpm代替npm)。
npm install -g cnpm --registry=http://registry.npm.taobao.org
Bower使用(爲何使用bower,由於它能夠節省掉你去git或是網上找js的時間;)
bower的安裝
1,首先在個人系統 安裝 nodejs。由於個人系統是windows,還須要安裝msysgit,注意圖二中的選項
2,以後就能夠用npm包管理工具下載並全局安裝bower:
>npm install -g bower
全局安裝bower 後,能夠查看Bower的幫助信息,使用命令:
>bower help
3, 初始化當前工程的bower,此操做會在當前目錄下生成bower.json文件:
>bower init
bower的使用
使用了bower的項目都會在目錄下有一個bower.json文件。在該文件同級目錄下,使用以下命令便可安裝相關依賴庫。
>bower install
注:bower下載安裝依賴庫其實是使用git進行下載。對於linux系統,因爲默認都有安裝git,因此通常沒問題。可是windows系統通常沒有git。在windows系統下須要肯定安裝了git客戶端,建議使用同捆的git bash命令行來執行bower install命令。或者把git目錄加入windows的環境變量中,再在命令行中執行bower install命令。()
使用bower安裝某個特定類庫,例如jquery:
> bower install jquery
使用bower更新某個特定類庫,例如jquery:
>bower update jquery
刪除包,例如jquery (若是包已經被依賴,則不能刪除)
>bower uninstall jquery
試着在項目文件夾下,下載jquery 和 underscore
bower install jquery underscore
而後就能夠看到項目文件夾下多了bower_components(默認目錄),再就是兩個插件包了
初步這樣也就好了,可是/bower_components這個目錄有點讓人不習慣,我想把東西下載到我習慣的目錄裏。須要加一個.bowerrc文件。注意,不須要名字什麼的,只要新增一個.bowerrc就好了。
提示:用cmd命令建立文件以下
裏面能夠定義下載目錄:
{
"directory": "app/vendor"
}
一樣的cmd命令再執行一遍,此次能夠看到文件下載到app/vendor中了。
因爲在實際安裝過程當中,沒有運行命令 >bower init 如今從新運行該命令 生成bower.json
遇到了問題
解決辦法:在 windows cmd(管理者) 裏面使用 bower init,而不是在 git bash 裏面使用 bower init.
使用bower install jquery --save纔會把jquery依賴記入到bower.json。
要安裝某個版本使用#,如安裝juqery1.9.1,可使用bower install jquery#1.9.1。
除了用包名安裝,也能夠指定git地址,進行安裝,如bower install https://github.com/jquery/jquery。
bower install --save handlebars 後就會看到handlebar 在bower.json的dependencies裏,若是不加--save就不會有。
接下來刪了app/vendor下的全部內容,而後bower install,他會把bower.json中的dependencies從新下載。
一、說明:全局安裝gulp目的是爲了經過她執行gulp任務;
二、安裝:命令提示符執行cnpm install gulp -g;
三、查看是否正確安裝:命令提示符執行gulp -v,出現版本號即爲正確安裝。
2.一、說明:package.json是基於nodejs項目必不可少的配置文件,它是存放在項目根目錄的普通json文件;
2.二、它是這樣一個json文件(注意:json文件內是不能寫註釋的,複製下列內容請刪除註釋):
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "name": "test", //項目名稱(必須) "version": "1.0.0", //項目版本(必須) "description": "This is for study gulp project !", //項目描述(必須) "homepage": "", //項目主頁 "repository": { //項目資源庫 "type": "git", "url": "https://git.oschina.net/xxxx" }, "author": { //項目做者信息 "name": "surging", "email": "surging2@qq.com" }, "license": "ISC", //項目許可協議 "devDependencies": { //項目依賴的插件 "gulp": "^3.8.11", "gulp-less": "^3.0.0" } } |
2.三、固然咱們能夠手動新建這個配置文件,可是做爲一名有志青年,咱們應該使用更爲效率的方法:命令提示符執行cnpm init
2.四、查看package.json幫助文檔,命令提示符執行cnpm help package.json
特別注意:package.json是一個普通json文件,因此不能添加任何註釋。參看 http://www.zhihu.com/question/23004511
3.一、安裝:定位目錄命令後提示符執行cnpm install --save-dev
;
3.二、本示例以gulp-less爲例(編譯less文件),命令提示符執行cnpm install gulp-less --save-dev
;
3.三、將會安裝在node_modules的gulp-less目錄下,該目錄下有一個gulp-less的使用幫助文檔README.md;
3.四、爲了能正常使用,咱們還得本地安裝gulp:cnpm install gulp --save-dev
;
PS:細心的你可能會發現,咱們全局安裝了gulp,項目也安裝了gulp,全局安裝gulp是爲了執行gulp任務,本地安裝gulp則是爲了調用gulp插件的功能。
4.一、說明:gulpfile.js是gulp項目的配置文件,是位於項目根目錄的普通js文件(其實將gulpfile.js放入其餘文件夾下亦可)。
4.二、它大概是這樣一個js文件(更多插件配置請查看這裏):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//導入工具包 require('node_modules裏對應模塊') var gulp = require('gulp'), //本地安裝gulp所用到的地方 less = require('gulp-less');
//定義一個testLess任務(自定義任務名稱) gulp.task('testLess', function () { gulp.src('src/less/index.less') //該任務針對的文件 .pipe(less()) //該任務調用的模塊 .pipe(gulp.dest('src/css')); //將會在src/css下生成index.css });
gulp.task('default',['testLess', 'elseTask']); //定義默認任務 elseTask爲其餘任務,該示例沒有定義elseTask任務
//gulp.task(name[, deps], fn) 定義任務 name:任務名稱 deps:依賴任務名稱 fn:回調函數 //gulp.src(globs[, options]) 執行任務處理的文件 globs:處理的文件路徑(字符串或者字符串數組) //gulp.dest(path[, options]) 處理完後文件生成路徑 |
bower incnstall 表示安裝bower.json中的依賴文件到lib
npm install 表示安裝package.json中的外掛到node_modules
gulp環境下安裝SASS
1.首先全局環境下配置淘寶鏡像(這裏是全局環境,不是項目根目錄)
執行語句:npm install -g cnpm --registry=https://registry.npm.taobao.org
2.執行項目根目錄,安裝
執行語句:cnpm install --save-dev node-sass
3.仍然是項目根目錄,安裝
執行語句:npm install --save-dev gulp-sass
gulp運行
輸入gulp
Require.js使用
一、爲何要用require.js
最先的時候,全部Javascript代碼都寫在一個文件裏面,只要加載這一個文件就夠了。後來,代碼愈來愈多,一個文件不夠了,必須分紅多個文件,依次加載。
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>
這段代碼依次加載多個js文件。
這樣的寫法有很大的缺點。首先,加載的時候,瀏覽器會中止網頁渲染,加載文件越多,網頁失去響應的時間就會越長;其次,因爲js文件之間存在依賴關 系,所以必須嚴格保證加載順序(好比上例的1.js要在2.js的前面),依賴性最大的模塊必定要放到最後加載,當依賴關係很複雜的時候,代碼的編寫和維 護都會變得困難。
require.js的誕生,就是爲了解決這兩個問題:
(1)實現js文件的異步加載,避免網頁失去響應;
(2)管理模塊之間的依賴性,便於代碼的編寫和維護。
二、require.js的加載
<script src="js/require.js"></script>
加載require.js之後,下一步就要加載本身的代碼了。假定本身的代碼文件是main.js,也放在js目錄下面。那麼,只須要寫成下面這樣就好了:
<script src="js/require.js" data-main="js/main"></script>
三、模塊的加載
1)main.js
require.config({
//baseUrl: "../lib",
shim: {
'underscore': {
exports: '_'
},
},
paths: {
"jquery": "../lib/jquery/dist/jquery.min",
"underscore": "../lib/underscore/underscore-min",
"selector":"selector"
}
});
require(['jquery', 'underscore','selector'], function ($, _,selector){
alert(selector.add(1,1));
});
2)模塊的寫法 selector.js
define(function() {
var add = function(x,y) {
return x+y;
}
return {
add:add
};
});
我的實踐搭環境整理資料參考
參照:https://jingyan.baidu.com/article/14bd256e7f7d7fbb6d2612c4.html
npm install cnpm -g --registry=https://registry.npm.taobao.org
;
cnpm install msysgit –save-dev
.bowercc建立完後手動輸入{「directory」:」lib」}
cmd命令 (gulp啓動)或webstorm啓動gulp