- A+
所属分类：Web前端
最近在开发几个网站，为了优化一下前端代码，就复习一下gulpjs，之前工作gulp用的版本比较老，但是今天看了新的版本，新的语法出了一下，但是为了时间，我决定使用之前gulp3的旧版本，后面发现自己环境的node的版本是最新的，所以不得让我来了解一下gulp的新版本，里面用到的最多就是commonjs的模块化，解释如下：
gulp4的官网地址： https://www.gulpjs.com.cn/
gulp3的官网地址： https://v3.gulpjs.com.cn/
下面代码了解新语法：
const { src, dest, watch, task, series, parallel } = require('gulp');//gulp的文件流API const rename = require('gulp-rename');//文件重命名的插件 const uglify = require('gulp-uglify');//压缩JS文件的插件 const cleanCss = require('gulp-clean-css');//压缩CSS文件的插件 const connect = require('gulp-connect');//热更新的插件 const webserver = require('gulp-webserver');//热更新的插件 const clean = require('gulp-clean');//删除文件的插件 const fileInclude = require('gulp-file-include'); //公共代码复用的插件 const htmlmin = require('gulp-htmlmin');//压缩HTML文件的插件 //设置源文件和输出文件的目录配置 const path = { 'html' : './src/', 'css' : './src/css/', 'js' : './src/js/', 'lib' : './src/lib/', 'component' : './src/component/', 'html_dist' : './dist/', 'css_dist' : './dist/css/', 'js_dist' : './dist/js/', 'lib_dist' : './dist/lib/', 'component_dist' : './dist/component/' }; //设置HTML压缩任务 task('html', function () { var options = { removeComments : true, //清除HTML中的注释 collapseWhitespace : true, //去除HTML中的空格 collapseBooleanAttributes : true, //省略布尔属性的值<input type="checkbox" checked="true"> 压缩后为 <input type="checkbox" checked> removeEmptyAttributes : true, //删除所有空格作属性值<input type="checkbox" id=""> 压缩后为 <input type="checkbox"> removeScriptTypeAttributes : true, //删除<script>的type="text/javascript" removeStyleLinkTypeAttributes : true, //删除<style>和<link>的type="text/css" minifyJS : true, //压缩页面JS minifyCSS : true //压缩页面CSS }; return src(path.html + '*.html') .pipe(htmlmin(options)) .pipe(dest(path.html_dist)); }) //设置CSS压缩任务 task('css', function () { return src(path.css + '*.css') .pipe(cleanCss()) .pipe(rename({ 'suffix' : '.min'//添加后缀名 })) .pipe(dest(path.css_dist)); }); //设置JS压缩任务 task('js', function () { return src(path.js + '*.js') .pipe(uglify()) .pipe(rename({ 'suffix' : '.min'//添加后缀名 })) .pipe(dest(path.js_dist)); }); //设置第三方依赖任务 => [无需合并和压缩等操作，直接输出到指定目录] task('lib', function () { return src(path.lib + '*.js') .pipe(dest(path.lib_dist)); }) //设置公共代码复用的任务 => [相当于组件的封装] task('fileInclude', function () { return src(path.component + '*.html') .pipe(fileInclude({ prefix : '@@', basepath : '@file' })) .pipe(dest(path.component_dist)); }); //设置删除上一次创建的dist文件夹的任务 => [在打包之前，一般需要先清空原来的文件，保证当前文件是最新的] task('clean', function () { return src('dist', { allowEmpty : true }).pipe(clean());//清除dist目录 }); // 创建热加载任务 task('reload', function () { return src('dist') .pipe(connect.reload()); }) //设置实时监控任务[热加载] task('watch', function () { watch(path.html, series('html', 'reload'));//监控HTML任务 watch(path.css + '*.css', series('css', 'reload'));//监控CSS任务 watch(path.js + '*.js', series('js', 'reload'));//监控JS任务 watch(path.lib + '*.js', series('lib', 'reload'));//监控第三方JS任务 watch(path.component + '*.html', series('fileInclude', 'reload'));//监控复用代码文件的任务 => [相当于封装组件] }); //设置后台服务任务【 ----- ⭐ ️方式一 ️ ----- 】 // task('server', function (done) { // connect.server({ // root : 'dist',//设置后台服务访问的默认目录 // port : 8888,//设置后台默认的访问端口 // livereload : true//开启热加载 // }); // done();//执行该服务 // }); //设置后台服务任务【 ----- ⭐ ️方式二 ️ ----- 】 task('server', function () { return src('dist') .pipe(webserver({ host : 'localhost',//默认访问的地址【域名或者ip】 port : 8023,//默认访问的端口号 path : '/',//访问当前访问目录的根目录 例如：表示为 dist/ livereload : true,//开启热加载 directoryListing : false,//true 设置为false时，访问默认的index.html fallback : 'index.html',//默认访问的入口文件 相对于设置的path路径来说 open : true,//是否自动打开浏览器 /** *@desc 代理配置 如下: * proxies: [ * { * source: '/api', target: 'http://backend.api/api' * * } * ] */ proxies : []//代理配置 })); }) //执行所有任务 => [gulp3] // task('default', series( // 'clean',//删除上一次的文件夹，来保持当前为最新的数据 // parallel([ 'html', 'css', 'js', 'lib', 'fileInclude' ]),//并行执行所有任务 // 'server',//启动服务任务 // 'watch'//启动监视任务 // )); //执行所有任务 => [gulp4] module.exports.default = series( 'clean', parallel([ 'html', 'css', 'js', 'lib', 'fileInclude' ]), 'server', 'watch' ); /** * @desc 总结 gulp4 的series() 和 parallel() 两个新方法 * 说明如下： * 1. series(任务1,任务2,...) => 使任务按顺序执行，第一个任务完成，才会执行下一个任务，简单来说相当于一个队列。 * 2. parallel(任务1,任务2,...) => 以最大并发来运行的任务,任务同时执行。 * * @desc 总结 gulp-connect() 和 gulp-webserver() 方法 * 说明如下： * 1. gulp-connect() => 内部connect.server()返回的是一个对象， * 所以不能直接返回，只能在处理完成之后，直接返回当前传入的参数，该参数为该函数本身。 * 2. gulp-webserver() => 该插件的特点是可以设置代理，当前处理的管道函数最后直接返回就好了，但是反应相对比较慢 * * @desc 总结 gulp3【本章任务的处理方式哦】 和 gulp4 处理任务的方式： * 1. gulp3 处理任务方式是：gulp.task(任务名，处理函数) * 2. gulp4 处理任务方式是：module.exports.任务名 = 任务名（可以是一个匿名函数或者是函数名） * 写法如下： * const test = function(done) { * done(); * }; * 或者 * function test(done) { * done(); * } * 最后执行方法：module.exports.test = test * 后台执行命令为：gulp test */
