有没有好的gulp+webpack的例子啊？求指教，分开来都是会用的，但是结合起来就有些懵。。
目前前端构建就差着一环了，但是苦于不会gulp和webpack的结合，希望大家给一些意见，之前都是做多人合并开发的，所以构建这部分还不太熟，现在要做一个自己的项目，所以这部分就有些困难，希望大家给一些意见，是gulp+webpack+react+es6的。
按时间排序
官网就有例子
前不久在公司分享了react技术栈。webpack作为初级编译工具，gulp作为最终编译工具，来定位比较好解释，webpack可以很方便引用node_module包，降级es6，样式注入等，作为最初级的功能定位性价比最高，webpack输入输出都以js为主，对html兼顾较少，可用组件不多很难达到可用的程度。依靠gulp丰富的组件可以很好地让js和html联动配置，控制webpack，实施高度自动化。
如果你想要和其它 gulp 插件，比如 gulp-sass 那样，配置，输入输出可以全都由 Gulp 控制的“整合”话，参见 webpack 文档（）所述的
这个包的 README 介绍。实际使用上，有个笨蛋之前写了个小程序同样的是 gulp+webpack+react+es6，即是用的 webpack-stream 与 gulp 协作，可参考一番 gulpfile 与项目结构
建议查看官方文档。目前我的做法是gulp针对webpack只是作为启动作用，gulp＋webpack配合处理打包。var shell = require('gulp-shell');
gulp.task('webpack', shell.task([
'webpack --config --process webpack.config.js'
gulp.task('webpackDev', shell.task([
'webpack --config webpack.dev.config.js'
已有帐号？
无法登录？
社交帐号登录gulp构建之mock data（模拟数据、转发请求） - 推酷
gulp构建之mock data（模拟数据、转发请求）
最近在使用gulp构建前端项目，这个基于node流并崇尚“编程而非配置”的工具立马让我爱上了它。因为之前使用公司的fekit，所以在使用gulp时就会想和fekit去比较，看看fekit的功能用gulp如何实现。fekit在前后端分离上做得非常好，基本能让前端开发人员脱离后端环境进行开发，其中很重要的一个功能就是接口数据的mock。简单地讲，就是转发ajax请求到本地的json（或mockjson）文件，这样我们在代码里写真实的url（而不是写一个本地的json文件地址），然后借由fekit转发到本地的json文件，这样就轻松实现了接口的mock。
在这次项目中，我同样有这样的需求，举个例子，我需要把
/api/orders
/mock/orders.json
，前一个是我实际请求后端的地址（一个restful接口），后一个是我本地的json文件。
在使用gulp的时候，有一个叫gulp-mock的模块，可惜它是把mockjson转化为json的，不能实现反向代理式的转发。另一个模块，proxy-middleware，可以实现反向代理，但就我使用来看，是目录级别的，比如配置/api/orders转发到/mock/orders.json，它会说
/mock/orders.json/
不是一个目录。
在几番折腾各种搜索外加中途放弃的情况下，我看了下gulp-webserver（我在gulp中使用的webserver模块）的源码，发现它开放了一个middleware，通过这个middleware我们可以拦截请求并处理（这个过程其实就是node http模块做的事情）。因为gulp-webserver的文档并没有介绍这个参数的使用，所以之前我虽然知道但并没有去尝试，后来阅读源码发现gulp-webserver使用的其实是
这个模块，而这个模块有关于middleware的使用说明。到这里，问题算是暂时性解决了。
gulpfile.js
gulp.task('webserver', function() {
gulp.src('./market')
.pipe(webserver({
livereload: true,
directoryListing: {
enable:true,
path: 'market'
port: 8000,
// 这里是关键！
middleware: function(req, res, next) {
var urlObj = url.parse(req.url, true),
method = req.
switch (urlObj.pathname) {
case '/api/orders':
var data = {
&status&: 0,
&errmsg&: &&,
&data&: [{}]
res.setHeader('Content-Type', 'application/json');
res.end(JSON.stringify(data));
case '/api/goods':
case '/api/images':
这里还只是简单的把返回的数据写在了gulpfile.js里，实际上我们也可以把数据放在文件里，然后require进来，此外我们也能通过method区分处理不同请求。
这个也许不是唯一的解决办法，但这次探索给了我不少启示，这也是我在前面写那么多“废话”的原因。作为一个成熟的开发人员，在遇到问题特别是通过搜索手段（包括询问他人、看github的issue等）仍难以获取有效信息的情况时，我们需要深入问题本身（比如看源码、探究实现原理），做探索问题的先驱者。
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
没有分页内容
图片无法显示
视频无法显示
与原文不一致离开qunar有一个多月了，在离开的时候就决定不再用fekit。做出这个决定并不是因为fekit不好，恰恰相反，fekit帮我们做了很多事情，还屏蔽了许多细节，让开发人员能够专注于开发过程。不过随着fekit的升级，也出现了一些问题，同时fekit和公司业务及发布流程有一定耦合，所以觉得采用开源的构建方案。
在使用gulp的过程中，基本也是依据使用fekit的思路来逐步完善构建过程的，所以还是要感谢fekit。现在进入正题，看看利用gulp如何实现本地服务、mock数据、css预处理、js模块化、打包压缩、版本号替换等功能的。
依赖模块：
gulp.task('webserver', function() {
gulp.src('./app')
.pipe(webserver({
livereload: true,
directoryListing: {
enable:true,
path: 'app'
host: '172.16.100.27',
port: 8000
app是你的项目目录，比如我的目录结果如下
开启directoryListing的enbale，访问根目录（172.16.100.27:8000）时才能显示目录或文件列表。
host可以是ip也可以是域名，不过在虚拟机里面调试时，用域名访问似乎有点问题，没有深究；如果要在手机上调试，同样建议用ip。
依赖模块：
使用：请参考之前的博文&
依赖模块：&&
使用：我这里使用的是sass
var sass = require('gulp-sass'),
minifyCSS = require('gulp-minify-css'),
autoprefix = require('gulp-autoprefixer');
var cssFiles = [
'app/src/styles/page/index.scss',
'app/src/styles/page/touch.scss'
使用sass模块时，要加上.on('error', sass.logError))，这样sass编译出错时会打log，而不是终止运行。
，这是一个好东西，也是我不用fekit的一个原因（它还没集成autoprefix）
依赖模块：&&&
说明：fekit采用的CommonJs的模块化方式，此外还有requireJS这种AMD的模块化方式。而webpack则是理想中的打包工具，它同时支持CommonJs和AMD，并拥有大量的加载器，包括上面说都的sass编译、前端模板编译等加载器，而且还有webpack-dev-server，已经强大到几乎不需要gulp了。我对webpack还不太熟，并且需要用到gulp的一些其他功能，所以暂时考虑把webpack作为gulp的一个模块来使用。
var named = require('vinyl-named');
var webpack = require('gulp-webpack');
var jsFiles = [
'app/src/scripts/page/index.js',
'app/src/scripts/page/touch.js'
对于有多个入口文件（entry point）的情况，需要使用vinyl-named这个模块，这样就能实现以下打包需求
src/scripts/index.js -& prd/scripts/index.js
src/scripts/touch.js -& prd/scripts/touch.js
在output里面可以设置打包后的文件名，如 "[name].min.js"
我在项目中使用的是commonjs的模块化方式，但大多数插件（如jquery或zepto插件）都是支持两种模块化方式，并且是先判断 define 再判断 module.export，所以我们需要&屏蔽&amd的模块加载方式。
首先安装`imports-loader`模块，然后做如下配置：
loaders: [{
test: /\.js$/,
loader: "imports?define=&false"
这样我们就能放心地使用各种插件了。
我的项目中使用了HoganJs作为前端模块，在webpack中只要找到相应的加载器就行。
首先安装[mustache-loader](/deepsweet/mustache-loader)模块，然后做如下配置：
loaders: [{
test: /\.html$/,
loader: 'mustache'
通过 2. 和 3. 两个例子，大家可以看出test就是要处理的文件类型，loader就是处理文件的加载器。
调试仍然是个比较大的问题，虽然webpack提供了各种调试模式（在devtool中配置，实现sourcemap的调试），但在实际使用时，经常会遇到跳过断点的问题，不知道是不是gulp-webserver和webpack不适配的原因。所以在实际开发中，我会先把uglify给注释掉，这样至少能在一个未混淆压缩的文件里调试。如果大家有好的方法，麻烦告知，谢谢～
依赖模块：&
说明：在实际生产环境中，我们页面引用的css和js文件的文件名都是带版本号的，这样方便回滚和防止缓存。通常我们使用文件的md5编码作为版本号。
var rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
var cssDistFiles = [
'app/prd/styles/index.css'
var jsDistFiles = [
'app/prd/scripts/index.js'
结果如下：
index.html
我把生产md5和替换html中的版本号拆分为了两步，之前是放在一起，结果会出现用上一次版本号替换html中文件名的问题。
依赖模块：
说明：一些touch上的活动页，样式和脚本都不多，与其增加额外的请求数，不如把样式和脚本都以内联的方式嵌到html文件中。
gulpfile.js
这一个月来，我用到的基本就这么多了，其实回头看看，自己东拼西凑也算是造了一个自己的构建小工具。同时，我也更深入地理解了fekit的设计思路和一些原理。
不过，类似FIS的smarty模板、fekit的velocity mock等功能，我还没发现怎么在gulp中来实现。简单的说，就是能在前端环境开发jsp、velocity或者php（我目前的需求是php），数据采用mock方式，不依赖于后端，从而把view的控制权完全拿到前端，实现前后端的分离（非ajax方式）。如果大家有任何建议，麻烦指教！
更新于08.11
依赖模块：&
说明：&是一个类django、twig模板的前端模版，说是类似，基本语法其实一样，这样前端开发用swig，后端用对应的模板引擎（比如python的django、php用twig等），这样一套模版文件在前后端都能解析，从而实现前后端分离。
由于swig和twig在一些语法上存在差异，我们需要扩展swig:
swig.setDefaults({
cache: false,
loader: swig.loaders.fs(path.join(appbase)),
environment: "local",
另外我在locals里面设置了environment这个字段，这样在某些地方可以通过environment判断是否是本地环境，从而解决swig和twig不兼容的问题：
{% if environment == 'local' %}
{% set tpl_path = './components/ctn_publish/' + type + '/index.tpl' %}
{% else %}
{% set tpl_path = './components/ctn_publish/' ~ type ~ '/index.tpl' %}
{% endif %}
阅读(...) 评论()