Node環境配置及Gulp工具

1.GitLab網上使用

• 兩種登陸方式

  • 經過Http登陸，須要用戶名和密碼

  • 經過SSH登陸，不須要用戶名和密碼只須要RSA密鑰就行，RSA經過在git bash中輸入 ssh-keygen -t rsa生成，生成好的密鑰經過生成的路徑找到對應的id_rsa.pub文件，將其內容添加到gitlab中並保存ssh密鑰，之後的push 或者pull操做都不會須要用戶名和 密碼。

• 克隆倉庫

  • git clone 你的地址（這裏能夠經過https地址或者經過SSH方式獲取你的網上倉庫）

• 獲取倉庫內容

  • git pull 地址/origin master 能夠經過https地址獲取倉庫數據，可是這樣作太麻煩了，使用origin至關於替換了以前的地址用法都是同樣的。

    • 其實這樣使用包含了兩個操做

    • git fetch origin (獲取遠端的分支)

    • git merge origin/master （合併遠端分支）

• 遠端分支管理

  • 建立遠端分支

    • 1.在本地建立好分支之後，本地 push 該分支便可

    • 2.在網頁上建立分支好之後，經過git fetch獲取該分支

  • 刪除遠端分支

  • git push origin --delete 須要刪除的分支，那麼其餘人若是須要更新分支 須要 git fetch -p

• git 補充知識

  • 保存當前的工做現場

    • 使用git stash保存當前的工做現場，那麼就能夠切換到其餘分支進行工做，或者在當前分支上完成其餘緊急的工做，好比修訂一個bug測試提交。

      • 1 在經過git add 提交完代碼到緩存區之後 輸入git stash 保存現場，完成之後經過建立其餘分支或者跳轉其餘分支解決對應的工做

      • 2 解決完對應的工做後跳轉到以前的工做分支中在經過 git stash pop 還原現場

  • 查看隱藏分支 git branch -a

2.Node

• 什麼是Node

  • Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境

• 官網

• Node.js(難道是相似於jQuery的js文件)

• chrome瀏覽器的JS引擎(V8引擎)

• javascript組成

  • ECMAScript 基本語法

  • DOM

  • BOM

• node 只解析ES,像aler()之類的就不能使用了

  • 加上谷歌V8對js的解析速度大大提升

  • 提供了一些系統級API,好比對文件的操做

  • 其實就是一個js運行環境

• 安裝Node

  • 不要安裝在中文路徑

  • nvm Node Version Manager（版本管理）

  • nrm Node Registry Manager（路徑管理）

  • npm Node Package Manager （依賴包管理）www.npmjs.com npm下載地址

• 經常使用nvm命令

  • nvm ls 查看node下載的版本

  • nvm install 4.6.0 下載名爲4.6.0的版本

  • nvm use 4.6.0 切換4.6.0版本

• 經常使用nrm 命令

  • nrm ls查看不一樣的下載源地址

  • nrm use cnpm 切換到cnpm下載源

• 經常使用的npm命令

  • npm init 初始化一個 package.json 文件，若是加上-y就不須要在敲回車了

  • npm install -g bower 全局安裝bower

  • npm install jquery --save-dev 本地安裝jquery並記錄到package.json中

  • npm uninstall 包名 刪除包 若是是全局安裝就加上-g

3.Bower

• 什麼是bower

  • bower是一個前端的管理工具，主要用來管理前端的包例如：Jquery、BootStrap、Angular等。

  • 有人會有疑問爲何npm也是管理工具我還要學習bower管理工具？

    • 緣由很簡單，由於就像有迅雷下載你爲何還要用QQ旋風、電驢、快車下載，其實緣由都同樣由於npm在某些時候不能知足用戶需求那麼市場上就會出現替代產品。

  • bower網站

    • 官網

    • 中文網

  • 如何使用bower進行管理

    • 安裝Bower:npm install -g bower

    • 建立包bower.json:bower init

    • 安裝各類包文件:bower install < package>,以下載jquery: bower install jquery ，bower install jquery#1.8.0 選擇下載1.8.0版本

    • 卸載包文件:bower uninstall < package>

    • 包搜索：bower search <package>

    • 包版本：bower info <package>

    • 修改Bower安裝位置：在項目根目錄下建立.bowerrc而後添加如下內容`{

           "directory": "vendor"//這裏是指定包安裝路徑，加完之後記得刪除這條註釋

      }`

