2. 程式人生 > 其它 >高階前端進階，用Gulp提升你的開發效率

高階前端進階，用Gulp提升你的開發效率

阿新 • • 發佈：2020-12-29

技術標籤：高階前端進階javascript

前言：

這兩天動手配置了一下gulp，發現gulp配置簡單，構建速度快，在某些使用場景下還是個不錯的選擇，本文從零開始構建，到最後打包釋出到生成環境。通過本文可以快速上手gulp，文末附送github原始碼，需要的可以點選下載。

gulp介紹：

gulp是一個基於流的前端自動化構建工具，與grunt、webpack為前端三大自動構建工具。

1.安裝
//1.安裝gulp腳手架

npm install --global gulp-cli

//2.建立資料夾gulp-demo

mkdir gulp-demo

//3.進入資料夾

cd gulp-demo

//4.初始化專案

npm init
2.gulpfile.js介紹

在專案根目錄建立個gulpfile.js檔案,執行gulp命令後，gulp會去讀取gulpfile.js檔案，這是gulp的入口檔案，所有的指令邏輯處理都在此檔案中進行。

當專案體量過大時，可以在根目錄內建立個gulpfile.js資料夾，資料夾內部建立index.js，可以在index.js中引入不同的處理模組.

在以前的版本中都是通過gulp.task來建立不同的任務，新版本主要通過exports.xxx來匯出任務

例：
function test(cb) {
 cb()
}

exports.test = test;

在控制檯輸入指令gulp test

[16:41:29] Using gulpfile F:\gulp\gulpfile.js
[16:41:29] Starting 'test'...
[16:41:29] Finished 'test' after 1.95 ms

如果將exports.test = test改為exports.default=test,在控制檯直接輸入gulp就可以直接構建了。

1.處理js

壓縮js、建立sourcemap、重新命名js

const {
  src, //gulp的內建方法
  dest
} = require('gulp');
//重新命名js檔案
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');

function javascript() {
  return src(['src/js/*.js', '!src/js/*.min.js']) //1.建立一個流，從src讀取
    //2.建立sourcemap
    .pipe(sourcemaps.init()) 
    //pipe為gulp內的一個方法
    //用於流之間的連結
    // 3. 壓縮檔案
    .pipe(uglify())
    //4.重新命名，名稱後加min.js
    .pipe(rename({
      extname: '.min.js'
    }))
    //5.將sourcemap寫入
    .pipe(sourcemaps.write('./'))
    // 6.將檔案寫入build/js目錄下
    .pipe(dest('build/js'))
}

exports.javascript = javascript;

控制檯輸入指令gulp javascript

在build/js下會生成兩個檔案index.min.js以及index.min.js.map

2.處理css

壓縮css、建立sourcemap、重新命名css

const {
  src,
  dest
} = require('gulp');
const minifyCSS = require('gulp-clean-css');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');

function css() {
  return src('src/css/*.css') //1.流入口檔案
    //2.建立sourcemap
    .pipe(sourcemaps.init())
    //3.自動新增瀏覽器字首
    .pipe(autoprefixer())
    // 4.壓縮css
    .pipe(minifyCSS())
    //5.寫入sourcemap
    .pipe(sourcemaps.write('./'))
    //6.寫入檔案
    .pipe(dest('build/css'))
}

exports.css = css;

控制檯輸入指令gulp css

在build/js下會生成兩個檔案index.min.css以及index.min.css.map

3.處理圖片
const {
  src,
  dest
} = require('gulp');
const imagemin = require('gulp-imagemin')

function image() {
  return src('src/images/*.*') // 1. 建立輸入流
    // 2. 壓縮圖片
    .pipe(imagemin({
      progressive: true
    }))
    // 3. 寫入檔案
    .pipe(dest('build/images'))
}

exports.image = image;

控制檯輸入指令gulp image

[17:00:07] Using gulpfile F:\gulp-demo\gulpfile.js
[17:00:07] Starting 'image'...
[17:00:19] gulp-imagemin: Minified 3 images (saved 449 kB - 35.5%)
[17:00:19] Finished 'image' after 12 s

可以看到圖片的壓縮比例

4.處理less
const {
  src,
  dest
} = require('gulp');
const gulpLess = require('gulp-less');
const minifyCss = require('gulp-clean-css')
const sourcemaps = require('gulp-sourcemaps');
const rename = require('gulp-rename');

function less() {
  return src('src/less/**.less') //1.建立輸入流
    //2.建立sourcemap
    .pipe(sourcemaps.init())
    //3.less轉為css
    .pipe(gulpLess())
    //4.壓縮css
    .pipe(minifyCss())
    //5.修改名稱
    .pipe(rename({extname: '.min.css'}))
    //6.寫入sourcemap
    .pipe(sourcemaps.write('./'))
    //7.寫入檔案
    .pipe(dest('build/less'))
}

