前端必會(huì)的輕量打包工具gulp使用詳解

更新時(shí)間：2022年11月03日 16:16:20 作者：mapengfei

這篇文章主要為大家介紹了前端必會(huì)的輕量打包工具gulp使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一. 安裝Node和gulp

gulp 是基于 node 實(shí)現(xiàn) Web 前端自動(dòng)化開(kāi)發(fā)的工具，利用它能夠極大的提高開(kāi)發(fā)效率。

在 Web 前端開(kāi)發(fā)工作中有很多“重復(fù)工作”，比如壓縮CSS/JS文件。而這些工作都是有規(guī)律的。找到這些規(guī)律，并編寫(xiě) gulp 配置代碼,讓 gulp 自動(dòng)執(zhí)行這些“重復(fù)工作”。

安裝node：由于gulp是基于node實(shí)現(xiàn)的，所以要先安裝node

node安裝

安裝gulp

 npm install -g gulp

安裝

 gulp -v

查看版本

二.使用gulp壓縮Js

壓縮js文件可以降低js文件的大小，提高頁(yè)面打開(kāi)速度。

2.1 方法

找到要壓縮的所有的js文件，壓縮它們，將壓縮后的文件放在 dist/js/目錄下

2.2 步驟

1. 創(chuàng)建gulp-demo文件夾，使用npm初始化項(xiàng)目

 npm init

2. 在項(xiàng)目根目錄新建一個(gè)gulpfile.js文件

gulp所有的配置都在這個(gè)文件里面

3. 在gulpfile文件中書(shū)寫(xiě)壓縮js文件的代碼，安裝gulp 和 gulp-uglify壓縮模塊

 //獲取gulp對(duì)象
 const gulp = require("gulp")
 // 壓縮js文件的對(duì)象，使用之前需要安裝
 // 安裝方法：npm i gulp-uglify -D
 const uglify = require("gulp-uglify")
 // 定義壓縮文件的處理方法
 function script(){
     //1. 匹配要所有壓縮的js文件
     gulp.src('js/*.js')
     //2. 壓縮文件
    .pipe(uglify())
     //3. 將壓縮后的文件寫(xiě)入指定目錄
    .pipe(gulp.dest('dist/js'))
 }
 //將定義好的壓縮方法暴露給外界
 exports.script = gulp.series(script);

 npm i gulp gulp-uglify -D

4. 在項(xiàng)目根目錄創(chuàng)建js文件夾并且創(chuàng)建需要測(cè)試的js文件

5. 在命令行輸入如下命令運(yùn)行

由于我們導(dǎo)入的為 script，所以這里輸入gulp script命令即可

 gulp script

6. 升級(jí)壓縮功能，每次文件修改之后，自動(dòng)壓縮打包

 //獲取gulp對(duì)象
 const gulp = require("gulp")
 // 壓縮js文件的對(duì)象，使用之前需要安裝
 // 安裝方法：npm i gulp-uglify -D
 const uglify = require("gulp-uglify")
 // 定義壓縮文件的處理方法
 function script(){
     //1. 匹配要所有壓縮的js文件
     gulp.src('js/*.js')
     //2. 壓縮文件
    .pipe(uglify())
     //3. 將壓縮后的文件寫(xiě)入指定目錄
    .pipe(gulp.dest('dist/js'))
 }
 //創(chuàng)建監(jiān)聽(tīng)js文件的方法
 function autoScript(){
     // 創(chuàng)建監(jiān)聽(tīng)對(duì)象
     var watcher = gulp.watch("js/*.js");
     //分別監(jiān)聽(tīng) change,add,unlink事件
     watcher.on("change",function(path,stats){
         console.log(`${path} has been changed!`);
    });
     watcher.on("add",function(path,stats){
         console.log(`${path} has been add!`);
    });
     watcher.on("unlink",function(path,stats){
         console.log(`${path} has been unlink!`);
    })
 }
 //將定義好的壓縮方法暴露給外界，并作為gulp的默認(rèn)值
 // exports.script = gulp.series(script,autoScript);
 exports.autoScript = gulp.parallel(script,autoScript);

運(yùn)行

 gulp autoScript