4.Gulp

• 什麼是gulp

  • 用自動化構建工具加強你的工做流程！

• 什麼又是自動化構建

  • 當一個項目足夠大的時候，咱們會採按功能劃分給不一樣的人員開發，進一步各個功能又會劃分紅不一樣的模塊進行開發，這就會形成一個完整的項目其實是由許許多多多的「代碼版段」組成的；咱們開發中又會用到less、sass等一些預處理程序，須要將這些預處理程序進行解析；爲了減小請求須要將css、javascript進行合併；爲了加速請求須要對html、css、javascript、images進行壓縮；這一系列的任務徹底靠手功完成幾乎是不可能的，須要藉助構建工具才能夠實現。所謂構建工具是指經過簡單配置就能夠幫咱們實現合併、壓縮、校驗、預處理等一系列任務的軟件工具。

• 不一樣的構建工具

  • 常見的構建工具包括：Grunt、Gulp、F.I.S（百度出品）

• gulp的優勢

  • 易於使用經過代碼優於配置的策略，Gulp 讓簡單的任務簡單，複雜的任務可管理。

  • 構建快速利用 Node.js 流的威力，你能夠快速構建項目並減小頻繁的 IO 操做。

  • 插件高質Gulp 嚴格的插件指南確保插件如你指望的那樣簡潔高質得工做。

  • 易於學習經過最少的 API，掌握 Gulp 絕不費力，構建工做盡在掌握：如同一系列流管道。

• 入門指南

  • 1. 全局安裝 gulp：$ npm install --global gulp-cli

  • 1. 做爲項目的開發依賴（devDependencies）安裝：$ npm install --save-dev gulp

  • 1. 在項目根目錄下建立一個名爲 gulpfile.js 的文件： ` var gulp = require('gulp'); gulp.task('default', function() { // 將你的默認的任務代碼放在這}); `

  • 1. 運行 gulp： $ gulp

• gulp示例代碼· gulp.task('image', function () {return gulp.src('./images/*', {base: './'})

  .pipe(imagemin())
  .pipe(gulp.dest('./dist'));

  }); ·

• gulp插件庫：

  [官網地址](http://gulpjs.com/plugins/)
  [npm也能找到gulp插件](https://www.npmjs.com/)

• 經常使用插件gulp-autoprefixer(css加前綴)https://www.npmjs.com/package/autoprefixer`//經過require引用gulpvar gulp = require('gulp');var autuprefixer=require('gulp-autoprefixer');//添加css前綴gulp.task('cssautuprefixer',function () { //經過src獲取到須要的css文件 //*表示所有匹配 //pipe管道 起到一個承前啓後的做用 //dest輸出結果 gulp.src('./css/*.css')

    .pipe(autuprefixer())
    .pipe(gulp.dest('./dist/css'));

  });`

gulp-uglify(最小化 js 文件)https://www.npmjs.com/package/gulp-uglify `//最小化jsgulp.task('uglify',function () { gulp.src('./js/*.js', {base: './'})

   .pipe(uglify())
   .pipe(gulp.dest('./dist'))

});`gulp-htmlmin(壓縮html文件)https://www.npmjs.com/package/gulp-minify-html`//壓縮html頁面gulp.task('htmlmin',function () {

gulp.src('./*.html', {base: './'})
.pipe(htmlmin({
    collapseWhitespace: true,
    removeComments:true,
    minifyJS:true,
}))
.pipe(gulp.dest('./dist'));

});`gulp-imagemin(最小化圖像)https://www.npmjs.com/package/gulp-imagemin`//壓縮圖片gulp.task('imagemin',function () {

gulp.src(['./images/*.jpg','./images/*.png'], {base: './'})
    .pipe(imagemin())
    .pipe(gulp.dest('./dist'))

});

​