使用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 自動刷新頁面