溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下前端的輕量打包工具gulp如何使用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
gulp 是基于 node 實現 Web 前端自動化開發的工具，利用它能夠極大的提高開發效率。
在 Web 前端開發工作中有很多“重復工作”，比如壓縮CSS/JS文件。而這些工作都是有規律的。找到這些規律，并編寫 gulp 配置代碼,讓 gulp 自動執行這些“重復工作”。
安裝node： 由于gulp是基于node實現的，所以要先安裝node
node安裝
安裝gulp
npm install -g gulp
安裝
gulp -v
查看版本
壓縮js文件可以降低js文件的大小，提高頁面打開速度。
找到要壓縮的所有的js文件，壓縮它們，將壓縮后的文件放在 dist/js/目錄下
1. 創建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. 在項目根目錄創建js文件夾并且創建需要測試的js文件
5. 在命令行輸入如下命令運行
由于我們導入的為 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'))
}
//創建監聽js文件的方法
function autoScript(){
// 創建監聽對象
var watcher = gulp.watch("js/*.js");
//分別監聽 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的默認值
// exports.script = gulp.series(script,autoScript);
exports.autoScript = gulp.parallel(script,autoScript);運行
gulp autoScript
7. 使用 exports.default 定義默認任務
//如上所示，我們使用 export script 和 export autoScript命令執行任務 //可以通過 exports.default 關鍵字指定默認任務 exports.default = gulp.parallel(script,autoScript);
設置完成之后，在命令行輸入 gulp即可啟動任務
gulp
完整項目目錄：gulp-demo(壓縮js)
注意：所有的項目，下載之后先在項目根目錄要運行 npm i命令安裝模塊
CSS文件壓縮過程類似于Js文件，這里做簡單介紹
1.創建gulpfile.js文件
2. 安裝壓縮CSS文件需要用到的模塊
npm i gulp gulp-minify-css -D
3. 在項目根目錄創建CSS文件夾，在CSS文件夾下面創建要測試的CSS文件
4. 編寫壓縮代碼，到處任務調用
//獲取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'))
}
//升級：自動監聽文件的改變，
//創建監聽js文件的方法
function autoCss(){
// 創建監聽對象
var watcher = gulp.watch("css/*.css");
//分別監聽 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的默認值
// exports.default = gulp.series(css,autoCss);
exports.autoCss = gulp.parallel(css,autoCss);5. 運行文件
gulp autoCss
完整項目目錄：gulp-demo(壓縮CSS)
注意：所有的項目，下載之后先在項目根目錄要運行 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'))
}
//升級：自動監聽文件的改變，
//創建監聽圖片文件的方法
function autoImages(){
// 創建監聽對象
var watcher = gulp.watch("imgs/*.*");
//分別監聽 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的默認值
// exports.images = gulp.series(images,autoImages);
exports.autoImages = gulp.parallel(images,autoImages);完整項目目錄：gulp-demo(壓縮圖片)
注意：所有的項目，下載之后先在項目根目錄要運行 npm i命令安裝模塊
模塊： 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'))
}
//升級：自動監聽文件的改變，
//創建監聽less文件的方法
function autoLess(){
// 創建監聽對象
var watcher = gulp.watch("less/*.less");
//分別監聽 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的默認值
// exports.images = gulp.series(less,autoLess);
exports.autoLess = gulp.parallel(less,autoLess);完整項目目錄：gulp-demo(編譯less)
注意：所有的項目，下載之后先在項目根目錄要運行 npm i命令安裝模塊
模塊： 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'))
}
//升級：自動監聽文件的改變，
//創建監聽sass文件的方法
function autoSass(){
// 創建監聽對象
var watcher = gulp.watch("sass/*.scss");
//分別監聽 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的默認值
// exports.images = gulp.series(images,autoImages);
exports.autoSass = gulp.parallel(sass,autoSass);完整項目目錄：gulp-demo(編譯sass)
注意：所有的項目，下載之后先在項目根目錄要運行 npm i命令安裝模塊
以上就是“前端的輕量打包工具gulp如何使用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
