本文样例代码 ：https://github.com/demohi/learning-gulp

本文主要简单介绍一下基于gulp和webpack的前端工程化。

技术栈

  • React.js
  • reFlux
  • Node.js

我们的需求

  • 基于CommonJS模块化开发
  • 基于React.js的组件化开发(JSX)
  • 为保证组件的复用，css需要打包到js中
  • 有国际化需求，静态文件需要部署在CDN上面

工程化工具的选择

  • gulp(基于stream的构建工具，与grunt相比，速度快且可编程)
  • webpack(前端文件打包工具，支持CommonJS、JSX、css等多种文件混合)

工程化流程

开发模式

开发模式比较简单，主要就是监听文件变化，自动进行打包、合并的操作。

生产模式

参考我们的技术栈与需求，我们的静态文件都要发布到cdn上，而且必须有md5版本号，方便快速发布(cdn更新极其缓慢，所以更新必须使用新的文件名)

生产模式主要增加了文件压缩、文件md5名修改、上传cdn、替换html等操作

这样的好处就是上线非常方便，一个命令即可更新线上，而且不存在缓存问题。

代码参考

基于上述流程写了个demo，供大家参考learning-gulp

可优化的点

  • 等gulp4发布，可以直接基于gulp来做串行任务
  • 增加livereload,不要再刷新
  • 使用react-hot-loader，不刷新实时替换修改

[转]基于gulp和webpack的前端工程化的更多相关文章

  1. 基于webpack的前端工程化开发解决方案探索（一）：动态生成HTML（转）

    1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...

  2. 基于webpack的前端工程化开发解决方案探索（二）：代码分割与图片加载

    今天我们继续来进行webpack工程化开发的探索! 首先来验证上一篇文章   基于webpack的前端工程化开发解决方案探索(一):动态生成HTML  中的遗留问题:webpack将如何处理按需加载的 ...

  3. 阿里云无线&前端团队是如何基于webpack实现前端工程化的

    背景 前端经历了初期的野蛮生长(切图,写简单的特效)——为了兼容浏览器兼容性而出现的各种类库(JQUERY,YUI等——mv*(饱暖思淫欲,代码多了,也就想到怎样组织代码结构,backbone,ang ...

  4. 基于webpack的前端工程化开发解决方案探索（三）：webpack-dev-server

    前两篇中我们使用webpack完成了静态资源(css/js/img)等自动写入HTML模板中,同时还可以为静态资源添加hash版本号,既满足了我们对于静态资源的打包要求,同时又无需开发人员介入打包过程 ...

  5. webpack + react 前端工程化实践和暂不极致优化

    技术结构 webpack + react + react-router 功能实现 关于打包 1.基于react-router的自定义打包code split.2.分包异步按需加载.3.CommonsC ...

  6. 【前端自动化构建 grunt、gulp、webpack】

    参考资料: 用自动化构建工具增强你的工作流程!:http://www.gulpjs.com.cn/ gulp详细入门教程:http://www.ydcss.com/ JavaScript构建(编绎)系 ...

  7. 前端开发自动化工作流工具，JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  8. 前端工程化（二）---webpack配置

    导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...

  9. 使用webpack+vue.js构建前端工程化

    参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...

随机推荐

  1. NYOJ题目96 n-1位数

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAscAAAJgCAIAAADpjVkvAAAgAElEQVR4nO3du04jS/gv7H0T5FwIsa ...

  2. cutpFTP设置步骤

    cutpFTP设置步骤 平常时为了方便两台电脑之间传送数据,我们可以使用cutpftp这个工具实现,而且cutpftp还具有定时传送的功能,非常方便使用.以下是使用该工具的“同步文件夹”功能同步两台电 ...

  3. Nginx详解（一）

    1.Nginx是什么? Nginx就是反向代理服务器. 首先我们先来看看什么是代理服务器,代理服务器一般是指局域网内部的机器通过代理服务发送请求到互联网上的服务器,代理服务器一般作用于客户端.比如Go ...

  4. ASP.NET Web Api 实现数据的分页（转载）

    转载地址:http://www.cnblogs.com/fzrain/p/3542608.html 前言 这篇文章我们将使用不同的方式实现手动分页(关于高端大气上档次的OData本文暂不涉及,但有可能 ...

  5. Delphi字符串的基本操作与常用函数

    参考:http://www.cnblogs.com/pchmonster/archive/2011/12/16/2290034.html 结合这个博客一起学习:http://www.cnblogs.c ...

  6. WCF学习笔记之消息交换模式

    在WCF通信中,有三种消息交换模式,OneWay(单向模式), Request/Reponse(请求回复模式), Duplex(双工通信模式)这三种通信方式.下面对这三种消息交换模式进行讲解. 1. ...

  7. PMP 第六章 项目时间管理

    定义活动 排列活动顺序 估算活动资源 估算活动持续时间 制定进度计划 控制进度计划 1.进度管理计划和进度计划的内容分别是什么,有什么区别? 进度计划:项目各活动计划完成日期的编排.    进度管理计 ...

  8. csc.rsp Invent by Microshaoft

    # This file contains command-line options that the C# # command line compiler (CSC) will process as ...

  9. barabasilab-networkScience学习笔记6-evolving networks

    第一次接触复杂性科学是在一本叫think complexity的书上,Allen博士很好的讲述了数据结构与复杂性科学,barabasi是一个知名的复杂性网络科学家,barabasilab则是他所主导的 ...

  10. web2py学习之getting start环境搭建

    一般如果做一个工程,可能需要ide,需要好的工具,web2py自包含了一个基于web的开发工具,但是并不算很好的编辑器 第二个可以使用的是pycharm,利用pycharm可以创建web2py的web ...