gulp環境搭建

簡介：

　　gulp是前端開發過程當中對代碼進行構建的工具，是自動化項目的構建利器；它不只對網站資源進行優化，並且在開發過程當中不少重複的任務，他能夠經過明確的工具自動完成，使用它咱們不只能夠很愉快的編寫代碼，並且大大的提升了咱們的工做效率。

---

　　gulp是基於Node.js的自動化任務運行器，它能自動化的完成JavaScript、coffee、sass、less、html、image、css等文件的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，它藉助了Unix操做系統的管道(pipe)思想，前一級的輸出等於後一級的輸入，使操做很是的簡單。經過本文，咱們將學習如何使用gulp來改變開發流程，從而使開發更加高效。

　　gulp與grunt很是相似，但相比於grunt很是頻繁的IO操做，gulp的流操做，能更快捷的完成構建工做。

　　本文以gulp-pug爲例（將pug編譯爲html的gulp插件）展現gulp的基本用法，只要咱們學會一個插件以後，其餘插件能夠看一下幫助文檔

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構建流程

　　安裝nodejs-->全局安裝gulp-->項目安裝gulp以及gulp插件 -->配置gulpfile.js-->運行任務

1.安裝nodejs

　　說明：gulp是基於nodejs，因此須要配置node環境

　　安裝方法：打開nodejs官網，點擊Download按鈕，它會根據系統信息選擇對應的版本（.msi文件）。而後直接安裝就能夠了

2.使用命令行（熟悉命令行可跳過此步）

　　說明：命令行在OSX是終端（Teminal），在Windows是命令提示符（Command Prompt）；

　　注意：以後操做都是在Windows系統下

　　簡介：

　　　　打開命令的方式（window+r 輸入cmd回車）

　　　　node -v 查看安裝的nodejs版本號，出現版本號證實安裝成功，未出現請重啓重試

　　　　npm -v 查看npm版本號，npm是隨着nodejs一同安裝的nodejs包管理器

　　　　cd 定位到目錄，用法：cd+路徑；

　　　　dir 列出文件列表

　　　　cls清空命令提示符窗口內容

3.npm介紹

　　說明：npm（node package manager）nodejs的包管理器，用於nodejs插件的安裝、卸載、管理依賴等；

　　安裝插件：

　　　　命令提示符執行  npm install <name> [-g] [--save-dev]; 

　　　　　　<name>: nodejs插件的名稱；例如npm install pug --save-dev

　　　　　　-g：全局安裝。將會安裝到C:\Users\Administrator\AppData\Roaming\npm，而且寫入環境變量；非全局安裝：將會安裝到當前定位目錄；全局安裝能夠經過命令行在任何地方調用，本地安裝會在定位目錄的node_modules文件夾下，經過require()調用；

　　　　　　--save：將保存配置信息到package.json（package.json是nodejs項目配置文件）

　　　　　　-dev：保存到package.json的devDependencies節點，不指定-dev將保存到dependencies節點

　　卸載插件：

　　　　命令提示符執行 npm uninstall <name> [-g] [--save-dev] 

　　　　刪除所有插件 藉助rimraf   npm install rimraf -g   用法： rimraf node_modules 

　　更新插件

　　　　命令提示符執行 npm update <name> [-g] [--save-dev] 

　　　　更新所有插件： npm update [--save-dev] 

　　查看npm幫助

　　　　命令提示符執行 npm help 

　　當前目錄已安裝插件

　　　　命令提示符執行 npm list 

---

npm安裝插件過程是從：http://registry.npmjs.org下載對應的插件包（該網站服務器位於國外，因此常常下載緩慢或出現異常），解決辦法往下看↓↓↓↓↓↓。

4.選裝cnpm

　　說明：由於npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，若是npm的服務器在中國就行了，因此咱們樂於分享的淘寶團隊幹了這事，來自官網:

這是一個完整 npmjs.org 鏡像，你能夠用此代替官方版本(只讀)，同步頻率目前爲 10分鐘 一次以保證儘可能與官方服務同步。

　　　　官方網址：http://npm.taobao.org；

　　安裝：

　　　　命令提示符執行 npm install cnpm -g --registry=https://registry.npm.taobao.org ；

---

cnpm和npm用法徹底一致，只是在執行命令的時候把npm改爲cnpm

5.全局安裝gulp

　　說明：全局安裝gulp是爲了經過它執行gulp任務

　　安裝：

　　　　命令提示符執行 cnpm install gulp -g ；

---

查看是否正確安裝，命令提示符執行 gulp -v ；出現版本號證實安裝成功

6.新建package.json文件

　　說明：package.json是nodejs項目中必不可少的配置文件，它包含了nodejs的配置信息以及插件信息

{
  "name": "font-test", /*項目名稱*/
  "version": "1.0.0",  /*項目版本*/
  "description": "font-size", /*項目介紹*/
  "main": "gulpfile.js",    /*執行js入口*/
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.1.1",
    "browser-sync": "^2.18.8",
    "compass": "^0.1.1",
    "gulp": "^3.9.1",
    "gulp-changed": "^2.0.0",
    "gulp-compass": "^2.1.0",
    "gulp-html-beautify": "^1.0.1",
    "gulp-load-plugins": "^1.5.0",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^7.0.0",
    "gulp-pug": "^3.3.0",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.0",
    "precss": "^1.4.0",
    "pug": "^2.0.0-beta.12",
    "cssgrace": "^3.0.0"
  },
  "dependencies": {
    "express": "^4.15.2",
    "pug": "^2.0.0-beta.12"
  }
}

　　

　　咱們可使用命令行工具來配置它： cnpm init 

　　查看package.json幫助文檔，命令提示符執行cnpm help package.json

 

---

 

特別注意：package.json是一個普通的json文件，因此不能添加任何註釋。

7.本地安裝gulp插件

　　安裝：定位到項目目錄後，執行 cnpm install <name> --save-dev 

　　實例：安裝gulp-pug，執行 cnpm install gulp-pug --save-dev 

將會安裝到node_modules的gulp-pug目錄下

爲了能正常使用，咱們還得本地安裝gulp  cnpm install gulp --save-dev 

---

全局安裝gulp是爲了執行gulp命令，本地安裝gulp是爲了調用gulp插件功能

8.新建gulpfile.js文件（重要）

　　說明：gulpfile.js是gulp項目的配置文件，通常位於項目根目錄（須要在package.json的main中指定該文件）

（package.json設置圖）

var gulp        = require("gulp");
var plugins     = require("gulp-load-plugins")();
var browserSync = require("browser-sync").create();

//編譯pug
gulp.task("pug:compile",function() {
    gulp.src("src/*.pug")
    .pipe(plugins.changed("./build/",{extension:".html"}))
    .pipe(plugins.pug({
        pretty:"\t"
    }))
    .pipe(gulp.dest("./build/"))
})

9.運行gulp

　　說明：命令提示符執行 gulp+任務名稱

　　當執行gulp就是執行gulp default的全部任務；