gulp安裝流程、使用方法及CMD常用命令導覽
一、名詞介紹：
Npm——node包管理工具
一開始我不理解，包管理工具是什么鬼。后來用到的gulp也好，gulp的插件包也好，都是要在npm這個里邊弄出來的。
可以理解為，一個硬盤，里邊放的各種整理好的、適用於各種功能的且不重復的文件夾（插件），然后我們需要啥，就去里邊摘下來。
當然也可以用它來刪除插件
1、安裝：npm install -g rimraf（全局安裝），如果安裝了cnpm，也可使用cnpm install -g rimraf 命令
2、使用：先定位目標文件夾的父級目錄，然后命令行輸入rimraf ***（***為需要刪除的文件夾名稱）
//反正基於他的命令語句就有很多，常用的我先搞到這里
//其他相應的放到相應上下文中好了，本來打算單獨搞一篇，但是沒頭沒尾的，適合有基礎的查字典用
//不過可以考慮整理一個“字典”
Cnpm
Gulp——前端自動化系統構建工具
好吧，我知道這不說人話了額，因為我剛看到這幾個字也是冪次方臉懵逼。說白了就是一個“流水線工作台”
Package.json——基於nodejs項目必不可少的配置文件，存放於項目跟目錄，普通的json文件。
json文件內不能寫注釋，所以package文件內也不能有注釋信息
Gulpfile.js——gulp項目配置文件
全局目錄：管理員目錄C:\Users\Administrators。（后來發現，不同人的電腦，管理員目錄是不一樣的：有的是C:\Users\Administrators，但是有的人是在一個Appdata的隱藏文件夾下的更深的目錄里)
本地目錄：除c盤以外，任何其他硬盤中一個你放置自己項目的文件夾路徑。比如我的項目放在了D盤的test文件夾中，那我的本地目錄就是：D:\test
二、安裝流程：
1．Node環境安裝
2．Npm-
3．->Cnpm
4．安裝gulp【特別說明：gulp需要安裝兩次，一全局，一局部】
a) 全局安裝gulp
5．跳轉本地項目目錄
6．安裝package.json配置文件
7．安裝本地gulp
a) 本地安裝gulp+package.json配置文件（初始化項目配置）+gulpfile.js文件
8．安裝gulp插件
9．配置gulpfile.js（9,8可以反過來，可以js文件中需要什么插件再裝什么插件）
10．Gulp實踐流程：配置gulpfile.js文件命令，下載、調用gulp插件。
——————————————————————————————————————
1．node環境安裝：
Node官網下載node安裝文件：https://nodejs.org/en/
安裝方法：一直點下一步。。。。。
2．npm：
據說一般情況下，安裝好nodejs后，npm就裝好了。
這時要看一下版本號就知道了:命令行輸入——
node -v
npm -v
node -v查看安裝的nodejs版本，出現版本號，說明剛剛已正確安裝nodejs。PS：未能出現版本號，請嘗試注銷電腦重試；
npm -v查看npm的版本號，npm是在安裝nodejs時一同安裝的nodejs包管理器，
最后出現版本號就是裝上了。
3．cnpm
為什么要安裝cnpm？據說npm的服務器在國外，如果我們在國內從npm上下載文件會反應慢，而且可能會異常報錯。。裝上這個東東就快了。。。
安裝命令：
——全局安裝：npm install -g cnpm --registry=https://registry.npm.taobao.org
定位到本地目錄(你要放項目的目錄）之后再安裝局部鏡像
——局部安裝：npm install cnpm --registry=https://registry.npm.taobao.org
**裝好cnpm后，接下來你的命令中，都要寫cnpm而不是npm了。
**其實，鏡像只要裝到局部（本地目錄）就好了，畢竟全局我們只裝一個gulp，
但是在本地目錄中卻要裝好多個用到的gulp插件，如果沒有鏡像，要等半天也是不開心的。
4．安裝全局gulp
全局安裝（全局安裝gulp目的是執行gulp任務）
安裝命令：cnpm install gulp -g
安裝完畢后，看一下版本號有沒有(命令行輸入：gulp -v)，就知道有沒有安裝成功了
注意：沒有裝cnpm的，這里用npm，以后不再贅述
5．定位目錄，
定位目錄：就是找到你要開始創建項目的位置，在這個位置再建一個gulp項目文件夾，以后就可以在這里開始工作了。
定位命令： cd+ 空格 + 目錄路徑
其他一些周邊常用命令：
cd 定位到目錄，用法：cd+ 空格 + 路徑 ；
cd.. 返回上一級目錄
D: 定位到D盤，其他盤同理。用法：盤符字母（大寫）加冒號
dir 列出文件列表；
mkdir newfile_name 創建新的子目錄文件夾newfile_name；
cls 清空命令提示符窗口內容。（有時候命令行好幾頁了，用它一鍵清空）
../ 也可以返回上一級目錄
有這幾個命令就夠用了，另外別問我怎么回到全局(后來發現我的電腦是直接按 C: 回車就可以，不知道其他的)，我都是點了cmd右上角的叉叉然后重新打開的。。。
小tips：用dir看清楚這個地方的所有文件，然后cd定位過去
示例：
比如我現在是在管理員目錄下
想去桌面看看：
回車
我就到了桌面了
然后想看桌面下的文件目錄
回車
就看到了這些文件列表。。。
然后我就命令行輸入 cd C:\Users\lenovo\Documents\GitHub\exe 回車
就定位到那個目錄下了
現在命令行執行的次數好多，代碼好亂，我的命令行現在已經好幾頁了咋辦？
清空命令行：cls
同樣回車
就干凈了
至於返回上一級目錄的，實現我也不知道，就實驗了一把
看出來了吧，只有 cd ../ 起作用了
所以：命令行返回上一級目錄的命令就是 cd ../ 或者cd..
6．創建package.json文件——初始化項目配置
安裝命令：cnpm init（或者npm init）
Package文件里的配置中：
項目名稱name，
項目版本version，
項目描述description
以上這三個是必須填寫的，其他的就一直回車就ok了。
有時候，name命名會報錯，自己全英文命名就好了，盡量別用標點符號。
還有的warn情況是因為，你沒寫git倉庫的地址，who care。。。
最后回車完了出現這句
，后邊就打Y就好。
擴展：npm install --production只下載dependencies節點的包
7．安裝局部gulp
安裝命令： cnpm install gulp --save-dev（或者npm install gulp --save-dev）【哇！哇！注意空格哇！gulp和后邊的橫線是有空格的】
特別記得這個：--save-dev：這個就是裝到局部的標志啊，以后在局部裝插件也是少不了他的
在當前項目文件夾下安裝gulp，只要你定位到那個目錄下，就可以在那個目錄下安裝本地gulp了。
安裝完了以后，在你安裝的那個目錄下邊會發現一個node-modules文件夾，以后用到的gulp插件都會在這個里邊了。
然后package.json文件里也有了“devDependencies”依賴項
8．配置gulpfile.js（9,8可以反過來，可以js文件中需要什么插件再裝什么插件）
在本地項目根目錄下新一個gulpfile.js文件，他是gulp項目的配置文件，不同於backage.json文件。
（疑問：gulpfile.js的位置，可以隨着不同的項目新建不同的文件，然后分別放到不同項目的根目錄下？答案：yes）
文件內配置信息如下代碼：
var gulp = require(‘gulp’);
... ...
詳解：
var gulp = require(‘gulp’);//引入gulp組件，這一句是每一個gulpfile.js里邊所必須有的，標配！！標配！！標配！！
var sass = require(‘gulp-sass’);//導入工具包require（node-modules）里的對應模塊，以后你需要什么插件就對應執行這一句，不過要把變量名和括號里的插件名字改掉。
gulp.task(‘taskName’,function(){ });//定義一個task任務，名字為taskName：（這里是你自定義任務名稱）、設置一個回調函數。
回調函數里邊定義要處理的任務
任務呢就像火車一樣，一環扣一環用點連接，最后一個才有分號結束。其實感覺和jq的一樣，就是”鏈式調用”，在這里呢人家叫”流式操作”
其他gulp api的代碼意思見后邊<gulp api詳解>
另外，需要哪個gulp插件的時可以去網上搜這個gulp插件，然后gulpfile.js里邊的配置網上就有了。。
9．安裝gulp插件
安裝命令：cnpm install 替換插件名稱 --save-dev（或者npm install 替換插件名稱 --save-dev）
這里呢，你需要什么gulp插件就去命令行里裝，以gulp-sass為例。
cnmp install gulp-sass --save-dev 或者npm install gulp-sass --save-dev
Gulp的插件很多，需要什么就去官網查：http://gulpjs.com/plugins/
這個大神的中文總結也不錯：http://www.ydcss.com/archives/category/%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7
常用的也就那么幾個，見<常用gulp插件集錦>。
10．Gulp實踐---使用gulpfile.js並調用gulp插件
gulpfile.js
一個gulpfile.js配置文件類似下邊這段代碼，他的大體結構都是差不多的，只是你用到的任務不同的時候，他就是不同的任務代碼
gulpfile.js
調用gulp插件
gulp 或者（ gulp taskName）
直接調用gulp或者輸入gulp+任務名稱
比如在上邊的gulpfile.js里邊，我想調用sass任務，就直接在命令行輸入gulp sass
如果我想調用所有的，就輸入 gulp，命令行會自動執行default任務，並按順序執行'lint', 'sass', 'scripts'任務
三、盲區疑惑：
怎么卸載掉gulp（全局或本地的）
再次使用gulp，就把項目放到裝好的gulp項目文件夾里邊？不是，要重建，但是丫丫姐的項目竟然都可以用，就是直接在建好的本地gulp項目中，再建一個項目包開始工作
全局環境的全局啥意思？http://www.cnblogs.com/PeunZhang/p/5629329.html
全局環境中需要package.json這個文件嗎
四、安裝過程中的常見報錯和警告：
報錯截圖
這個情況是提醒我graceful-fs的版本太低
其他的報錯，很大的可能就是你命令輸入錯誤導致沒裝成功，一般就是字母輸入錯誤，空格用了全角，標點用了全角等問題
遇到了再貼圖吧。
五、可以解決的報錯問題及方法：
通常出現的問題就是版本低。
版本低就要經常升級了：
比如我上邊graceful-fs的版本升級可以用如下命令
npm install graceful-fs@版本號，例如：npm install graceful-fs@^4.0.0
六、常用命令目錄
- 安裝package.json(全局+本地）
- 定位本地目錄 cd +目錄路徑
- 返回上一目錄 cd..
- 跳轉磁盤： 直接輸入盤的字母（大寫），加冒號，比如D:，就會跳轉到D盤
- 刪除（裝了node和rimraf的情況下）直接rimraf +要刪除的資源名字
- 裝rimraf： npm install rimraf -g（或者cnpm install rimraf -g如果你換了鏡像的話）
七、gulp api 詳解
（說句人話就是gulpfile.js文件代碼解讀）
一個gulp-sass任務的案例：
// 編譯Sass
1 gulp.task('sass', function() {
2
3 gulp.src('./scss/*.scss')
4
5 .pipe(sass())
6
7 .pipe(gulp.dest('./css'));
8
9 });
1．關於gulp task
//理解了gulp的task，就理解了gulp，其核心就是task。
//他只構建一個執行的框架，而不管你要執行的內容，只管排隊和到達，不管交通方式和運輸的人員身份。
//定義第一個任務，每一個任務都要通過task來定義
//my task 1是task的名字，就像上邊的代碼案例里，sass就是task的名字。function回調函數里是要執行的具體內容
my task 1 示例
//gulp流式操作就相當於jq的鏈式調用,這里只是一個示例，
//定義第二個任務
第二個task示例
//最后，你需要哪個task，你就在命令行敲入 gulp taskName就可以調用了。
也可以。。
//定義默認執行的任務task
默認的task
//方括號[]內是定義任務的順序，是一個數組，可以為空，為空就表示不依賴任何其他task任務，需要單獨執行任務，不為空的話任務就會被按順序執行出來。
所謂的默認任務:
他只有唯一的名字就是default
也就是說，只要你有一個任務定義了名字是default，那么你直接運行gulp或者gulp+任務名（比如這里用gulp sass）的方式運行，他都會率先執行你default任務下的回調函數。
同樣的，如果你default任務的task參數里邊，有方括號設定其他依賴任務的順序，那么他執行完default任務的回調函數后，會按照你指定的方括號里的任務名字順序來執行。
//——————這里有一個小技巧，就是如果你的gulpfile文件里有好多task，你可以定義一個default，然后default后邊依賴一下其他的需要執行的task，並按照順序排列。
//然后在命令行里直接執行gulp，不用填寫執行的任務名字，他就可以自動執行默認的task，然后轉向指定的其他依賴的task了、。
//可以比喻成你設置一條流水線作業吧。然后機器按照你的設定自動完成。
八、gulp常用插件集錦
livereload插件，他需要安裝一個
liveReload谷歌瀏覽器（chrome）插件2.1：http://www.cnplugins.com/devtool/livereload/download.html
這個插件下載地址：安裝方法：http://www.cnplugins.com/tools/how-to-setup-crx.html
一個吊炸天的插件，多個瀏覽器實時測試：http://www.browsersync.cn
browserSync的應用
http://www.cnblogs.com/kelsen/p/4643762.html
http://www.open-open.com/lib/view/open1426232157888.html
http://www.cnblogs.com/2050/p/4198792.html#part4
比較經典的：
Gulp監聽：http://www.ydcss.com/archives/34
Gulp自動加載：http://www.cnblogs.com/yuzhongwusan/p/5417074.html http://www.ydcss.com/archives/702
Gulp自動加載和gulp-sass合用：http://blog.csdn.net/qq_33236453/article/details/51234775
九、gulp常用地址：
gulp官方網址：http://gulpjs.com
gulp插件地址：http://gulpjs.com/plugins
gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md
gulp 中文API：http://www.ydcss.com/archives/424
十、參考文章：
Gulp入門教程：http://www.ydcss.com/archives/18
Gulp教程之gulp-less：http://www.ydcss.com/archives/34