前提：安裝node
- 全局安裝gulp
npm install gulp -g
-
初始化項目
在項目根目錄下打開cmd（命令行）運行：
npm init
一路回車，就會在項目的文件夾下產(chǎn)生一個package.json文件
在路徑下會形成這樣的一個.json文件（部分內(nèi)容為后添加的）
{
"name": "gulptest",//項目名稱（必須）不能有大寫
"version": "0.0.1",//項目版本（必須）
"description": "這是一個gulp的測試程序",//項目描述（必須）
"homepage": "", //項目主頁
"main": "index.js",//入口文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [//關(guān)鍵詞
"gulp"
],
"author": "jiaaaaaqi",//作者
"license": "ISC"http://項目許可協(xié)議
"devDependencies": { //項目依賴的插件
"gulp": "^4.0.0",
"gulp-less": "^3.0.0"
}
}
-
本地安裝gulp(在項目目錄下安裝gulp)
此步驟的目的是：把gulp里的所有的js文件從服務(wù)器上下載到項目目錄下（node_modules）
- 把當前目錄轉(zhuǎn)到項目目錄：cd 項目目錄溅蛉，或者在項目目錄下公浪，按住shift鍵，同時點擊鼠標右鍵温艇，選擇“在此處打開命令行”(windows10的話選擇在此處打開Powershell窗口)
- 在cmd/Powershell(命令行)執(zhí)行：
npm install gulp --save-dev
安裝完成后因悲，就會在項目目錄下產(chǎn)生一個node_modules文件
-
使用gulp實現(xiàn)文件熱同步
在項目的根目錄建立 gulpfile.js文件。在這個js文件中寫上實現(xiàn)熱同步的js代碼（gulp能實現(xiàn)的功能很多很強大勺爱，此處僅展示實現(xiàn)熱同步項目所有內(nèi)容的代碼）
var gulp = require("gulp");
//監(jiān)聽任務(wù)
gulp.task("watch-all",async ()=>{
//復(fù)制文件
gulp.watch("./**/*",async ()=>{ //監(jiān)聽項目開發(fā)路徑下所有的內(nèi)容（包括子文件夾晃琳，不管有多少級）
gulp.src("./**/*") //項目開發(fā)路徑下所有的內(nèi)容
.pipe(gulp.dest("D:\\phpStudy\\WWW\\1more")); //項目發(fā)布路徑（服務(wù)器文件夾）
});
});
/**
* gulp.src() 是讀取將要處理的文件，即源文件
* pipe() 管道琐鲁，是如何處理該文件（如：sass編譯卫旱，復(fù)制文件，壓縮文件等）围段。
* gulp.dest() 是處理后的文件的路徑顾翼，即目的文件。
**/
常見問題：
如果出現(xiàn)了cannot find module '***'表示該模塊沒有安裝成功奈泪，
執(zhí)行npm install gulp *** --save-dev适贸，就可以單獨安裝該模塊。
-
正在進行的項目如何用gulp:
1涝桅、新建空文件夾作為項目的文件夾（項目文件夾不要用 /gulp 命名）
2拜姿、用npm初始化項目：用npm init命令產(chǎn)生package.json文件（第2步）
3、本地安裝gulpnpm install gulp --save-dev
4冯遂、把項目目前的所有文件拷貝的到新建的項目文件夾里
5蕊肥、在項目根目錄下寫gulpfile.js的代碼。
