gulp与webpack-stream集成配置

webpack非常强大,但是也有不足的地方,批量式处理依然是gulp更胜一筹.我们是否可以将两者的优点结合起来呢? 这篇文章就是讲述如何集成gulp和webpack

1.安装webpack-stream

很重要的插件,当然也可以直接使用官方的webpack,集成方式可以看webpack官网. 但webpack-stream更符合gulp的流语法.

sudo npm install --save webpack-stream vinyl-named

windows用户去掉sudo, vinyl-named用来保持输入和输出的文件名相同, 否则会自动生成一个hash.

2.配置文件的编写:

gulpfile.js

var gulp = require(‘gulp‘);
var webpack = require(‘webpack-stream‘);
var named = require(‘vinyl-named‘);
var webpackConfig = require("./webpack.config.js");

gulp.task(‘webpack‘, function() {
  return gulp.src(‘./www/src/main.jsx‘)
    .pipe(named())
    .pipe(webpack(webpackConfig))
    .pipe(gulp.dest(‘./www/build/‘));
});

webpack.config.js

注意:用webpack-stream不需要配置entry和output

module.exports = {
    watch: true,
    devtool: "source-map",
    resolve: {
        extensions: [‘‘, ‘.js‘, ‘.jsx‘]
    },
    module: {
        loaders: [{
            test: /\.jsx$/,
            loader: ‘babel-loader‘,
            query: {
                presets: [‘es2015‘, ‘react‘]
            }
        }, {
            test: /\.js$/,
            loader: ‘babel-loader‘,
            query: {
                presets: [‘es2015‘]
            }
        }]
    }
};
时间: 2024-10-05 09:28:35

gulp与webpack-stream集成配置的相关文章

gulp、webpack学习笔记

前言:这两天天学了gulp和webpack的基本使用方法,其实对于这些工具,了解基本的用法.熟悉一些常用配置和方法就足够日常使用了.更复杂的等到需要时才再查相关文档就可以了. gulp和webpack虽然有相似的功能,比如压缩.合并文件,但应该算是两种类型的工具. gulp作为自动化构建工具主要的功能就是自动压缩.css转换.合并资源文件,减少http请求,这些功能对于一般的前端项目而言已经足够使用了.而且使用起来也更加方便, 在gulpfile.js引入组件并创建任务便可以很方便的使用. 而w

gulp与webpack的区别

常有人拿gulp与webpack来比较,知道这两个构建工具功能上有重叠的地方,可单用,也可一起用,但本质的区别就没有那么清晰. gulp gulp强调的是前端开发的工作流程,我们可以通过配置一系列的task,定义task处理的事务(例如文件压缩合并.雪碧图.启动server.版本控制等),然后定义执行顺序,来让gulp执行这些task,从而构建项目的整个前端开发流程. PS:简单说就一个Task Runner webpack webpack是一个前端模块化方案,更侧重模块打包,我们可以把开发中的

[转]基于gulp和webpack的前端工程化

本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux Node.js 我们的需求 基于CommonJS模块化开发 基于React.js的组件化开发(JSX) 为保证组件的复用,css需要打包到js中 有国际化需求,静态文件需要部署在CDN上面 工程化工具的选择 gulp(基于stream的构建工具,与grunt相比,速度快且可编程) webpack(前

JavaScript自动化构建工具入门----grunt、gulp、webpack

蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css   需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动 自动化时代的程序员: 希望一切都可以自动完成 安装 常用插件.压缩插件.合并插件等.  用插件实现 功能无限扩展 简单介绍三种工具 grunt 是js任务管理工具(自动化构建工具)    -- Grunt官网 戳这里 优势:出来早 社区成熟  插件全 缺点:配置复杂   效率低 (cpu占用率高) -------------------------

Gulp和Webpack对比

在现在的前端开发中,前后端分离.模块化开发.版本控制.文件合并与压缩.mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中.前端开发过程越来越繁琐,当今越来越多的网站已经从网页模式进化到了 Webapp 模式.它们运行在现代的高级浏览器里,使用 HTML5. CSS3. ES6 等更新的技术来开发丰富的功能,网页已经不仅仅是完成浏览的基本需求,并且Webapp通常是一个单页面应用(SPA),每一个视图通过异步的方式加载,这导致页面初始化和使用过程中会加载越来越多的 JavaScri

webpack + vuejs 基本配置(一)

开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实践的过程中要去不断访问的5.ES6语法 另外,这套教程的代码都在我的github上,读者可以对照着代码来看,不过还是希望大家自己亲手搭建,体验这个过程,git地址: git地址 前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会

gulp和webpack的区别,是一种工具吗?

背景: 最近收到很多童鞋的问题:gulp和webpack 什么关系,是一种东西吗?可以只用gulp,不用webpack吗 或者反过来? 基于此问: 我简单归结了一下区别和概念,让需要的同学阅读理解,从而不把时间浪费到这种模糊不清的选择问题上! --------------------------------------------------------------------------------------------------------------------------------

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

前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护.打包.发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率.致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程.提高效率.减少错误率.随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部

UX2000语音网关与Lync集成配置

UX2000语音网关是之前NET公司的产品,目前已经被美国Sonus公司收购,UX2000网关的型号也更换为SBC2000,但语音网关的功能基本没有变化.附件文章有语音网关中的基本配置以及常见错误的排除方法,由直真信通华北区技术编写. UX2000语音网关与Lync集成配置,布布扣,bubuko.com