详解 Gulp4 和 Gulp3 的区别

  • 详解 Gulp4 和 Gulp3 的区别已关闭评论
  • 68 次浏览
  • A+
所属分类:Web前端
摘要

最近在开发几个网站,为了优化一下前端代码,就复习一下gulpjs,之前工作gulp用的版本比较老,但是今天看了新的版本,新的语法出了一下,但是为了时间,我决定使用之前gulp3的旧版本,后面发现自己环境的node的版本是最新的,所以不得让我来了解一下gulp的新版本,里面用到的最多就是commonjs的模块化,解释如下:

最近在开发几个网站,为了优化一下前端代码,就复习一下gulpjs,之前工作gulp用的版本比较老,但是今天看了新的版本,新的语法出了一下,但是为了时间,我决定使用之前gulp3的旧版本,后面发现自己环境的node的版本是最新的,所以不得让我来了解一下gulp的新版本,里面用到的最多就是commonjs的模块化,解释如下:

gulp4的官网地址: https://www.gulpjs.com.cn/

gulp3的官网地址: https://v3.gulpjs.com.cn/

详解 Gulp4 和 Gulp3 的区别

 

 下面代码了解新语法:

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  */

详解 Gulp4 和 Gulp3 的区别