exports.less = less;

控制檯輸入指令gulp less
在build/less下會生成兩個檔案index.min.css以及index.min.css.map

基本使用介紹完畢，接下來咱們分別通過開發環境跟正式環境來配置gulp

開發環境：

開發環境需要:

  1. css瀏覽器字首新增
  2. 熱更新
  3. 靜態伺服器啟動
相關配置:
const gulp = require('gulp');
//內建方法
const {
  series,
  parallel,
  watch,
  src,
  dest
} = require('gulp');

//工具
const autoprefixer = require('gulp-autoprefixer');
const include = require('gulp-file-include');
const clean = require('gulp-clean');

//轉碼
const less = require('gulp-less');

//瀏覽器
const browserSync = require('browser-sync').create();
const reload = browserSync.reload;

//原始檔路徑
const srcPath = {
  root: 'src',
  html: ['src/**/*.html', '!src/include/**/*.html'],
  images: 'src/images/*',
  css: 'src/css/*.css',
  less: 'src/less/*.less',
  js: 'src/js/*.js',
  library: 'src/library/*.js'
};
//開發生成路徑
const distPath = {
  root: 'dist',
  html: 'dist',
  images: 'dist/images',
  css: 'dist/css',
  less: 'dist/less',
  js: 'dist/js',
  library: 'dist/library',
  manifest: 'dist/**/*.json',
};

//開發環境
//css處理
function cssDev() {
  return src(srcPath.css)
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false,
    }))
    .pipe(dest(distPath.css))
    .pipe(reload({
      stream: true
    }))
}
//less處理
function lessDev() {
  return src(srcPath.less)
    .pipe(less())
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false,
    }))
    .pipe(dest(distPath.less))
    .pipe(reload({
      stream: true
    }))
}
//js處理
function jsDev() {
  return gulp.src(srcPath.js)
    .pipe(dest(distPath.js))
    .pipe(reload({
      stream: true
    }))
}
//library 處理
function libraryDev() {
  return src(srcPath.library)
    .pipe(dest(distPath.library))
    .pipe(reload({
      stream: true
    }))
}

//image 處理
function imagesDev() {
  return src(srcPath.images)
    .pipe(dest(distPath.images))
    .pipe(reload({
      stream: true
    }))
}
//html 處理
function htmlDev() {
  return src(srcPath.html)
    .pipe(include({}))
    .pipe(dest(distPath.html))
    .pipe(reload({
      stream: true
    }))
}

//清除dist目錄
function cleanDir() {
  return src('dist/*')
    .pipe(clean({
      read: false
    }))
}

//靜態伺服器
function browser() {
  browserSync.init({
    server: {
      baseDir: './dist',
    }
  })
  watchDev();
}

function watchDev() {
  console.log("開始監控")
  watch(srcPath.css, function(cb) {
    cssDev()
  });
  watch(srcPath.less, function(cb) {
    lessDev()
  });
  watch(srcPath.html, function(cb) {
    htmlDev()
  });
  watch(srcPath.js, function(cb) {
    jsDev()
  });
  watch(srcPath.library, function(cb) {
    libraryDev()
  });
  watch(srcPath.images, function(cb) {
    imagesDev()
  });
}
exports.dev = series(cleanDir, parallel(libraryDev, cssDev, lessDev, imagesDev, jsDev, htmlDev), browser)

在控制檯輸入gulp dev,瀏覽器會啟動，預設埠號：3000，檔案更新後會監聽到並更新。

生產環境

生產環境需要：

  1. 程式碼壓縮
  2. js、css生成hash名稱
  3. css新增字首
  4. 圖片壓縮
const gulp = require('gulp');
const {
  series,
  parallel,
  watch,
  src,
  dest
} = require('gulp');
//工具
const autoprefixer = require('gulp-autoprefixer');
const include = require('gulp-file-include');
const clean = require('gulp-clean');

//轉碼
const less = require('gulp-less');
const babel = require('gulp-babel');
const css_base64 = require('gulp-css-base64');

//壓縮優化
const minifyHtml = require('gulp-htmlmin');
const minifyImage = require('gulp-imagemin');
const minifyJs = require('gulp-uglify');
const minifyCss = require('gulp-clean-css');

//版本控制
const rev = require('gulp-rev');
const revCollector = require('gulp-rev-collector');
const delOriginal = require('gulp-rev-delete-original');

//瀏覽器
const browserSync = require('browser-sync').create();
const reload = browserSync.reload;