7. 使用 exports.default 定義默認(rèn)任務(wù)

 //如上所示，我們使用 export script 和 export autoScript命令執(zhí)行任務(wù)
 //可以通過(guò) exports.default 關(guān)鍵字指定默認(rèn)任務(wù)
 exports.default = gulp.parallel(script,autoScript);

設(shè)置完成之后，在命令行輸入 gulp即可啟動(dòng)任務(wù)

 gulp

完整項(xiàng)目目錄：gulp-demo(壓縮js)
注意：所有的項(xiàng)目，下載之后先在項(xiàng)目根目錄要運(yùn)行 npm i命令安裝模塊

三. 壓縮CSS文件

CSS文件壓縮過(guò)程類(lèi)似于Js文件，這里做簡(jiǎn)單介紹

3.1 步驟

1.創(chuàng)建gulpfile.js文件

2. 安裝壓縮CSS文件需要用到的模塊

 npm i gulp gulp-minify-css -D

3. 在項(xiàng)目根目錄創(chuàng)建CSS文件夾，在CSS文件夾下面創(chuàng)建要測(cè)試的CSS文件

4. 編寫(xiě)壓縮代碼，到處任務(wù)調(diào)用

 //獲取gulp對(duì)象
 const gulp = require("gulp")
 //獲取壓縮 css文件的方法
 const minifyCss = require("gulp-minify-css")
 // 定義壓縮文件的處理方法
 function css(){
    //1. 匹配要所有壓縮的css文件
    gulp.src('css/*.css')
    //2. 壓縮文件
    .pipe(minifyCss())
    //3. 將壓縮后的文件寫(xiě)入指定目錄
    .pipe(gulp.dest('dist/css'))
 }
 //升級(jí)：自動(dòng)監(jiān)聽(tīng)文件的改變，
 //創(chuàng)建監(jiān)聽(tīng)js文件的方法
 function autoCss(){
    // 創(chuàng)建監(jiān)聽(tīng)對(duì)象
    var watcher = gulp.watch("css/*.css");
    //分別監(jiān)聽(tīng) change,add,unlink事件
    watcher.on("change",function(path,stats){
        console.log(`${path} has been changed!`);
    });
    watcher.on("add",function(path,stats){
        console.log(`${path} has been add!`);
    });
    watcher.on("unlink",function(path,stats){
        console.log(`${path} has been unlink!`);
    })
 }
 //將定義好的壓縮方法暴露給外界，并作為gulp的默認(rèn)值
 // exports.default = gulp.series(css,autoCss);
 exports.autoCss = gulp.parallel(css,autoCss);

5. 運(yùn)行文件

 gulp autoCss

完整項(xiàng)目目錄：gulp-demo(壓縮CSS)
注意：所有的項(xiàng)目，下載之后先在項(xiàng)目根目錄要運(yùn)行 npm i命令安裝模塊

四. 壓縮圖片

方法同上壓縮js 和CSS文件，以下給出壓縮圖片的依賴(lài)模塊，以及示例代碼

依賴(lài)模塊： gulp ，gulp-imagemin

代碼示例：

 //獲取gulp對(duì)象
 const gulp = require("gulp")
 //獲取壓縮 圖片文件的對(duì)象
 const imagemin = require("gulp-imagemin")
 // 定義壓縮文件的處理方法
 function images(){
     //1. 匹配要所有壓縮的圖片文件
     gulp.src('imgs/*.*')
     //2. 壓縮文件
    .pipe(imagemin({
         progressive: true
    }))
     //3. 將壓縮后的文件寫(xiě)入指定目錄
    .pipe(gulp.dest('dist/imgs'))
 }
 //升級(jí)：自動(dòng)監(jiān)聽(tīng)文件的改變，
 //創(chuàng)建監(jiān)聽(tīng)圖片文件的方法
 function autoImages(){
     // 創(chuàng)建監(jiān)聽(tīng)對(duì)象
     var watcher = gulp.watch("imgs/*.*");
     //分別監(jiān)聽(tīng) change,add,unlink事件
     watcher.on("change",function(path,stats){
         console.log(`${path} has been changed!`);
    });
     watcher.on("add",function(path,stats){
         console.log(`${path} has been add!`);
    });
     watcher.on("unlink",function(path,stats){
         console.log(`${path} has been unlink!`);
    })
 }
 //將定義好的壓縮方法暴露給外界，并作為gulp的默認(rèn)值
 // exports.images = gulp.series(images,autoImages);
 exports.autoImages = gulp.parallel(images,autoImages);

完整項(xiàng)目目錄：gulp-demo(壓縮圖片)
注意：所有的項(xiàng)目，下載之后先在項(xiàng)目根目錄要運(yùn)行 npm i命令安裝模塊

五. 編譯Less文件

模塊： gulp，gulp-less

示例：

 //獲取gulp對(duì)象
 const gulp = require("gulp")
 //獲取壓縮 less文件的對(duì)象
 const gulpLess = require("gulp-less")
 // 定義壓縮文件的處理方法
 function less(){
     //1. 匹配要所有壓縮的less文件
     gulp.src('less/*.less')
     //2. 壓縮文件
    .pipe(gulpLess())
     //3. 將壓縮后的文件寫(xiě)入指定目錄
    .pipe(gulp.dest('dist/less'))
 }
 //升級(jí)：自動(dòng)監(jiān)聽(tīng)文件的改變，
 //創(chuàng)建監(jiān)聽(tīng)less文件的方法
 function autoLess(){
     // 創(chuàng)建監(jiān)聽(tīng)對(duì)象
     var watcher = gulp.watch("less/*.less");
     //分別監(jiān)聽(tīng) change,add,unlink事件
     watcher.on("change",function(path,stats){
         console.log(`${path} has been changed!`);
    });
     watcher.on("add",function(path,stats){
         console.log(`${path} has been add!`);
    });
     watcher.on("unlink",function(path,stats){
         console.log(`${path} has been unlink!`);
    })
 }
 //將定義好的壓縮方法暴露給外界，并作為gulp的默認(rèn)值
 // exports.images = gulp.series(less,autoLess);
 exports.autoLess = gulp.parallel(less,autoLess);

完整項(xiàng)目目錄：gulp-demo(編譯less)
注意：所有的項(xiàng)目，下載之后先在項(xiàng)目根目錄要運(yùn)行 npm i命令安裝模塊

六. 編譯Sass文件

模塊： gulp，gulp-sass

示例：

 //獲取gulp對(duì)象
 const gulp = require("gulp")
 //獲取壓縮 sass文件的對(duì)象
 const gulpSass = require("gulp-sass")
 // 定義壓縮文件的處理方法
 function sass(){
     //1. 匹配要所有壓縮的sass文件
     gulp.src('sass/*.scss')
     //2. 壓縮文件
    .pipe(gulpSass())
     //3. 將壓縮后的文件寫(xiě)入指定目錄
    .pipe(gulp.dest('dist/sass'))
 }
 //升級(jí)：自動(dòng)監(jiān)聽(tīng)文件的改變，
 //創(chuàng)建監(jiān)聽(tīng)sass文件的方法
 function autoSass(){
     // 創(chuàng)建監(jiān)聽(tīng)對(duì)象
     var watcher = gulp.watch("sass/*.scss");
     //分別監(jiān)聽(tīng) change,add,unlink事件
     watcher.on("change",function(path,stats){
         console.log(`${path} has been changed!`);
    });
     watcher.on("add",function(path,stats){
         console.log(`${path} has been add!`);
    });
     watcher.on("unlink",function(path,stats){
         console.log(`${path} has been unlink!`);
    });
     watcher.on("error",function(error){
         console.log(error);
    })
 }
 //將定義好的壓縮方法暴露給外界，并作為gulp的默認(rèn)值
 // exports.images = gulp.series(images,autoImages);
 exports.autoSass = gulp.parallel(sass,autoSass);

完整項(xiàng)目目錄：gulp-demo(編譯sass)

注意：所有的項(xiàng)目，下載之后先在項(xiàng)目根目錄要運(yùn)行 npm i命令安裝模塊

以上就是前端必會(huì)的輕量打包工具gulp使用詳解的詳細(xì)內(nèi)容，更多關(guān)于前端輕量打包工具gulp的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: