使用gulp 完成前端自動化

剛出來實習，剛開始第一個項目就被深深的傷害到了，項目進度緩慢，在一些很瑣碎的地方耗費了大量時間，就寫css時: 量像素->切換到sublime編輯器->寫css->重新整理頁面->再切換..淚奔，入了前端的坑啊..

前兩天在網上看到gulp這個神器,照着教程怎麼都無法成功，Σ(｀д′*ノ)ノ，後來發現是教程太老了！！浪費了好多時間，找了一天終于找到完整的了，把學習筆記分享出來咯( ╯▽╰)

安裝node.js

node.js這個神器大家都知道吧，到網上下載下傳就ok了，安裝成功後在 指令提示符工具中輸入:

node -v           

界面提示nodejs的版本号表示安裝成功。

GIT

git是一款版本控制工具，在這篇部落格中是用不到版本控制的，使用git隻是單純的使用他的指令行。

網上有git的安裝教程，可以到網上搜尋╮(╯_╰)╭。（等我把git學完了也會單獨寫幾篇blog吧)

建立項目根目錄

直接右擊滑鼠，選擇 git bash 打開git版本控制器

git bash 會自動擷取你的目前選擇的檔案夾路徑。

初始化項目配置

在git 界面輸入 npm init ,初始化項目：

npm init           

接着會彈出提示，要求設定項目名稱，版本号，描述，關鍵字等等。你可以一路回車，也可自己設定這些值

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible 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: (gulp)   //這裡要求輸入項目名稱，如果不輸入則使用檔案夾名稱gulp當做項目名稱,一下各項都是如此。
version: (1.0.0) //這裡要求輸入版本号
description:  //項目描述
entry point: (index.js) //項目入口
test command: //測試
git repository: //版本庫
keywords: //關鍵字
author: //作者
license: (ISC) //許可
About to write to C:\Users\Administrator\Desktop\gulp\package.json: //成功後建立一個packsge.json的檔案

//這裡就是項目配置的内容（start）
{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
//這裡就是項目配置的内容（end）

Is this ok? (yes) y //是否完成？這裡輸入yes就行了           

安裝gulp

gulp 需要安裝兩次，一次是全局的，一次是目前項目檔案夾的，

如果，網速很慢下載下傳不下來，可以使用cnpm 下載下傳，具體百度=￣ω￣=

npm install gulp -g  //全局gulp,在git中輸入 gulp -v 顯示gulp版本号，表示安裝成功。            

npm install gulp --save-dev  //目前檔案夾下安裝           

安裝完成後，會發現根目錄下多了個 node-modules 檔案夾，安裝好的 gulp 就在這裡了，

package.json檔案中也多了一個 “devDependencies” 依賴項 gulp”: “^3.9.1”

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {  //增加的依賴項，表示目前項目依賴這個檔案
    "gulp": "^3.9.1"  //被依賴的gulp 檔案，後面顯示版本号
  }
}           

完成

關于前端自動化的項目建立以及一些簡單配置，gulp的安裝以及完成，接下來是使用gulp-sass 編譯 sass 檔案 以及

用gulp-livereload 自動重新整理頁面