前端開發總結之Gulp

前端比較流行的自動化工具有gulp和grunt，其中gulp的中文官網對gulp使用介紹非常詳細了，本文只是為了記錄個人搭建自動化工程的一個過程，做個備忘，以後查著方便。

• node.js、cnpm安裝

node中文官網：https://nodejs.org/zh-cn/

node版本檢視： node -v

npm版本檢視： npm -v

node安裝之後會在系統使用者目錄AppData\Roaming目錄下生成npm和npm-cache兩個目錄，這個兩個是npm的全域性安裝目錄（使用npm install -g安裝的外掛會安裝在這個目錄）和快取目錄

為了方便我們希望把npm的目錄進行修改。在node的安裝目錄下建立兩個資料夾，分別為node_global、node_cache用來替換自動生成的目錄。

執行以下命令進行配置的修改

npm config set prefix "F:\tool_install\nodejs\node_global"

npm config set cache "F:\tool_install\nodejs\node_cache"

使用npm list -global 可以檢視是否配置成功。

使用 npm config set registry=http://registry.npm.taobao.org 配置淘寶的映象站。

使用npm config list 檢視配置資訊。這些配置資訊記錄在C:\Users\weiwei\.npmrc檔案中。

在系統環境變數中增加NODE_PATH變數 ，路徑為F:\tool_install\nodejs\node_global\node_modules，這樣執行npm install就不會報錯了。（記得建立node_modules目錄）

使用npm install -g cnpm --registry=https://registry.npm.taobao.org  安裝cnpm。此時cnpm是被安裝在F:\tool_install\nodejs\node_global目錄下的。在系統環境變數的path中配置下這個路徑就可以使用cnpm了。

• gulp安裝

使用命令 cnpm install -g gulp 全域性安裝gulp外掛。

在專案目錄下，使用命令 cnpm install --save-dev gulp 在專案中安裝gulp。（--save是釋出之後還依賴的東西，比如jquery。--save-dev是開發依賴的東西。比如gulp）

在專案中安裝gulp之後，會在專案目錄下會生成node_modules目錄和package.json檔案，package.json中是專案的依賴。

• 編譯指令碼編寫

建立gulpfile.js檔案，在檔案中編寫任務指令碼。

貼一個示例片段

var gulp = require('gulp');

gulp.task('dist', function() {
    gulp.src('src/**').pipe(gulp.dest('dist/'));

});

gulp.task('default',['dist']);

在專案根目錄，執行gulp即可執行預設任務。

如果使用的IDE是webstorm的話，右鍵gulpfile.js，有一個show gulp tasks選單，點選之後會出現gulp工具欄，可以進行gulp的操作。

具體的指令碼編譯語法就不在此一一詳解了，官網API非常詳細。