gulp和webpack初探

jhhfft 发布于2019-08-19 18:40 / 770人阅读

摘要：首先声明一下，和两者关系不大，主要是团队之前一直用构建工具，这几天业务上比较清闲，老大让我学学新的和这些潮流工具，于是草草研究了一天，记一些笔记。最后使用将各个组件打包在一起。

首先声明一下，gulp和webpack两者关系不大，主要是团队之前一直用grunt构建工具，这几天业务上比较清闲，老大让我学学新的gulp和webpack这些“潮流”工具，于是草草研究了一天，记一些笔记。

gulp 真正“流程”化工具

我记得实习刚刚进公司看到grunt，还是有点蒙，之前一直是本地开发，游览器F5，没想到前端也需要“编译工具”。所以grunt一直给我的感觉是“编译工具”，你写的很多代码还不能直接“执行”，需要这一个工具去“编译”才能上线。它去自动化了很多东西，我之后也写过一个公司用的grunt插件，只需要配置，之后加入任务执行，很方便。但当我看到gulp的代码的时候（还没开始看文档，API），我突然意识到很多grunt“不自然”的设计，gulp真正的做到了清晰的流程化的构建。

gulp.task("default", function() {
  // 将你的默认的任务代码放在这
  gulp.src("client/*.js")
  .pipe(replace("bar", "foo"))
  .pipe(minify())
  .pipe(gulp.dest("build/"));
});

这是我仿照官网写的DEMO，对很多工程师来说pipe这个命名就很清晰了，它就是借鉴了unix的管道概念，前面文件输出给后面文件，这个也就是gulp对比grunt最大的改进，更加简单明了，据说这样也加快速度，还没有在实际项目中运用过，所以没有对比过。不管这种设计的确可以说是grunt的替代品了。
至于插件方面也不用担心，gulp的插件也很强大，基本上项目常用的都有。

webpack 万剑归宗

webpack也很火，它官网的图也介绍了它的作用，所有前端东西都打包成js文件。初学了它，我想它解决的问题就是现在的前端各种各样的“语言”，什么sass呀，coffeescript，还有框架模板，语法糖什么的，各有各的编译工具，而webpack的loader可以通杀，安装好相应的工具，它就可以统统的按你的想法打包在一起。
比如vue，就可以放在单文件里，在团队中做到组件开发，甚至各个人写不同的模板都行。最后使用webpack将各个组件打包在一起。
webpack的配置文件：

var path = require("path");

module.exports = {
    entry: "./static/entry.js", //演示单入口文件
    output: {
        path: path.join(__dirname, "out"),  //打包输出的路径
        filename: "bundle.js",              //打包后的名字
        publicPath: "./static/out/"                //html引用路径，在这里是本地地址。
    },
    // 新添加的module属性
    module: {
        loaders: [
      // 解析.vue文件
            { test: /.vue$/, loader: "vue" },
        // 转化ES6的语法
            { test: /.js$/, loader: "babel", exclude: /node_modules/ },
        // 编译css并自动添加css前缀
            { test: /.css$/, loader: "style!css!autoprefixer"},
        //.scss 文件想要编译，scss就需要这些东西！来编译处理
        //install css-loader style-loader sass-loader node-sass --save-dev
            { test: /.scss$/, loader: "style!css!sass?sourceMap"},
        // 图片转化，小于8K自动转化为base64的编码
            { test: /.(png|jpg|gif)$/, loader: "url-loader?limit=8192"},
        //html模板编译？
            { test: /.(html|tpl)$/, loader: "html-loader" },
        ]
    },
    // .vue的配置。需要多带带出来配置
    vue: {
        loaders: {
            css: "style!css!autoprefixer",
            html:"html-loader"
        }
    },
};

webpack可能对于单页应用的开发和管理很有帮助，对于简单的html的开发，gulp就已经绰绰有余了。

私有云云服务器 gulp gulp4 初探webrtc gulp 上传cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79858.html

webpack再看一遍

摘要：在终端中使用可以自动创建这个文件输入这个命令后，终端会问你一系列问题。百度后发现引入了模式，有三个状态，开发模式生产模式无。什么是webpack，为什么要使用webapck * 导语之前一直忙着项目，没时间整理自己的东西，最近刚好发现自己对webpack又如此陌生了，于是整理了一篇关于webpack初探的干货，这里是一点简单的webpack配置为什么使用webpck 现今很多网页...

whinc 2019-08-23 14:09 评论0 收藏0
【提高系列】webpack相关知识

摘要：基本配置项基本配置项。的插件架构主要基于实现的，这个就是专注于事件的广播和操作。开启多进程，加快打包速度。这次我们主要研究的是webpack框架的相关知识，webpack是一个打包构建的前端框架，用于解决前端开发的模块化问题。应用场景和纵向比较说到webpack，肯定你还会想到gulp和grunt这些框架，那么webpack是做什么的呢？他和其他的框架有什么区别呢？我们一起来分析...

DirtyMind 2019-08-22 15:18 评论0 收藏0
flint简单初体验

摘要：它能够使得在不刷新浏览器的情况下，更改本地的前端代码组件，浏览器自动更新预览。直接集成了这项技术，而且建立了专门的通道进行错误的实时反馈。命令行提供了三个主要的命令，。服务器关于服务器，其实是内部起了一个基于的服务器，外加进行消息的通讯。跟着初探了下flintjs，的确会很棒，超级热更新！学习地址： http://frontenddev.org/link/ali-11-11-...

Batkid 2019-08-19 17:13 评论0 收藏0
Javascript五十问——从源头细说Webpack与Gulp

摘要：前言与是目前圈子内比较活跃的前端构建工具。对于初学者来说，对这二者往往容易认识不清，今天，就从事件的源头，说清楚与。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。打包后形成的文件出口。前言：Webpack 与 gulp是目前圈子内比较活跃的前端构建工具。网上有很多二者比较的文章，面试中也会经常遇到gulp，Webpack的区别这样的问题。对于初学者来说，对这二...

lwx12525 2019-08-23 14:47 评论0 收藏0