美文网首页
Gulp、Webpack 比较

Gulp、Webpack 比较

作者: 行走的蛋白质 | 来源:发表于2020-04-26 21:47 被阅读0次
  • gulp 强调的是前端开发的工作流程,我们可以通过配置一系列的task,定义 task 处理的事务(例如文件压缩合并、雪碧图、启动server、版本控制等),然后定义执行顺序,来让 gulp 执行这些 task,从而构建项目的整个前端开发流程。
  • webpack 是一个前端模块化方案,更侧重模块打包,我们可以把开发中的所有资源(图片、js文件、css文件等)都看成模块,通过 loader(加载器)和 plugins(插件)对资源进行处理,打包成符合生产环境部署的前端资源。
  • gulp严格上讲,模块化不是他强调的东西,他旨在规范前端开发流程。
    webpack更是明显强调模块化开发,而那些文件压缩合并、预处理等功能,不过是他附带的功能。

Gulp 介绍

gulp 是一个基于任务的工具。

  • gulp的每个功能都是一个任务,压缩css的任务、合并文件的任务等等

流程

  • 注册任务
    gulp.task(name[,deps],fn)
    name是任务名称,执行任务时,使用这个名称,fn是一个回掉函数,代表这个任务要做的事情
  • 读取文件
    gulp.src(globs[, options]) src方法主要是用来读取目标源文件,所以参数就是一个目标源文件的路径
  • 输出到文件
    gulp.dest(path[,options]) dest方法主要用来将数据输出到文件中,所以参数就是目标文件路径。
gulp.task("indexJs", function () {
    // js 路径
    gulp.src(paths.indexJs)
        // 功能函数
        .pipe(rename("index.js"))
     // 压缩 js 
        .pipe(uglify())
        .pipe(gulp.dest(releasePath + "/js"))
});

相关文章

  • Gulp、Webpack 比较

    gulp 强调的是前端开发的工作流程,我们可以通过配置一系列的task,定义 task 处理的事务(例如文件压缩合...

  • gulp与webpack的区别

    gulp webpack 相同功能: 功能 gulp webpack gulp.task('sass'...

  • gulp和webpack入门介绍

    前言 众所周知目前比较火的工具就是gulp和webpack,但webpack和gulp却有所不同,本人两者的底层研...

  • Webpack 和 gulp 的区别

    首先 gulp 和 browserify / webpack 不是一回事 gulp应该和grunt比较。它们的区别...

  • 对webpack和gulp的理解

    【简单理解】gulp和webpack的区别 Gulp和Webpack的基本区别: gulp可以进行js,html,...

  • gulp+webpack配置

    gulp+webpack配置 首先介绍一下gulp和webpack gulp gulp是前端开发过程中对代码进行构...

  • webpack-gulp 教程

    webpack-gulp

  • gulp的初级入门配置

    1.简介 前端的自动化构建工具,目前用的比较多的大概有webpack, grunt, gulp。 gulp,用自动...

  • Gulp & webpack 配置详解

    -- 1. Gulp VS webpack 比较 Gulp 是一个任务管理工具,让简单的任务更清晰,让复杂的任务易...

  • webpack总结

    安装webpack npm install -g webpack gulp --registry=http://r...

网友评论

      本文标题:Gulp、Webpack 比较

      本文链接:https://www.haomeiwen.com/subject/jccswhtx.html