一、Gulp任务完整组合写法介绍

我们把less文件编译，CSS代码压缩，JS代码压缩，文件重命名，图片压缩，目录删除的任务都创建好了，那么如果我们一个一个单个去进行执行任务命令，太麻烦了，需要写很多条命令，那么我们可以通过组合写法，把这些多个任务名写在一起，存到常量中，常量是存储数据的容器，我们执行常量名即可实现多条

const {src,dest,parallel,series} = require('gulp')
const less = require('gulp-less')
const cleancss = require('gulp-clean-css')
const rename = require('gulp-rename')
const autoprefixer = require('gulp-autoprefixer')
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
const htmlmin = require('gulp-htmlmin')
const imagemin = require('gulp-imagemin')
//声明样式构建任务
const style = () => {//.pipe可以写多个，但是要注意书写顺序哦 滴~return src('src/styles/main.less',{ base: 'src'}).pipe(less()).pipe(autoprefixer()).pipe(cleancss()).pipe(rename({ 'extname': '.min.css'})).pipe(dest('dist'))
}
//声明脚本构建任务
const script = () => {return src('src/scripts/main.js').pipe(babel({presets: ['babel-preset-env']})).pipe(uglify()).pipe(rename({ 'extname': '.min.js'})).pipe(dest('dist/scripts'))
}
//声明页面构建任务
const html = () => {return src('./index.html').pipe(htmlmin({collapseWhitespace: true,minifyCSS: true,minifyJS: true})).pipe(dest('dist'))
}
//声明图片文件构建任务
const image = () => {return src('src/images/**',{ base:'src' }).pipe(imagemin([imagemin.mozjpeg({quality: 75, progressive: true})])).pipe(dest('dist'))
}
const del = require('del')
//声明删除目录和文件构建任务
const dele = () => {return del(['dist'])
}//任务组合写法，并行（一起执行）
const bulid = parallel(style,script,html,image)
//任务组合写法，串行（一个接一个的执行）
const dev = series(dele,bulid)
//导出
module.exports = {bulid,dev
}

（38）Gulp任务完整组合写法相关推荐

（35）Gulp 构建任务组合
一.Gulp构建任务组合就是前面我们学习的Gulp构建样式文件,构建脚本文件,构建HTML页面文件,每构建一种文件都需要敲写一条命令,那么这样的话,我们就需要写3个命令执行,是不是还是觉得有些麻烦? ...
R语言生成组合图并保存实战：实际上只保存了最后一个图问题、ggsave生成组合图并保存（保存完整组合图）
R语言生成组合图并保存实战:实际上只保存了最后一个图问题.ggsave生成组合图并保存(保存完整组合图) 目录
background 组合写法_简单学习css组合与CSS嵌套的写法
简单学习css组合与CSS嵌套的写法互联网发布时间:2009-04-02 19:38:24 作者:佚名我要评论网页制作Webjx文章简介:简单学习css组合与CSS嵌套的写法. C ...
LeetCode 38外观数列39组合总和
维护公众号:bigsai 回复bigsai分享一些学习资源! 本周上篇 LeetCode 36有效的数独&37解数独(八皇后问题) 外观数列给定一个正整数 n(1 ≤ n ≤ 30),输出外 ...
前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】
python 抛出异常的完整写法
抛出异常的完整个写法: try:# 尝试执行的代码pass except Exception [错误类型]:# 针对错误类型的处理 1 如果你知道会发生什么异常的话pass except Except ...
Leetcode 40组合总数(回溯)Ⅱ41缺失的第一个正数42接雨水
维护公众号:bigsai ,回复进群加入打卡,回复bigsai分享一些学习资源! 上周第一次 LeetCode 36有效的数独&37解数独(八皇后问题) 上周第二次 LeetCode 38外观 ...
(39) gulp开发服务器
一.Gulp构建任务流程图将dist目标目录文件发布到浏览器上. 三.Gulp开发服务器所需要的插件 https://browsersync.io/插件官网:https://browsersync. ...
（37）Gulp 文件清除
一.Gulp文件清除介绍 Gulp文件清除可以将有内容的文件夹清除掉,之前我们清除文件夹的时候,只能够先把文件夹当中的文件先删除,成为一个空目录,我们才能进行删除,通过学习Gulp我们可以直接将有内容 ...

（38）Gulp任务完整组合写法

一、Gulp任务完整组合写法介绍

（38）Gulp任务完整组合写法相关推荐

最新文章

热门文章