//原始檔路徑
const srcPath = {
  root: 'src',
  html: ['src/**/*.html', '!src/include/**/*.html'],
  images: 'src/images/*',
  css: 'src/css/*.css',
  less: 'src/less/*.less',
  js: 'src/js/*.js',
  library: 'src/library/*.js'
};
//生產生成路徑
const buildPath = {
  root: 'build',
  html: 'build',
  images: 'build/images',
  css: 'build/css',
  less: 'build/less',
  js: 'build/js',
  library: 'build/library',
  manifest: 'build/**/*.json',
};


//生產環境
//第三方庫
function libraryBuild() {
  return src(srcPath.library)
    .pipe(minifyJs())
    .pipe(dest(buildPath.library));
}

//css處理
function cssBuild() {
  return src([buildPath.manifest, buildPath.css + '/*.css'])
    .pipe(revCollector())
    .pipe(rev())
    .pipe(delOriginal())
    .pipe(dest(buildPath.css))
    .pipe(rev.manifest())
    .pipe(dest(buildPath.css))
}

function cssCompile() {
  return src([srcPath.css])
    .pipe(css_base64({
      maxWeightResource: 8 * 1024,
    }))
    .pipe(autoprefixer())
    .pipe(minifyCss())
    .pipe(dest(buildPath.css))
}
//less處理
function lessBuild() {
  return src([buildPath.manifest, buildPath.less + '/*.css'])
    .pipe(revCollector())
    .pipe(rev())
    .pipe(delOriginal())
    .pipe(dest(buildPath.less))
    .pipe(rev.manifest())
    .pipe(dest(buildPath.less))
}

function lessCompile() {
  return src([srcPath.less])
    .pipe(css_base64({
      maxWeightResource: 8 * 1024,
    }))
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(minifyCss())
    .pipe(dest(buildPath.less))
}

//js處理
function jsBuild() {
  return src(srcPath.js)
    .pipe(babel({
      presets: ['env'],
    }))
    .pipe(minifyJs())
    .pipe(rev())
    .pipe(dest(buildPath.js))
    .pipe(rev.manifest())
    .pipe(dest(buildPath.js))
}

//image 處理
function imagesBuild() {
  return src(srcPath.images)
    .pipe(minifyImage())
    .pipe(rev())
    .pipe(dest(buildPath.images))
    .pipe(rev.manifest())
    .pipe(dest(buildPath.images))
}
//html 處理
function htmlBuild() {
  return src([buildPath.manifest, ...srcPath.html])
    .pipe(include({}))
    .pipe(revCollector({
      replaceReved: true,
    }))
    .pipe(minifyHtml({
      collapseWhitespace: true,
    }))
    .pipe(dest(buildPath.html))
}

//清除build目錄
function cleanBuild() {
  return src('build/*')
    .pipe(clean({
      read: false
    }))
}

//清除manifest
function cleanManifest() {
  return src('build/**/*.json')
    .pipe(clean({
      read: false
    }))
}

exports.build = series(cleanBuild, imagesBuild, jsBuild, libraryBuild, lessCompile,  lessBuild, cssCompile, cssBuild, htmlBuild,
  cleanManifest)

控制檯輸入gulp build就會生成build目錄，將生成後的目錄上傳至伺服器即可

[20:27:33] Using gulpfile F:\gulp-demo\gulpfile.js
[20:27:33] Starting 'build'...
[20:27:33] Starting 'cleanBuild'...
[20:27:33] Finished 'cleanBuild' after 37 ms
[20:27:33] Starting 'imagesBuild'...
[20:27:45] gulp-imagemin: Minified 2 images (saved 174 kB - 21.5%)
[20:27:45] Finished 'imagesBuild' after 12 s
[20:27:45] Starting 'jsBuild'...
[20:27:46] Finished 'jsBuild' after 832 ms
[20:27:46] Starting 'libraryBuild'...
[20:27:46] Finished 'libraryBuild' after 3.77 ms
[20:27:46] Starting 'lessCompile'...
[20:27:46] Finished 'lessCompile' after 66 ms
[20:27:46] Starting 'lessBuild'...
[20:27:46] Finished 'lessBuild' after 18 ms
[20:27:46] Starting 'cssCompile'...
[20:27:46] Finished 'cssCompile' after 8.67 ms
[20:27:46] Starting 'cssBuild'...
[20:27:46] Finished 'cssBuild' after 13 ms
[20:27:46] Starting 'htmlBuild'...
[20:27:46] Finished 'htmlBuild' after 23 ms
[20:27:46] Finished 'build' after 13 s
最後附上github地址：demo下載

如果想獲取更多內容，可以掃描下方二維碼，一起學習，一起進步。
左道前端

相關推薦

高階前端進階，用Gulp提升你的開發效率

