需要 var es = require('event-stream'); gulp.task('browserify', function(){ var files = [ { fpath: './js/main.js', fname: 'main.js' }, { fpath: './js/main2.js', fname: 'main2.js' } ]; var tasks = files.map(function(entry){ return browserify({ entries: [

随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6(ECMAScript 2015)前端项目,网上的相关教程也比较多:相对来说使用gulp来构建es6项目的中文教程就比较少. 经过一段时间的摸索,我觉得其实使用gulp也可以很方便地构建es6项目.以下是我感觉gulp和webpack主要的不同之处: gulp的任务机制和流式管道函数和webpack的

 随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发的时候,你会觉得十分费劲,因为你不知道文件之间复杂的关系,所以我们需要利用一些插件来配合进行模块化的开发. 所谓模块化的开发,写过nodejs的人都知道,文件之间的依赖可以用require()实现,但是浏览器端是不支持这样的依赖形式的,而browserify却可以解决这个问题,再加上gulp这个强大

Gulp browserify livereload 之前在browserify那个博文中介绍了gulp + browserify 不过那个配置还不能满足日常需要 搬运 https://github.com/Hyra/angular-gulp-browserify-livereload-boilerplate/blob/master/Gulpfile.js#L67 'use strict'; var gulp = require('gulp'), jshint = require('gulp-j

阅读本文需要有React的基础知识,可以在React 入门实例教程和React中文官网进行基础学习. 没有React基础也可以学习本文,本文主要不是学习React,而是gulp+browserify进行模块化开发. 1.创建项目和环境搭建 我们可以先创建一个文件夹叫react_item,作为项目的根目录. 打开命令行,cd到项目的根目录下,我们需要通过npm安装gulp,输入: npm install gulp -g--save-dev Tip:没有安装node.js的朋友可以进入node.js

Grunt 是相比后面几个更早的项目,他依赖于各种插件的配置.这是一个很好的解决方案,但是请相信我,你不会想看到一个 300 行的 Gruntfile Gulp 提供了一个不一样的解决方案,而不是依赖于各种插件的配置.Gulp 使用了一个文件流的概念.如果你熟悉 Unix,那么 Gulp 对你来说会差不多,Gulp 会提供你一些简单化的操作.在这个解决方案中,是去匹配一些文件然后操作(就是说和 JavaScript 相反)然后输出结果(比如输出在你设置的编译路径等). Webpack 扩展了 C

使用Browserify打包js时如果项目变得越来越大,编译时间就会相应变得越来越长.使用官方的插件watchify是个比较有效的提高速度方案. 提速原理 watchify的用法和gulp的watch方法比较类似,都是监控文件的改动来触发一些操作.在gulp中我们可以把一个完整的任务拆分成很多个局部任务,然后使用gulp.watch对这些局部任务进行监听,例如: gulp.task('build-js1', ...); gulp.task('build-js2', ...); gulp.task

简介 这篇文档用以说明如何使用browserify来构建模块化应用 browserify是一个编译工具,通过它可以在浏览器环境下像nodejs一样使用遵循commonjs规范的模块化编程. 你可以使用browserify来组织代码,也可以使用第三方模块,不需要会nodejs,只需要用到node来编译,用到npm来安装包. browserify模块化的用法和node是一样的,所以npm上那些原本仅仅用于node环境的包,在浏览器环境里也一样能用. 现在npm上有越来越多的包,在设计的时候就是想好既

1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命令打包开发chunk,并支持热替换 可以通过命令打包可发布的chunk 支持路由 路由中的代码实现按需加载 用CommonJs的风格组织代码 代码结构尽量清晰易懂 尽我所能先做出一个满足以上特点的架子吧,最近看完ES6,准备再去看看flux和reduce,看过之后再来思考下前端数据如何管理比较科学规

前言 在未接触browserify,虽然我知道它是一个前端构建工具,但还是有几个疑问: 1. browserify出现的日期? 2. 能构建哪些文件? 3. 附加的browserify代码体积是多大? 4. 能生成多个输出文件吗? 5. 如何兼顾开发调试? 6. browserify vs webpack? browserify  browserify可以让你使用类似于 node 的 require() 的方式来组织浏览器端的Javascript代码,通过预编译让前端Javascript可以直接

2. gulp + browserify /** * File Name: gulpfile.js */ // 引入 gulp var gulp = require('gulp'); // 引入组件 // 保证在当前项目目录下曾经运行过: // npm install gulp-uglify gulp-rename gulp-babel babel-preset-es2015 ...... --save-dev // var jshint = require('gulp-jshint'); va

本人就职于一家互联网小公司,根据自己的项目纪录一下常用的gulp插件,项目不是很大! 文章目录 1. gulp-load-plugins 2. yargs 3. del 4. gulp-filter 5. gulp-header 6. run-sequence 7. gulp-uglify 8. gulp-minify-html 9. npm-check-updates 10. 待完善…… gulp-load-plugins 此插件的功能主要搭配 package.json 文件中声明的依赖使用.

如果你不熟悉gulp的操作,可以看下下面的教程: gulp学习笔记1 gulp学习笔记2 gulp学习笔记3 gulp学习笔记4 对于gulp在react中的构建,找了很多资料,看了很多文章,也根据文章试验了很多遍,但是就是不成功.很多文章其实都或多或少缺少一些步骤,而且还不给源文件参考,这对于新手来说就是大写的懵逼.最后终于发现一篇文章可以实现,就转载了.后面可以好好写react了. 示例目录结构如下: - libs/ - react/ - node_modules/ - src/ - mai

gulp+webpack+vue 章节目录 1.目标 2.实现 2.1合并库文件 2.2组织业务代码 2.3打包开发代码 2.4使用webpack-dev-server和热替换插件HotModuleReplacementPlugin 2.5打包生产环境代码 3.把命令都整合到npm中 4.后续 1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命令打

在上一篇文章我们对 Stream 的特性及其接口进行了介绍,gulp 之所以在性能上好于 grunt,主要是因为有了 Stream 助力来做数据的传输和处理. 那么我们不难猜想出,在 gulp 的任务中,gulp.src 接口将匹配到的文件转化为可读(或 Duplex/Transform)流,通过 .pipe 流经各插件进行处理,最终推送给 gulp.dest 所生成的可写(或 Duplex/Transform)流并生成文件. 本文将追踪 gulp(v4.0)的源码,对上述猜想进行验证. 为了分

项目地址: http://riotjs.com/ 备注: 为了简单使用了 browserify 进行构建 1. 项目结构 ├── app.css ├── gulpfile.js ├── index.html ├── package.json ├── README.md ├── sample.tag ├── src │   └── app.js └── yarn.lock 2. 代码 a. app.css .demo { font-size: 100px; } b. gulpfile.js var

awesome-gulp中文版 一份gulp的资源,插件和使用实例清单, 致力于打造更好的前端工程构建流程. 被老外的awesome 清单刺激到,觉得有必要翻译一份,为国产的程序员们做点事情,本清单将保持实时更新同步. PS:进都进来了,就顺便看看其他的吧: awesome-nodejs-cn awesome-angularjs-cn awesome-react-cn awesome-npm-cn awesome-react-native-cn 项目的Github地址:awesome-react

require.js vs browserify require.js是模块加载器:browserify是预编译工具 require.js遵循的是AMD规范:browserify遵循的是CommonJS规范 require.js是在浏览器端运行期分析依赖:browserify在服务器端编译期就进行了依赖分析 他们互相有一部分的重合替代性,require.js有r.js的打包方案,减少http请求的同时也在编译期进行了一定的依赖分析工作,browserify通过借助插件等解决方案也可以实现浏览器端

Webpack Demos https://github.com/ruanyf/webpack-demos Docs https://webpack.github.io/docs/?utm_source=github&utm_medium=readme&utm_campaign=trdr Webpack可以做什么 支持CMD AMD (Gulp还需要browserify才能CMD) 模块加载器 插件机制 (典型的模块加载器babel-loader) 可以通过配置打包成多个文件 (充分利用浏

首先,React.js是facebook在2013年5月开源的一个前端框架,React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层, React为了更高超的性能而使用虚拟DOM作为其不同的实现. 它同时也可以由服务端Node.js渲染 - 而不需要过重的浏览器DOM支持, React实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单.因其新颖独特, 目前在国内还没有很多的应用.但是其性能出众,代码逻辑简单,近来越来越火.目前还