Gulp
當下的前端開發(fā)
- 不再是簡簡單單的使用HTML+CSS+JavaScript這些簡單的技術構建網(wǎng)頁應用程序了
- 我們要提高效率，就必須減少重復的工作
- 使用less之類預處理的CSS coffeescript
- 提供開發(fā)階段的便利，開發(fā)階段更快捷
- 現(xiàn)在的開發(fā)行業(yè)優(yōu)質的開發(fā)人員是不應該將精力放在這些重復性質的工作上
- Gulp就是一種可以自動化完成我們開發(fā)過程中大量的重復工作
- 預處理語言的編譯
- js css html 壓縮混淆
- 圖片體積優(yōu)化
- 除gulp之外還有一些類似的自動化工具，比如grunt
- what how why
Gulp簡介
-
當下最流行的自動化工具
- 什么是自動化構建工具？
- 自動完成一系列重復的操作
- less → css
- coffeescript → js
- css壓縮
- js混淆
- html壓縮
- img尺寸優(yōu)化
- 。。。。
-
鏈接：
gulp的包既包含工具，也包含一些編程的API
準備工作
- 安裝Node.js
- Node.js 給前端帶來了一場工業(yè)革命
- http://npm.taobao.org/
- 安裝完成過后可以通過命令行工具node -v
- 安裝nodejs過程會自動安裝npm(node packages manager)
- npm 3 以前的版本文件依賴是層級依賴
- npm 3 以后依賴關系改為平行依賴（windows上路徑過長問題）
- gulp本身是node的模塊
- 安裝 gulp 命令行工具
npm install -g gulp- -g 指的是在全局作用域中安裝
- 測試命令 gulp -v
- 初始化 gulp 項目
- 在本地安裝gulp包
- npm install gulp --save
- 創(chuàng)建任務 - gulpfile.js
- gulpfile.js 就是gulp的主文件
基本使用
- 定義一個任務
- 復制單個文件
- 復制多個文件
-
globs匹配語法
- src/*
- src/*/*
- src/**/*
- src/*.jpg
- src/*.{jpg,png}
- 多個globs
- ['src/*.{jpg,png}','a/a.html']
- 排除某些文件
- !xxxxx
- 默認任務
- gulp 中的任務名有個特殊值 default
- 文件監(jiān)視自動執(zhí)行任務
