快捷導(dǎo)航

gulp模塊使用方法示例詳解

更新時(shí)間：2022年09月29日 09:08:37 作者：河北小寶

這篇文章主要為大家介紹了gulp模塊使用方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

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í)行的是下面的代碼，而不是整個(gè)文件

使用gulp.task 建立任務(wù)

任務(wù)的名稱(chēng)

任務(wù)的回調(diào)函數(shù)

gulp.task('first', async () => {
    await console.log("人生中的第一個(gè)gulp任務(wù)執(zhí)行完畢");
    // 1.使用gulp.src獲取要處理的文件
    gulp.src('./src/css/style.css', {
            allowEmpty: true
        })
        // 通過(guò)pipe方法處理base.css文件
        // pipe方法里面寫(xiě)的是 如何處理代碼  
        .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語(yǔ)法轉(zhuǎn)換

抽取html文件中的公共代碼

gulp.task('cssmin', async () => {
    // 選擇css目錄下的less和css文件
    gulp.src(['./src/css/*.less', './src/css/*.css'])
        // 將less語(yǔ)法轉(zhuǎn)換為css語(yǔ)法
        .pipe(less())
        // 將css代碼進(jìn)行壓縮
        .pipe(csso())
        // 將處理的結(jié)果進(jìn)行輸出
        .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({
            // 可以判斷當(dāng)前代碼的運(yùn)行環(huán)境,將代碼轉(zhuǎn)換為當(dāng)前運(yùn)行環(huán)境所支持的代碼
            presets: ['@babel/env']
        }))
        // 把轉(zhuǎn)換的結(jié)果進(jìn)行壓縮
        .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"));
// 錯(cuò)誤代碼
// gulp.task('default', ["htmlmin", "jsmin", "cssmin", "copy"]);

以上就是gulp模塊使用方法示例詳解的詳細(xì)內(nèi)容，更多關(guān)于gulp模塊使用方法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: