gulp模塊使用方法示例詳解
更新時間:2022年09月29日 09:08:37 作者:河北小寶
這篇文章主要為大家介紹了gulp模塊使用方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
正文
const gulp = require('gulp'); // 引用插件 const htmlmin = require('gulp-htmlmin'); const fileinclude = require('gulp-file-include'); const less = require('gulp-less'); const csso = require('gulp-csso'); const babel = require('gulp-babel'); const uglify = require('gulp-uglify');
// 執(zhí)行的是下面的代碼,而不是整個文件
使用gulp.task 建立任務(wù)
任務(wù)的名稱
任務(wù)的回調(diào)函數(shù)
gulp.task('first', async () => { await console.log("人生中的第一個gulp任務(wù)執(zhí)行完畢"); // 1.使用gulp.src獲取要處理的文件 gulp.src('./src/css/style.css', { allowEmpty: true }) // 通過pipe方法處理base.css文件 // pipe方法里面寫的是 如何處理代碼 .pipe(gulp.dest('dist/css')); // 讓base.css在dist/css文件夾中輸出 });
html任務(wù)
html文件中的代碼壓縮操作
抽取html文件的公共代碼
gulp.task('htmlmin', async () => { gulp.src('./src/*.html', { allowEmpty: true }) .pipe(fileinclude()) .pipe(htmlmin({ collapseWhitespace: true })) .pipe(gulp.dest('./dist')); });
css任務(wù)
less語法轉(zhuǎn)換
抽取html文件中的公共代碼
gulp.task('cssmin', async () => { // 選擇css目錄下的less和css文件 gulp.src(['./src/css/*.less', './src/css/*.css']) // 將less語法轉(zhuǎn)換為css語法 .pipe(less()) // 將css代碼進行壓縮 .pipe(csso()) // 將處理的結(jié)果進行輸出 .pipe(gulp.dest('dist/css')); })
js任務(wù)
es6代碼轉(zhuǎn)化
代碼壓縮
gulp.task('jsmin', async () => { gulp.src('./src/js/*.js') // 將es5代碼轉(zhuǎn)換為es6代碼 .pipe(babel({ // 可以判斷當前代碼的運行環(huán)境,將代碼轉(zhuǎn)換為當前運行環(huán)境所支持的代碼 presets: ['@babel/env'] })) // 把轉(zhuǎn)換的結(jié)果進行壓縮 .pipe(uglify()) .pipe(gulp.dest('dist/js')) })
其余文件夾及其余文件
// 復(fù)制文件夾 gulp.task('copy', async () => { gulp.src('./src/img.*') .pipe(gulp.dest('dist/img')); gulp.src('./src/*.md') .pipe(gulp.dest('dist')); });
一次性執(zhí)行以上全部功能
// 構(gòu)建任務(wù) gulp.task('default', gulp.series("htmlmin", "jsmin", "cssmin", "copy")); // 錯誤代碼 // gulp.task('default', ["htmlmin", "jsmin", "cssmin", "copy"]);
以上就是gulp模塊使用方法示例詳解的詳細內(nèi)容,更多關(guān)于gulp模塊使用方法的資料請關(guān)注腳本之家其它相關(guān)文章!