技術標籤：高階前端進階javascript 前言： 這兩天動手配置了一下gulp，發現gulp配置簡單，構建速度快，在某些使用場景下還是個不錯的選擇，本文從零開始構建，到最後打包釋出到生成環境。通過本文可以快速上手gu

高階前端進階，為什麼要使用call、apply、bind？

技術標籤：高階前端進階 前言： call、apply、bind這3個方法的用處都是更改this指向，在學習call、apply、bind之前，需要先了解this，所以本文會先對this進行講解。

高階前端進階，你知道http有幾個版本嗎？

技術標籤：高階前端進階http 前言： http全稱為超文字傳輸協議，本文將會盡量精簡的將http發展中經歷的幾個版本介紹出來。

高階前端進階（一）

希望疫情早日結束！！！ 一、首先來一道開胃菜，css方面問題 在前端方面，渲染列表資料的時候，可能會更改第一個或者最後一個的樣式，又或者其中第幾個的樣式，怎麼做呢？

高階前端進階（二）

恭喜EDG奪冠！！！ 滾動條擠壓頁面問題（開胃小菜） 滾動條擠壓頁面，我們可能沒怎麼注意到這個問題。

高階前端進階（三）

感謝 遺忘的過路人 這位博主，發現了 高階前端進階（一） 中的list轉樹形資料的問題。當然也是我的疏忽。抱歉！！！

高階前端進階（五）

詳解JavaScript中的事件迴圈機制！！！ 一、簡單講解 這個大家應該或多或少都知道的

android設計模式pdf，Android高階工程師進階學習—Android熱修復原理，精心整理

前言 大廠面試一直都是程式設計師圈內摸魚時間津津樂道的話題，進大廠想必也是無數程式設計師的夢想。

工作4年的程式設計師渴望進階高階渴望進大廠，非常迷茫求指點

　　這篇文章對php程式設計師太典型了，我就不在頭部分享淺析了，因為很多大神紛紛在底部評論發言，建議想法都很有意義，想了解的朋友希望你看完正文，不妨在看完評論，話不多說直接分享。

前端進階筆記之核心基礎知識---那些HTML標籤你熟悉嗎？

目錄 1、互動實現 1.1 meta標籤：自動重新整理/跳轉 1.2 title標籤：訊息提醒 2、效能優化

前端進階筆記（一）---JS語言通識

一、語言按照語法分類 1、非形式語言：中文 英文 2、形式語言：喬姆斯基譜系（四種文法 上下文包含文法）

程式設計大神進階，Python技巧小貼士

​ 整理字串輸入 整理使用者輸入的問題在程式設計過程中極為常見。通常情況下，將字元轉換為小寫或大寫就夠了，有時你可以使用正則表示式模組「Regex」完成這項工作。但是如果問題很複雜，可能有更好的方法來解決：

Python程式設計進階，Python如何實現多程序？

程序part1 一、程序介紹 1、獲取子父程序 2、程序的基本使用 2、建立帶有引數的程序

javascript進階，從表示式到引用型別

　　javascript語法比較靈活，一個功能可能有很多種實現，深入理解js語法和引擎的執行過程，推薦《JavaScript高階程式設計》。作為案頭的參考書，在看程式碼，寫程式碼時，翻看相關章節，收益良多。

前端進階之路--程式碼規範(1)

在我三年工作經驗的認知中，我認為可以分為三個階段： 第一階段\"生存階段\"即東拼西湊完成功能需求階段，可能別人map,filter能實現的我用了雙層for迴圈...(有點類似生存階段的溫飽階段)

阿里技術專家深入講解，SpringMVC入門到進階，看這一篇就夠了

前言 SpringMVC是一個實現了Web MVC設計模式的輕量級Web框架。它與前輩Struts 2框架一樣，都屬於MVC框架，因為其使用和效能等方面比Struts 2更加優異，所以Spring MVC是現在比較主流的MVC框架。

CSS三大特性及屬性，選擇器進階，外邊距塌陷問題

max-width和min-width: 用來設定元素的最大寬度和最小寬度 max-height和min-height: 用來設定元素的最大高度和最小高度

前端進階-個人筆記-JavaScript splice() 方法

技術標籤：個人筆記JavaScriptjavascript 定義和用法 splice() 方法用於新增或刪除陣列中的元素。

Java連結串列進階，附力扣牛客真題

技術標籤：JAVA連結串列java 上一節講了連結串列的基本用法，當我再深入刷題的時候，有被驚到，真的是細節滿滿，所以這一節來扯一下連結串列的一些進階技巧

Java高階工程師進階學習：建議收藏！二叉樹各種遍歷方式我都幫你總結啦

Java高階工程師進階學習：建議收藏！二叉樹各種遍歷方式我都幫你總結啦 只有左子樹