前端构建之谈:Gulp3升级到Gulp4?
Posted 成都有娃儿
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端构建之谈:Gulp3升级到Gulp4?相关的知识,希望对你有一定的参考价值。
function minHeaderCss() {
// 这是一个回调函数的返回对象,本身也是异步的
return src([
'./static/css/header.css',
'./static/css/boot.css',
'./static/css/wrap.css',
'./static/css/feedback.css',
'./static/css/pronemove.css'
])
.pipe(minCss())
.pipe(concat('main_header.min.css'))
.pipe(dest('./static/css/min/'));
}
const { series, parallel } = require('gulp');
const { series, parallel } = require('gulp');
function javascript(cb) {
// body omitted
cb();
}
function css(cb) {
// body omitted
cb();
}
exports.build = series(javascript, css);
exports.buildParallel = parallel(javascript, css)
gulp build
const {src, dest, watch, series, parallel, connect} = require('gulp');
const babel=require('gulp-babel');
const revAll = require('gulp-rev-all');
const cssver = require('gulp-make-css-url-version');
const del = require('del');
const htmlmin = require('gulp-htmlmin');
// 可以使用ES6 => 语法来编写任务
const babelCss = () => src(['./css/**/*.css'])
.pipe(cssver())
.pipe(cleancss({compatibility: 'ie7', format: 'keep-breaks', keepSpecialComments :'*'}))
.pipe(dest('./dist/css/'))
.pipe(connect.reload());
function babelJs() {
return src(['./js/**/*.js'])
.pipe(babel({presets: ['@babel/env']}))
.pipe(uglify({
mangle:true,
compress:true})
.pipe(dest('./dist/js/'))
.pipe(revAll.manifestFile())
.pipe(dest('./dist/rev/'));
}
function clean() {
return del('./dist');
}
function babelHtml() {
return src(['./app/tpl/*.html'])
.pipe(htmlmin({
removeComments: true,
collapseWhitespace: true
}))
.pipe(dest('./dist/html/'));
}
// 嵌套使用series和parallel
export.build = exports.build = series(clean,parallel(babelJs, babelCss),babelHtml);
以上是关于前端构建之谈:Gulp3升级到Gulp4?的主要内容,如果未能解决你的问题,请参考以下文章
Gulp 3 到 Gulp 4:如何观看 scss 并将其缩小/编译成 css?