gulp模块使用方法示例详解_vue.js_

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'); 

gulp.task('first', async () => { await console.log("人生中的第一个gulp任务执行完毕"); // 1.使用gulp.src获取要处理的文件 gulp.src('./src/css/style.css', { allowEmpty: true }) // 通过pipe方法处理base.css文件 // pipe方法里面写的是 如何处理代码 .pipe(gulp.dest('dist/css')); // 让base.css在dist/css文件夹中输出 }); 

gulp.task('htmlmin', async () => { gulp.src('./src/*.html', { allowEmpty: true }) .pipe(fileinclude()) .pipe(htmlmin({ collapseWhitespace: true })) .pipe(gulp.dest('./dist')); }); 

gulp.task('cssmin', async () => { // 选择css目录下的less和css文件 gulp.src(['./src/css/*.less', './src/css/*.css']) // 将less语法转换为css语法 .pipe(less()) // 将css代码进行压缩 .pipe(csso()) // 将处理的结果进行输出 .pipe(gulp.dest('dist/css')); }) 

gulp.task('jsmin', async () => { gulp.src('./src/js/*.js') // 将es5代码转换为es6代码 .pipe(babel({ // 可以判断当前代码的运行环境,将代码转换为当前运行环境所支持的代码 presets: ['@babel/env'] })) // 把转换的结果进行压缩 .pipe(uglify()) .pipe(gulp.dest('dist/js')) }) 

// 复制文件夹 gulp.task('copy', async () => { gulp.src('./src/img.*') .pipe(gulp.dest('dist/img')); gulp.src('./src/*.md') .pipe(gulp.dest('dist')); }); 

// 构建任务 gulp.task('default', gulp.series("htmlmin", "jsmin", "cssmin", "copy")); // 错误代码 // gulp.task('default', ["htmlmin", "jsmin", "cssmin", "copy"]);