gulp基于node,自動(dòng)化構(gòu)建工具增強(qiáng)前端開(kāi)發(fā)工作流程
一些常見(jiàn)的鱼响、重復(fù)的任務(wù)，例如：網(wǎng)頁(yè)自動(dòng)刷新组底、css預(yù)處理丈积、代碼檢測(cè)、壓縮圖片债鸡、等江滨，只需要簡(jiǎn)單的命令就能全部完成。使用它可以簡(jiǎn)化工作厌均，提高開(kāi)發(fā)效率唬滑。
安裝環(huán)境
- 安裝node
下載地址: http://nodejs.cn/download/
node安裝包下載
根據(jù)系統(tǒng)選擇,建議windows系統(tǒng)選擇64位.msi
安裝成功后,WIN+R 運(yùn)行 CMD,輸入node -v檢查是否安裝成功,出現(xiàn)版本號(hào),表示安裝成功
node安裝后自帶npm,順便輸入npm -v,檢查npm是否一并安裝成功 - 全局安裝gulp
命令:npm install -g gulp,
檢查是否成功gulp -v
新建項(xiàng)目
傳統(tǒng)開(kāi)發(fā)項(xiàng)目目錄
- 初始化項(xiàng)目
npm init -y生成package.json配置文件 - 本地安裝gulp
gulp全局安裝后,還需要安裝到此項(xiàng)目的目錄下
npm i -D gulp - 安裝gulp常用插件
將多個(gè)插件名用空格連接可以一次合并安裝多個(gè)插件:npm i -D 插件名1 插件名2 插件名3...
"browserify": "^16.2.2",
"del": "^3.0.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-clean-css": "^3.6.0",
"gulp-connect": "^5.0.0",
"gulp-csso": "^3.0.1",
"gulp-file-include": "^1.1.0",
"gulp-htmlmin": "^3.0.0",
"gulp-imagemin": "^3.4.0",
"gulp-minify-css": "^1.2.4",
"gulp-notify": "^3.0.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.0",
"gulp-zip": "^4.1.0",
"jquery": "^3.3.1",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0",
"watchify": "^3.11.0"
- 編寫(xiě)gulpfile
gulp自動(dòng)化任務(wù),監(jiān)聽(tīng)各種文件和操作,用對(duì)應(yīng)的插件處理 - 運(yùn)行
一切都準(zhǔn)備好后,執(zhí)行命令gulp,當(dāng)看到命令行打印成功信息后,便可以開(kāi)始開(kāi)發(fā)了,瀏覽器地址輸入localhost:8080訪(fǎng)問(wèn)文件
