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

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

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

一. 安裝Node和gulp

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

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

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

安裝gulp

 npm install -g gulp

安裝

 gulp -v

查看版本

二.使用gulp壓縮Js

壓縮js文件可以降低js文件的大小，提高頁面打開速度。

2.1 方法

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

2.2 步驟

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

 npm init

2. 在項目根目錄新建一個gulpfile.js文件

gulp所有的配置都在這個文件里面

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

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

 npm i gulp gulp-uglify -D

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

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

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

 gulp script

6. 升級壓縮功能，每次文件修改之后，自動壓縮打包

 //獲取gulp對象
 const gulp = require("gulp")
 // 壓縮js文件的對象，使用之前需要安裝
 // 安裝方法：npm i gulp-uglify -D
 const uglify = require("gulp-uglify")
 // 定義壓縮文件的處理方法
 function script(){
     //1. 匹配要所有壓縮的js文件
     gulp.src('js/*.js')
     //2. 壓縮文件
    .pipe(uglify())
     //3. 將壓縮后的文件寫入指定目錄
    .pipe(gulp.dest('dist/js'))
 }
 //創(chuàng)建監(jiān)聽js文件的方法
 function autoScript(){
     // 創(chuàng)建監(jiān)聽對象
     var watcher = gulp.watch("js/*.js");
     //分別監(jiān)聽 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ù)
 //可以通過 exports.default 關(guān)鍵字指定默認(rèn)任務(wù)
 exports.default = gulp.parallel(script,autoScript);

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

 gulp

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

三. 壓縮CSS文件

CSS文件壓縮過程類似于Js文件，這里做簡單介紹

3.1 步驟

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

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

 npm i gulp gulp-minify-css -D

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

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

 //獲取gulp對象
 const gulp = require("gulp")
 //獲取壓縮 css文件的方法
 const minifyCss = require("gulp-minify-css")
 // 定義壓縮文件的處理方法
 function css(){
    //1. 匹配要所有壓縮的css文件
    gulp.src('css/*.css')
    //2. 壓縮文件
    .pipe(minifyCss())
    //3. 將壓縮后的文件寫入指定目錄
    .pipe(gulp.dest('dist/css'))
 }
 //升級：自動監(jiān)聽文件的改變，
 //創(chuàng)建監(jiān)聽js文件的方法
 function autoCss(){
    // 創(chuàng)建監(jiān)聽對象
    var watcher = gulp.watch("css/*.css");
    //分別監(jiān)聽 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

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

四. 壓縮圖片

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

依賴模塊： gulp ，gulp-imagemin

代碼示例：

 //獲取gulp對象
 const gulp = require("gulp")
 //獲取壓縮 圖片文件的對象
 const imagemin = require("gulp-imagemin")
 // 定義壓縮文件的處理方法
 function images(){
     //1. 匹配要所有壓縮的圖片文件
     gulp.src('imgs/*.*')
     //2. 壓縮文件
    .pipe(imagemin({
         progressive: true
    }))
     //3. 將壓縮后的文件寫入指定目錄
    .pipe(gulp.dest('dist/imgs'))
 }
 //升級：自動監(jiān)聽文件的改變，
 //創(chuàng)建監(jiān)聽圖片文件的方法
 function autoImages(){
     // 創(chuàng)建監(jiān)聽對象
     var watcher = gulp.watch("imgs/*.*");
     //分別監(jiān)聽 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);

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

五. 編譯Less文件

模塊： gulp，gulp-less

示例：

 //獲取gulp對象
 const gulp = require("gulp")
 //獲取壓縮 less文件的對象
 const gulpLess = require("gulp-less")
 // 定義壓縮文件的處理方法
 function less(){
     //1. 匹配要所有壓縮的less文件
     gulp.src('less/*.less')
     //2. 壓縮文件
    .pipe(gulpLess())
     //3. 將壓縮后的文件寫入指定目錄
    .pipe(gulp.dest('dist/less'))
 }
 //升級：自動監(jiān)聽文件的改變，
 //創(chuàng)建監(jiān)聽less文件的方法
 function autoLess(){
     // 創(chuàng)建監(jiān)聽對象
     var watcher = gulp.watch("less/*.less");
     //分別監(jiān)聽 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);

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

六. 編譯Sass文件

模塊： gulp，gulp-sass

示例：

 //獲取gulp對象
 const gulp = require("gulp")
 //獲取壓縮 sass文件的對象
 const gulpSass = require("gulp-sass")
 // 定義壓縮文件的處理方法
 function sass(){
     //1. 匹配要所有壓縮的sass文件
     gulp.src('sass/*.scss')
     //2. 壓縮文件
    .pipe(gulpSass())
     //3. 將壓縮后的文件寫入指定目錄
    .pipe(gulp.dest('dist/sass'))
 }
 //升級：自動監(jiān)聽文件的改變，
 //創(chuàng)建監(jiān)聽sass文件的方法
 function autoSass(){
     // 創(chuàng)建監(jiān)聽對象
     var watcher = gulp.watch("sass/*.scss");
     //分別監(jiān)聽 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);

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

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

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

您可能感興趣的文章: