GULP
gulp 是一個項目開發(fā)的 自動化打包構(gòu)建工具
基于 node 環(huán)境來運行的
什么是自動化打包構(gòu)建工具
比如
我們在開發(fā)的過程中，會寫到 js 文件，css 文件，等等
我們的項目如果想上線，那么一定要體積小一點，文件大小越小越好
而我們在寫 js 文件的時候，會有很多 換行/空格 之類的東西
這些 換行/空格 都是占文件體積的一部分
那么我們在上線之前就要吧這些 換行/空格 盡可能的刪除掉
我們又不能一個文件一個文件的去刪除
就要用到一個自動化工具來幫助我們把這些多余的東西干掉
這個就是自動化工具的意義
常見的自動化打包構(gòu)建工具
gulp
webpack
安裝 GULP
gulp 是一個依賴于 node 的環(huán)境工具
所以我們需要先安裝一個 全局 gulp 依賴
直接使用 npm 去安裝就可以了
# 使用 npm 安裝全局依賴 gulp
$ npminstall--globalgulp
等待安裝完畢就好了
這個全局環(huán)境一個電腦安裝一次就好了
還是照例檢查一下是否安裝成功
$ gulp--version
依賴包學(xué)習(xí)地址 https://www.npmjs.com
使用 GULP
安裝完畢以后，我們就可以使用 GULP 對我們的項目進(jìn)行自動化構(gòu)建了
首先我們要有一個項目
- gulp_demo ?? 項目文件夾
? - src ? ? ?? 項目源碼
?? + css ? ?? css 文件夾
?? + js ? ? ? js 文件夾
?? + pages ?? html 文件夾
?? + sass ? ? sass 文件夾
?? + lib ? ?? 第三方文件夾
?? + static ? 靜態(tài)資源文件夾
目錄結(jié)構(gòu)不一定都是這個樣子
但是最好是一個便于管理的文件夾目錄結(jié)構(gòu)
因為是一個項目了，最好使用 npm 來幫我們管理一下
這樣可以記錄我們的下載使用了那些依賴
所以在項目文件夾 gulp-demo 里面執(zhí)行一個 npm 初始化
$ cdgulp_demo
$ npminit-y
執(zhí)行完畢之后，再來看一下我們的項目目錄
- gulp_demo
? + src
? + package.json
項目 GULP 配置
我們之前已經(jīng)安裝過 gulp 全局依賴了
但是每一個項目都要在安裝一次 gulp 的項目依賴
因為每一個項目的打包構(gòu)建規(guī)則都不一樣，所以不能全都配置成一個
所以我們要在項目里面再次進(jìn)行 gulp 安裝
$ cdgulp_demo
$ npminstall-Dgulp
項目中的 gulp 依賴要和全局 gulp 環(huán)境保持版本一致
接下來就是對這個項目進(jìn)行打包構(gòu)建的配置
gulp 的使用，要在項目目錄下新建一個 gulpfile.js
在這個 gulpfile.js 文件里面進(jìn)行配置
然后使用 gulp 進(jìn)行構(gòu)建的時候就會按照 gulpfile.js 文件里面的規(guī)則進(jìn)行打包構(gòu)建
再來看一下我們的目錄結(jié)構(gòu)
- gulp_demo
? + node_modules ? ? ? ? 依賴包目錄
? + src ? ? ? ? ? ? ? ?? 項目源碼
? + gulpfile.js ? ? ? ?? gulp 配置文件
? + package-lock.json ?? 依賴下載版本 json 文件
? + package.json ? ? ? ? 項目管理 json 文件
接下來我們就是在 gulpfile.js 文件里面進(jìn)行配置，讓我們的打包構(gòu)建可以生效
打包 CSS 文件
我們從簡單的內(nèi)容開始，先來打包構(gòu)建 css 文件
其實就是在 gulpfile.js 里面進(jìn)行一些配置
第一個事情就是引入 gulp
// 我是 gulpfile.js 文件
// 1. 引入 gulp
constgulp=require('gulp')
gulp 是基于任務(wù)來完成構(gòu)建的
所以我們要創(chuàng)建一個打包 css 的任務(wù)
// 我是 gulpfile.js 文件
// 1. 引入 gulp
const gulp = require('gulp')
// 2. 創(chuàng)建一個 css 的任務(wù)
//? gulp.task() 是用來創(chuàng)建任務(wù)的
//? 參數(shù)一： 任務(wù)名稱
//? 參數(shù)二： 一個函數(shù)（這個任務(wù)要做什么事情）
gulp.task('css', function () {
})
有了任務(wù)以后，我們就要在 css 這個任務(wù)里面寫一些這個任務(wù)要做的事情了
我們要把 ./src/css/所有css文件 都進(jìn)行壓縮處理
這個時候我們自己完成不了，就需要借助一個第三方依賴
npm i -D gulp-cssmin
下載完畢以后，去文件中進(jìn)行配置
// 我是 gulpfile.js 文件
// 1. 引入 gulp
const gulp = require('gulp')
// 2. 引入 gulp-cssmin
const cssmin = require('gulp-cssmin')
// 3. 創(chuàng)建一個 css 的任務(wù)
gulp.task('css', function () {
? ? return gulp
? ? .src('./src/css/**')? // 對哪些文件進(jìn)行操作
? ? .pipe(cssmin())? ? ? ? // 都做什么，這里做的就是進(jìn)行 css 壓縮
? ? .pipe(gulp.dest('./dist/css'))? // 把壓縮完畢的文件放在 dist 文件夾下的 css 文件夾?
})
gulp.src() 是指找到那些文件對其操作
gulp.pipe() 是指要做什么
gulp.dest() 是指輸出到哪個目錄下，如果沒有這個目錄存在會自動創(chuàng)建這個目錄
所以上面哪個 css 任務(wù)的意思就是
把 ./src/css/ 目錄下的所有文件
進(jìn)行壓縮
壓縮完畢后放在 ./dist/ 下的 css/ 文件夾下
接下來，就是執(zhí)行一下這個叫做 css 的任務(wù)就行了
直接在控制臺使用指令
# 表示運行 gulpfils.js 配置文件中的 css 任務(wù)
$ gulp css
執(zhí)行完畢以后，就會在 gulp_demo 目錄下生成一個 dist/ 文件夾
里面就有我們壓縮好的 css 文件
自動添加前綴
我們希望在 css 壓縮之前，能幫我自動把需要前綴的屬性 自動把前綴添加上 就好了
這個是可以做到的
我們又需要一個依賴了
npm i -D gulp-autoprefixer
安裝完還是去到文件中進(jìn)行配置
// 我是 gulpfile.js 文件
// 1. 引入 gulp
const gulp = require('gulp')
// 2. 引入 gulp-cssmin
const cssmin = require('gulp-cssmin')
// 3. 引入 gulp-autoprefixer
const autoPrefixer = require('gulp-autoprefixer')
// 4. 創(chuàng)建一個 css 的任務(wù)
gulp.task('css', function () {
? ? return gulp
? ? .src('./src/css/**')?
? ? .pipe(autoPrefixer({
? ? ? ? overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
? ? }))
? ? .pipe(cssmin())? ? ?
? ? .pipe(gulp.dest('./dist/css'))?
})
因為添加前綴需要在壓縮之前添加
所以我們就直接在任務(wù)里面多做一個事情就行了
打包 SASS 文件
接下來我們解決一下 sass 的問題
因為有的時候我們開發(fā)要使用 sass 所以我們要解決一下 sass 的問題
其實打包 sass 和 css 差不多，只不過先要把 sass 解析成 css
把 sass 解析成 css
自動添加前綴
壓縮一下
放到對應(yīng)的文件夾中
使用 gulp 解析 sass 文件需要用到一個依賴
npm i -D gulp-sass
報錯，需要下載node-sass作為其依賴包
npm i -D node-sass@4.14.1? 然后再去下載gulp-sass依賴
然后我們就去到配置文件里面進(jìn)行配置就好了
// 我是 gulpfile.js 文件
// 1. 引入 gulp
const gulp = require('gulp')
// 2. 引入 gulp-cssmin
const cssmin = require('gulp-cssmin')
// 2-1. 引入 gulp-autoprefixer
const autoPrefixer = require('gulp-autoprefixer')
// 2-2. 引入 gulp-sass
const sass = require('gulp-sass')
// 2-1. 創(chuàng)建一個 css 的任務(wù)
gulp.task('css', function () {
? ? return gulp
? ? .src('./src/css/**')?
? ? .pipe(autoPrefixer({
? ? ? ? overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
? ? }))
? ? .pipe(cssmin())? ? ?
? ? .pipe(gulp.dest('./dist/css'))?
})
// 2-2. 創(chuàng)建一個 sass 任務(wù)
gulp.task('sass', function () {
? ? return gulp
? ? .src('./src/sass/**')
? ? .pipe(sass())
? ? .pipe(autoPrefixer({
? ? ? ? overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
? ? }))
? ? .pipe(cssmin())
? ? .pipe(gulp.dest('./dist/css'))
})
我們的 sass 文件編譯完以后也是 css 文件，所以就也放在 css 文件夾下就好了
就是要注意一下別和本來 css 文件夾下的文件重名就好了
然后就可以去命令行執(zhí)行 sass 這個任務(wù)了
# 執(zhí)行 sass 任務(wù)
$ gulp sass
打包 JS 文件
接下來就是打包一下 js 文件了
其實套路是一樣的
先來做最簡單的操作
壓縮一下 js 文件
需要用到一個依賴
npm i -D gulp-uglify
然后依舊是去到配置文件中進(jìn)行配置
// 我是 gulpfile.js 文件
// 1. 引入 gulp
const gulp = require('gulp')
// 2-1. 引入 gulp-cssmin
const cssmin = require('gulp-cssmin')
// 2-2. 引入 gulp-autoprefixer
const autoPrefixer = require('gulp-autoprefixer')
// 2-3. 引入 gulp-sass
const sass = require('gulp-sass')
// 3-1. 引入 gulp-uglify
const uglify = require('gulp-urlify')
// 2-1. 創(chuàng)建一個 css 的任務(wù)
gulp.task('css', function () {
? ? return gulp
? ? .src('./src/css/**')?
? ? .pipe(autoPrefixer({
? ? ? ? overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
? ? }))
? ? .pipe(cssmin())? ? ?
? ? .pipe(gulp.dest('./dist/css'))?
})
// 2-2. 創(chuàng)建一個 sass 任務(wù)
gulp.task('sass', function () {
? ? return gulp
? ? .src('./src/sass/**')
? ? .pipe(sass())
? ? .pipe(autoPrefixer({
? ? ? ? overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
? ? }))
? ? .pipe(cssmin())
? ? .pipe(gulp.dest('./dist/css'))
})
// 3. 創(chuàng)建一個 js 任務(wù)
gulp.task('js', function () {
? ? return gulp
? ? .src('./src/js/**')
? ? .pipe(uglify())
? ? .pipe(gulp.dest('./dist/js'))
})
然后我們?nèi)ッ钚袌?zhí)行 js 這個任務(wù)
# 執(zhí)行 js 任務(wù)
$ gulp js
編譯 ES6 語法
之前我們學(xué)習(xí) es6 的時候就說過
很多瀏覽器不是很認(rèn)識 es6 的語法
我們要把他編譯成 es5 的語法
所以我們在打包 js 文件的時候，就要轉(zhuǎn)換一下
我們依舊是使用依賴來完成，只不過 es6 轉(zhuǎn) es5 需要三個依賴
npm i -D gulp-babel@7.0.1
npm i -D babel-core
npm i -D babel-preset-es2015
然后我們就去配置文件里面進(jìn)行配置就可以了
// 我是 gulpfile.js 文件
// 1. 引入 gulp
const gulp = require('gulp')
// 2-1. 引入 gulp-cssmin
const cssmin = require('gulp-cssmin')
// 2-2. 引入 gulp-autoprefixer
const autoPrefixer = require('gulp-autoprefixer')
// 2-3. 引入 gulp-sass
const sass = require('gulp-sass')
// 3-1. 引入 gulp-uglify
const uglify = require('gulp-urlify')
// 3-2. 引入 gulp-babel
//? ? ? es6 轉(zhuǎn) es5 雖然需要下載三個依賴，但是只需要引入一個 gulp-babel 就可以了
const babel = require('gulp-babel')
// 2-1. 創(chuàng)建一個 css 的任務(wù)
gulp.task('css', function () {
? ? return gulp
? ? .src('./src/css/**')?
? ? .pipe(autoPrefixer({
? ? ? ? overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
? ? }))
? ? .pipe(cssmin())? ? ?
? ? .pipe(gulp.dest('./dist/css'))?
})
// 2-2. 創(chuàng)建一個 sass 任務(wù)
gulp.task('sass', function () {
? ? return gulp
? ? .src('./src/sass/**')
? ? .pipe(sass())
? ? .pipe(autoPrefixer())
? ? .pipe(cssmin())
? ? .pipe(gulp.dest('./dist/css'))
})
// 3. 創(chuàng)建一個 js 任務(wù)
gulp.task('js', function () {
? ? return gulp
? ? .src('./src/js/**')
? ? .pipe(babel({
? ? ? ? presets: ['es2015']
? ? }))
? ? .pipe(uglify())
? ? .pipe(gulp.dest('./dist/js'))
})
引入以后，只要在壓縮之前執(zhí)行一下轉(zhuǎn)碼就可以了
注意要傳遞一個參數(shù)
然后再次執(zhí)行 js 任務(wù)就可以了
# 執(zhí)行 js 任務(wù)
$ gulp js
打包 HTML 文件
接下來就要把 html 文件解決一下了
還是一個套路
壓縮 html 文件需要一個依賴
npm i -D gulp-htmlmin
下載好以后去到配置文件中進(jìn)行配置
// 我是 gulpfile.js 文件
// 1. 引入 gulp
const gulp = require('gulp')
// 2-1. 引入 gulp-cssmin
const cssmin = require('gulp-cssmin')
// 2-2. 引入 gulp-autoprefixer
const autoPrefixer = require('gulp-autoprefixer')
// 2-3. 引入 gulp-sass
const sass = require('gulp-sass')
// 3-1. 引入 gulp-uglify
const uglify = require('gulp-urlify')
// 3-2. 引入 gulp-babel
//? ? ? es6 轉(zhuǎn) es5 雖然需要下載三個依賴，但是只需要引入一個 gulp-babel 就可以了
const babel = require('gulp-babel')
// 4. 引入 gulp-htmlmin
const htmlmin = require('gulp-htmlmin')
// 2-1. 創(chuàng)建一個 css 的任務(wù)
gulp.task('css', function () {
? ? return gulp
? ? .src('./src/css/**')?
? ? .pipe(autoPrefixer({
? ? ? ? browsers: ['last 2 versions']
? ? }))
? ? .pipe(cssmin())? ? ?
? ? .pipe(gulp.dest('./dist/css'))?
})
// 2-2. 創(chuàng)建一個 sass 任務(wù)
gulp.task('sass', function () {
? ? return gulp
? ? .src('./src/sass/**')
? ? .pipe(sass())
? ? ? ? .pipe(autoPrefixer({
? ? ? ? overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
? }))
? ? .pipe(cssmin())
? ? .pipe(gulp.dest('./dist/css'))
})
// 3. 創(chuàng)建一個 js 任務(wù)
gulp.task('js', function () {
? ? return gulp
? ? .src('./src/js/**')
? ? .pipe(babel({
? ? ? ? presets: ['es2015']
? ? }))
? ? .pipe(uglify())
? ? .pipe(gulp.dest('./dist/js'))
})
// 4. 創(chuàng)建一個 html 任務(wù)
gulp.task('html', function () {
? ? return gulp
? ? .src('./src/pages/**')
? ? .pipe(htmlmin({
? ? ? ? removeEmptyAttributes:true, // 移除空的屬性
? ? ? ? ? ? collapseWhitespace:true, // 移除空格
? ? ? ? ? ? minifyCSS:true,? // 壓縮 style 標(biāo)簽
? ? ? ? ? ? minifyJS:true,? ? // 壓縮 script 標(biāo)簽
? ? }))
? ? .pipe(gulp.dest('./dist/pages'))
})
這樣就配置完畢了
接下來就是去命令行運行一下 html 任務(wù)
# 運行 html 任務(wù)
$ gulp html
處理 LIB 和 STATIC 文件
接下來我們就是處理 lib 和 static 里面的文件了
因為這些都是第三方的文件和一些圖片之類的信息
不需要壓縮處理，只要給我轉(zhuǎn)到 dist 文件夾下就可以了
所以不需要依賴，直接處理就行
// 我是 gulpfile.js 文件
// 1. 引入 gulp
const gulp = require('gulp')
// 2-1. 引入 gulp-cssmin
const cssmin = require('gulp-cssmin')
// 2-2. 引入 gulp-autoprefixer
const autoPrefixer = require('gulp-autoprefixer')
// 2-3. 引入 gulp-sass
const sass = require('gulp-sass')
// 3-1. 引入 gulp-uglify
const uglify = require('gulp-urlify')
// 3-2. 引入 gulp-babel
//? ? ? es6 轉(zhuǎn) es5 雖然需要下載三個依賴，但是只需要引入一個 gulp-babel 就可以了
const babel = require('gulp-babel')
// 4. 引入 gulp-htmlmin
const htmlmin = require('gulp-htmlmin')
// 2-1. 創(chuàng)建一個 css 的任務(wù)
gulp.task('css', function () {
? ? return gulp
? ? .src('./src/css/**')?
? ? .pipe(autoPrefixer({
? ? ? ? browsers: ['last 2 versions']
? ? }))
? ? .pipe(cssmin())? ? ?
? ? .pipe(gulp.dest('./dist/css'))?
})
// 2-2. 創(chuàng)建一個 sass 任務(wù)
gulp.task('sass', function () {
? ? return gulp
? ? .src('./src/sass/**')
? ? .pipe(sass())
? ? ? ? .pipe(autoPrefixer({
? ? ? ? overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
? }))
? ? .pipe(cssmin())
? ? .pipe(gulp.dest('./dist/css'))
})
// 3. 創(chuàng)建一個 js 任務(wù)
gulp.task('js', function () {
? ? return gulp
? ? .src('./src/js/**')
? ? .pipe(babel({
? ? ? ? presets: ['es2015']
? ? }))
? ? .pipe(uglify())
? ? .pipe(gulp.dest('./dist/js'))
})
// 4. 創(chuàng)建一個 html 任務(wù)
gulp.task('html', function () {
? ? return gulp
? ? .src('./src/pages/**')
? ? .pipe(htmlmin({
? ? ? ? removeEmptyAttributes:true, // 移除空的屬性
? ? ? ? ? ? collapseWhitespace:true, // 移除空格
? ? ? ? ? ? minifyCSS:true,? // 壓縮 style 標(biāo)簽
? ? ? ? ? ? minifyJS:true,? ? // 壓縮 script 標(biāo)簽
? ? }))
? ? .pipe(gulp.dest('./dist/pages'))
})
// 5. 創(chuàng)建一個 lib 任務(wù)
gulp.task('lib', function () {
? ? return gulp
? ? .src('./src/lib/**')
? ? .pipe(gulp.dest('./dist/lib'))
})
// 6. 創(chuàng)建一個 static 任務(wù)
gulp.task('static', function () {
? ? return gulp
? ? .src('./src/static/**')
? ? .pipe(gulp.dest('./dist/static'))
})
接下來就是去命令行執(zhí)行 lib 任務(wù)和 static 任務(wù)
# 執(zhí)行 lib 任務(wù)
$ gulp lib
# 執(zhí)行 static 任務(wù)
$gulp static
批量按循序執(zhí)行任務(wù)
我們的幾個和文件相關(guān)的任務(wù)都配置完畢了
但是我們不能在開發(fā)過程中一個任務(wù)一個任務(wù)的去執(zhí)行
不方便也不是很只能
所以我們要統(tǒng)一執(zhí)行任務(wù)
這個時候就需要進(jìn)行一個配置，讓幾個任務(wù)一起執(zhí)行一下
這個不需要依賴，我們只需要配置一個叫做 default 的任務(wù)
gulp 在運行的時候會默認(rèn)執(zhí)行 default 任務(wù)
// 我是 gulpfile.js 文件
// 1. 引入 gulp
const gulp = require('gulp')
// 2-1. 引入 gulp-cssmin
const cssmin = require('gulp-cssmin')
// 2-2. 引入 gulp-autoprefixer
const autoPrefixer = require('gulp-autoprefixer')
// 2-3. 引入 gulp-sass
const sass = require('gulp-sass')
// 3-1. 引入 gulp-uglify
const uglify = require('gulp-urlify')
// 3-2. 引入 gulp-babel
//? ? ? es6 轉(zhuǎn) es5 雖然需要下載三個依賴，但是只需要引入一個 gulp-babel 就可以了
const babel = require('gulp-babel')
// 4. 引入 gulp-htmlmin
const htmlmin = require('gulp-htmlmin')
// 2-1. 創(chuàng)建一個 css 的任務(wù)
gulp.task('css', function () {
? ? return gulp
? ? .src('./src/css/**')?
? ? .pipe(autoPrefixer({
? ? ? ? browsers: ['last 2 versions']
? ? }))
? ? .pipe(cssmin())? ? ?
? ? .pipe(gulp.dest('./dist/css'))?
})
// 2-2. 創(chuàng)建一個 sass 任務(wù)
gulp.task('sass', function () {
? ? return gulp
? ? .src('./src/sass/**')
? ? .pipe(sass())
? ? ? ? .pipe(autoPrefixer({
? ? ? ? overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
? }))
? ? .pipe(cssmin())
? ? .pipe(gulp.dest('./dist/css'))
})
// 3. 創(chuàng)建一個 js 任務(wù)
gulp.task('js', function () {
? ? return gulp
? ? .src('./src/js/**')
? ? .pipe(babel({
? ? ? ? presets: ['es2015']
? ? }))
? ? .pipe(uglify())
? ? .pipe(gulp.dest('./dist/js'))
})
// 4. 創(chuàng)建一個 html 任務(wù)
gulp.task('html', function () {
? ? return gulp
? ? .src('./src/pages/**')
? ? .pipe(htmlmin({
? ? ? ? removeEmptyAttributes:true, // 移除空的屬性
? ? ? ? ? ? collapseWhitespace:true, // 移除空格
? ? ? ? ? ? minifyCSS:true,? // 壓縮 style 標(biāo)簽
? ? ? ? ? ? minifyJS:true,? ? // 壓縮 script 標(biāo)簽
? ? }))
? ? .pipe(gulp.dest('./dist/pages'))
})
// 5. 創(chuàng)建一個 lib 任務(wù)
gulp.task('lib', function () {
? ? return gulp
? ? .src('./src/lib/**')
? ? .pipe(gulp.dest('./dist/lib'))
})
// 6. 創(chuàng)建一個 static 任務(wù)
gulp.task('static', function () {
? ? return gulp
? ? .src('./src/static/**')
? ? .pipe(gulp.dest('./dist/static'))
})
// 7. 配置一個默認(rèn)任務(wù)
gulp.task('default', gulp.series('css', 'sass', 'js', 'html', 'lib', 'static'))
這樣配置完畢以后，當(dāng)你運行 gulp 的時候，會自動執(zhí)行 default 任務(wù),并按順序執(zhí)行
然后 default 任務(wù)就會把后面gulp.series('css', 'sass', 'js', 'html', 'lib', 'static')的任務(wù)依次執(zhí)行
接下來就是去命令行里面運行 gulp
# 運行 gulp，會默認(rèn)執(zhí)行 default 任務(wù)
$ gulp
清除 DIST 文件夾
當(dāng)你在編譯的時候，如果第一次編譯有一個叫做 a.css 的文件，他會幫你編譯
后來你把 a.css 文件改名字了，改叫 b.css，再次進(jìn)行編譯的時候
會給你新生成一個 b.css 文件在 dist 文件夾中
之前的 a.css 文件也不會消失
那么這樣就不是很好了
我們比較好的做法是
在執(zhí)行所有的編譯之前
先把 dist 文件夾刪除掉
然后再執(zhí)行所有的編譯操作
這樣就不會用多余的文件留下了
這個時候我們就要使用一個依賴
npm i -D gulp-clean
然后去配置文件里面配置一個任務(wù)
// 我是 gulpfile.js 文件
// 1. 引入 gulp
const gulp = require('gulp')
// 2-1. 引入 gulp-cssmin
const cssmin = require('gulp-cssmin')
// 2-2. 引入 gulp-autoprefixer
const autoPrefixer = require('gulp-autoprefixer')
// 2-3. 引入 gulp-sass
const sass = require('gulp-sass')
// 3-1. 引入 gulp-uglify
const uglify = require('gulp-urlify')
// 3-2. 引入 gulp-babel
//? ? ? es6 轉(zhuǎn) es5 雖然需要下載三個依賴，但是只需要引入一個 gulp-babel 就可以了
const babel = require('gulp-babel')
// 4. 引入 gulp-htmlmin
const htmlmin = require('gulp-htmlmin')
// 2-1. 創(chuàng)建一個 css 的任務(wù)
gulp.task('css', function () {
? ? return gulp
? ? .src('./src/css/**')?
? ? .pipe(autoPrefixer({
? ? ? ? browsers: ['last 2 versions']
? ? }))
? ? .pipe(cssmin())? ? ?
? ? .pipe(gulp.dest('./dist/css'))?
})
// 2-2. 創(chuàng)建一個 sass 任務(wù)
gulp.task('sass', function () {
? ? return gulp
? ? .src('./src/sass/**')
? ? .pipe(sass())
? ? ? ? .pipe(autoPrefixer({
? ? ? ? overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
? }))
? ? .pipe(cssmin())
? ? .pipe(gulp.dest('./dist/css'))
})
// 3. 創(chuàng)建一個 js 任務(wù)
gulp.task('js', function () {
? ? return gulp
? ? .src('./src/js/**')
? ? .pipe(babel({
? ? ? ? presets: ['es2015']
? ? }))
? ? .pipe(uglify())
? ? .pipe(gulp.dest('./dist/js'))
})
// 4. 創(chuàng)建一個 html 任務(wù)
gulp.task('html', function () {
? ? return gulp
? ? .src('./src/pages/**')
? ? .pipe(htmlmin({
? ? ? ? removeEmptyAttributes:true, // 移除空的屬性
? ? ? ? ? ? collapseWhitespace:true, // 移除空格
? ? ? ? ? ? minifyCSS:true,? // 壓縮 style 標(biāo)簽
? ? ? ? ? ? minifyJS:true,? ? // 壓縮 script 標(biāo)簽
? ? }))
? ? .pipe(gulp.dest('./dist/pages'))
})
// 5. 創(chuàng)建一個 lib 任務(wù)
gulp.task('lib', function () {
? ? return gulp
? ? .src('./src/lib/**')
? ? .pipe(gulp.dest('./dist/lib'))
})
// 6. 創(chuàng)建一個 static 任務(wù)
gulp.task('static', function () {
? ? return gulp
? ? .src('./src/static/**')
? ? .pipe(gulp.dest('./dist/static'))
})
// 8. 創(chuàng)建一個 clean 任務(wù)
gulp.task('clean', function () {
? ? return gulp
? ? .src('./dist')
? ? .pipe(clean())
})
// 7. 配置一個默認(rèn)任務(wù)
gulp.task('default', gulp.series('clean','css', 'sass', 'js', 'html', 'lib', 'static'))
接下來我們執(zhí)行 default 任務(wù)
# 執(zhí)行 default 任務(wù)
$ gulp
自動打開瀏覽器
我們的打包工作已經(jīng)完成了
接下來要是能再打包完畢自動幫我把瀏覽器打開就好了
省的我自己去開了
這個時候是可以做到的
需要一個依賴
npm i -D gulp-webserver
然后進(jìn)行配置
// 我是 gulpfile.js 文件
// 1. 引入 gulp
const gulp = require('gulp')
// 2-1. 引入 gulp-cssmin
const cssmin = require('gulp-cssmin')
// 2-2. 引入 gulp-autoprefixer
const autoPrefixer = require('gulp-autoprefixer')
// 2-3. 引入 gulp-sass
const sass = require('gulp-sass')
// 3-1. 引入 gulp-uglify
const uglify = require('gulp-urlify')
// 3-2. 引入 gulp-babel
//? ? ? es6 轉(zhuǎn) es5 雖然需要下載三個依賴，但是只需要引入一個 gulp-babel 就可以了
const babel = require('gulp-babel')
// 4. 引入 gulp-htmlmin
const htmlmin = require('gulp-htmlmin')
// 2-1. 創(chuàng)建一個 css 的任務(wù)
gulp.task('css', function () {
? ? return gulp
? ? .src('./src/css/**')?
? ? .pipe(autoPrefixer({
? ? ? ? overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
? ? }))
? ? .pipe(cssmin())? ? ?
? ? .pipe(gulp.dest('./dist/css'))?
})
// 2-2. 創(chuàng)建一個 sass 任務(wù)
gulp.task('sass', function () {
? ? return gulp
? ? .src('./src/sass/**')
? ? .pipe(sass())
? ? ? ? .pipe(autoPrefixer({
? ? ? ? overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
? }))
? ? .pipe(cssmin())
? ? .pipe(gulp.dest('./dist/css'))
})
// 3. 創(chuàng)建一個 js 任務(wù)
gulp.task('js', function () {
? ? return gulp
? ? .src('./src/js/**')
? ? .pipe(babel({
? ? ? ? presets: ['es2015']
? ? }))
? ? .pipe(uglify())
? ? .pipe(gulp.dest('./dist/js'))
})
// 4. 創(chuàng)建一個 html 任務(wù)
gulp.task('html', function () {
? ? return gulp
? ? .src('./src/pages/**')
? ? .pipe(htmlmin({
? ? ? ? removeEmptyAttributes:true, // 移除空的屬性
? ? ? ? ? ? collapseWhitespace:true, // 移除空格
? ? ? ? ? ? minifyCSS:true,? // 壓縮 style 標(biāo)簽
? ? ? ? ? ? minifyJS:true,? ? // 壓縮 script 標(biāo)簽
? ? }))
? ? .pipe(gulp.dest('./dist/pages'))
})
// 5. 創(chuàng)建一個 lib 任務(wù)
gulp.task('lib', function () {
? ? return gulp
? ? .src('./src/lib/**')
? ? .pipe(gulp.dest('./dist/lib'))
})
// 6. 創(chuàng)建一個 static 任務(wù)
gulp.task('static', function () {
? ? return gulp
? ? .src('./src/static/**')
? ? .pipe(gulp.dest('./dist/static'))
})
// 8. 創(chuàng)建一個 clean 任務(wù)
gulp.task('clean', function () {
? ? return gulp
? ? .src('./dist')
? ? .pipe(clean())
})
// 9. 創(chuàng)建一個 webserver 任務(wù)
gulp.task('webserver', function () {
? ? return gulp
? ? ? ? .src('./dist')
? ? ? ? .pipe(webserver({
? ? ? ? ? ? host: 'localhost',? ? ? ? ? // 配置打開瀏覽器的域名
? ? ? ? ? ? port: 3000,? ? ? ? ? ? ? ? // 配置打開瀏覽器的端口號
? ? ? ? ? ? livereload: true,? ? ? ? ? // 自動刷新瀏覽器
? ? ? ? ? ? open: './pages/index.html'? // 默認(rèn)打開 dist 文件夾下的哪個文件
? ? ? ? }))
})
// default 任務(wù)
gulp.task('default', gulp.series('clean','css', 'sass', 'js', 'html', 'lib', 'static','webserver'))
因為我們打開瀏覽器應(yīng)該再所有壓縮任務(wù)都完成以后
再把瀏覽器打開
所以我們把他排在任務(wù)的第三個隊列上
這個 webserver 會自動幫我們啟動一個服務(wù)器
是一個 node 的服務(wù)器
所以我們的頁面也相當(dāng)于是在服務(wù)器上打開的
修改內(nèi)容自動刷新
我們剛才再配置 webserver 的時候有一個自動刷新的功能被我們開啟了
但是我們修改一些文件的時候發(fā)現(xiàn)并沒有自動刷新
這個是因為，我們只是開啟了自動刷新，但是你修改文件以后并沒有自動幫我們重新編譯
那么 dist/ 文件夾下的內(nèi)容就不會更改，那么刷新就沒有意義
所以我們應(yīng)該再制作一個任務(wù)，當(dāng)文件夾下的內(nèi)容修改的時候，自動幫我們從新編譯
這個不需要任何依賴，我們只需要配置一個監(jiān)控文件改變的任務(wù)就行了
// 我是 gulpfile.js 文件
// 1. 引入 gulp
const gulp = require('gulp')
// 2-1. 引入 gulp-cssmin
const cssmin = require('gulp-cssmin')
// 2-2. 引入 gulp-autoprefixer
const autoPrefixer = require('gulp-autoprefixer')
// 2-3. 引入 gulp-sass
const sass = require('gulp-sass')
// 3-1. 引入 gulp-uglify
const uglify = require('gulp-urlify')
// 3-2. 引入 gulp-babel
//? ? ? es6 轉(zhuǎn) es5 雖然需要下載三個依賴，但是只需要引入一個 gulp-babel 就可以了
const babel = require('gulp-babel')
// 4. 引入 gulp-htmlmin
const htmlmin = require('gulp-htmlmin')
// 2-1. 創(chuàng)建一個 css 的任務(wù)
gulp.task('css', function () {
? ? return gulp
? ? .src('./src/css/**')?
? ? .pipe(autoPrefixer({
? ? ? ? overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
? ? }))
? ? .pipe(cssmin())? ? ?
? ? .pipe(gulp.dest('./dist/css'))?
})
// 2-2. 創(chuàng)建一個 sass 任務(wù)
gulp.task('sass', function () {
? ? return gulp
? ? .src('./src/sass/**')
? ? .pipe(sass())
? ? ? ? .pipe(autoPrefixer({
? ? ? ? overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
? }))
? ? .pipe(cssmin())
? ? .pipe(gulp.dest('./dist/css'))
})
// 3. 創(chuàng)建一個 js 任務(wù)
gulp.task('js', function () {
? ? return gulp
? ? .src('./src/js/**')
? ? .pipe(babel({
? ? ? ? presets: ['es2015']
? ? }))
? ? .pipe(uglify())
? ? .pipe(gulp.dest('./dist/js'))
})
// 4. 創(chuàng)建一個 html 任務(wù)
gulp.task('html', function () {
? ? return gulp
? ? .src('./src/pages/**')
? ? .pipe(htmlmin({
? ? ? ? removeEmptyAttributes:true, // 移除空的屬性
? ? ? ? ? ? collapseWhitespace:true, // 移除空格
? ? ? ? ? ? minifyCSS:true,? // 壓縮 style 標(biāo)簽
? ? ? ? ? ? minifyJS:true,? ? // 壓縮 script 標(biāo)簽
? ? }))
? ? .pipe(gulp.dest('./dist/pages'))
})
// 5. 創(chuàng)建一個 lib 任務(wù)
gulp.task('lib', function () {
? ? return gulp
? ? .src('./src/lib/**')
? ? .pipe(gulp.dest('./dist/lib'))
})
// 6. 創(chuàng)建一個 static 任務(wù)
gulp.task('static', function () {
? ? return gulp
? ? .src('./src/static/**')
? ? .pipe(gulp.dest('./dist/static'))
})
// 8. 創(chuàng)建一個 clean 任務(wù)
gulp.task('clean', function () {
? ? return gulp
? ? .src('./dist')
? ? .pipe(clean())
})
// 9. 創(chuàng)建一個 webserver 任務(wù)
gulp.task('webserver', function () {
? ? return gulp
? ? ? ? .src('./dist')
? ? ? ? .pipe(webserver({
? ? ? ? ? ? host: 'localhost',? ? ? ? ? // 配置打開瀏覽器的域名
? ? ? ? ? ? port: 3000,? ? ? ? ? ? ? ? // 配置打開瀏覽器的端口號
? ? ? ? ? ? livereload: true,? ? ? ? ? // 自動刷新瀏覽器
? ? ? ? ? ? open: './pages/index.html'? // 默認(rèn)打開 dist 文件加下的哪個文件
? ? ? ? }))
})
// 10. 創(chuàng)建一個 watch 任務(wù)
gulp.task('watch', function () {
? ? gulp.watch('./src/css/**', gulp.series('css'))
? ? gulp.watch('./src/sass/**', gulp.series('sass'))
? ? gulp.watch('./src/js/**', gulp.series('js'))
? ? gulp.watch('./src/pages/**',gulp.series('html'))
? ? gulp.watch('./src/lib/**', gulp.series('lib'))
? ? gulp.watch('./src/static/**', gulp.series('static'))
})
// default 任務(wù)
gulp.task('default', gulp.series('clean','css', 'sass', 'js', 'html', 'lib', 'static','webserver','watch'))
因為再文件壓縮完畢以后，我們就可以開始監(jiān)控了
所以把這個 watch 任務(wù)和 webserver 任務(wù)并行就可以了
接下來我們就可以再命令行運行 gulp 了
# 運行 gulp
$ gulp
這個時候，我們只要進(jìn)行代碼書寫就可以了
隨著我們寫完，會自動幫我們打包編譯，并且自動進(jìn)行瀏覽器刷新的
使用 GULP 配置代理
我們的 gulp 自動打包構(gòu)建已經(jīng)完成了
我們的正常開發(fā)已經(jīng)可以進(jìn)行下去了
我們就剩最后一個功能沒有實現(xiàn)了
那就是跨域請求的問題
因為我們的項目中肯定有一些數(shù)據(jù)是向后臺請求過來的
那么我們就要發(fā)送請求
我們又不能保重 服務(wù)端接口 和我們是同源的
所以我們就要配置一個代理
gulp 給我們啟動的這個服務(wù)器是 node 的服務(wù)器
所以也可以直接配置代理
不需要任何依賴，只要再 webserver 任務(wù)中多加一個配置就可以了
gulp.task('webserver', function () {
? ? return gulp
? ? ? ? .src('./dist')
? ? ? ? .pipe(webserver({
? ? ? ? ? ? host: 'localhost',
? ? ? ? ? ? port: 3000,
? ? ? ? ? ? livereload: true,
? ? ? ? ? ? open: './pages/index.html',
? ? ? ? ? ? proxies: [ // 配置所有代理
? ? ? ? ? ? ? ? { // 其中一個代理配置
? ? ? ? ? ? ? ? ? ? source: '/login', // 使用的關(guān)鍵字
? ? ? ? ? ? ? ? ? ? target: 'http://localhost:80/login.php' // 代理的路徑
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? }))
})
這個時候你就可以正常發(fā)送請求了
當(dāng)你要請求代理地址的時候，只要再這里配置一下，使用代理關(guān)鍵字進(jìn)行請求就可以了
GULP完整配置文件（簡單版）
所有需要用到的依賴
gulp
gulp-cssmin
gulp-autoprefixer
gulp-sass（node-sass）
gulp-uglify
gulp-babel@7.0.1
babel-core
babel-preset-es2015
gulp-htmlmin
gulp-clean
gulp-webserver
gulpfile.js 文件內(nèi)容
// 我是 gulpfile.js 文件
const gulp = require('gulp')
const cssmin = require('gulp-cssmin')
const autoPrefixer = require('gulp-autoprefixer')
const sass = require('gulp-sass')
const uglify = require('gulp-urlify')
const babel = require('gulp-babel')
const htmlmin = require('gulp-htmlmin')
const clean = require('gulp-clean')
const webserver = require('gulp-webserver')
gulp.task('css', function () {
? ? return gulp
? ? .src('./src/css/**')?
? ? .pipe(autoPrefixer({
? ? ? ? overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
? ? }))
? ? .pipe(cssmin())? ? ?
? ? .pipe(gulp.dest('./dist/css'))?
})
gulp.task('sass', function () {
? ? return gulp
? ? .src('./src/sass/**')
? ? .pipe(sass())
? ? .pipe(autoPrefixer({
? ? ? ? ? ? overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]
? ? }))
? ? .pipe(cssmin())
? ? .pipe(gulp.dest('./dist/css'))
})
gulp.task('js', function () {
? ? return gulp
? ? .src('./src/js/**')
? ? .pipe(babel({
? ? ? ? presets: ['es2015']
? ? }))
? ? .pipe(uglify())
? ? .pipe(gulp.dest('./dist/js'))
})
gulp.task('html', function () {
? ? return gulp
? ? .src('./src/pages/**')
? ? .pipe(htmlmin({
? ? ? ? removeEmptyAttributes:true,
? ? ? ? ? ? collapseWhitespace:true,
? ? ? ? ? ? minifyCSS:true,?
? ? ? ? ? ? minifyJS:true,? ?
? ? }))
? ? .pipe(gulp.dest('./dist/pages'))
})
gulp.task('lib', function () {
? ? return gulp
? ? .src('./src/lib/**')
? ? .pipe(gulp.dest('./dist/lib'))
})
gulp.task('static', function () {
? ? return gulp
? ? .src('./src/static/**')
? ? .pipe(gulp.dest('./dist/static'))
})
gulp.task('clean', function () {
? ? return gulp
? ? .src('./dist')
? ? .pipe(clean())
})
gulp.task('webserver', function () {
? ? return gulp
? ? ? ? .src('./dist')
? ? ? ? .pipe(webserver({
? ? ? ? ? ? host: 'localhost',? ? ? ? ?
? ? ? ? ? ? port: 3000,? ? ? ? ? ? ? ?
? ? ? ? ? ? livereload: true,? ? ? ? ?
? ? ? ? ? ? open: './pages/index.html',
? ? ? ? proxies: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? source: '/login',
? ? ? ? ? ? ? ? ? ? target: 'http://localhost:80/login.php'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? }))
})
gulp.task('watch', function () {
? ? gulp.watch('./src/css/**', ['css'])
? ? gulp.watch('./src/sass/**', ['sass'])
? ? gulp.watch('./src/js/**', ['js'])
? ? gulp.watch('./src/pages/**', ['html'])
? ? gulp.watch('./src/lib/**', ['lib'])
? ? gulp.watch('./src/static/**', ['static'])
})
gulp.task('default', gulp.series('clean','css', 'sass', 'js', 'html', 'lib', 'static','webserver','watch'))
