gulp配置browserify多入口
需要 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: [entry.fpath] })
.bundle()
.pipe(source(entry.fname))
.pipe(buffer())
.pipe(uglify())
.pipe(rename({ extname: '.bundle.js' }))
.pipe(gulp.dest('./dist/s/js'));
});
return es.merge.apply(null, tasks);
});
附上完整 gulpfile.js 如下:
'use strict';
var gulp = require("gulp"),
browserify = require('browserify'),
source = require("vinyl-source-stream"),
buffer = require('vinyl-buffer'),
less = require("gulp-less"),
minifyCss = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
es = require('event-stream'),
watchify = require('watchify');
gulp.task('less', function(){
gulp.src('./less/*.less')
.pipe(less())
.pipe(minifyCss({
advanced: false,
compatibility: 'ie7'
}))
.pipe(gulp.dest('./dist/s/css'));
});
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: [entry.fpath] })
.bundle()
.pipe(source(entry.fname))
.pipe(buffer())
.pipe(uglify())
.pipe(rename({ extname: '.bundle.js' }))
.pipe(gulp.dest('./dist/s/js'));
});
return es.merge.apply(null, tasks);
});
gulp.task('watch', function(){
gulp.watch('./less/*.less', ['less']);
gulp.watch('./js/**/*.js', ['browserify']);
});
gulp.task('default', ['less', 'browserify']);
gulp.task('serve', ['less', 'browserify', 'watch']);
gulp配置browserify多入口的更多相关文章
- 前端构建工具的用法—grunt、gulp、browserify、webpack
随着前端项目的飞速发展,项目越来越大.文件越来越多,前端工程化的工具也越来越多.下面介绍目前最流行的四种构建工具——grunt.gulp.browserify.webpack 所有的构建工具都是基于N ...
- 使用Gulp和Browserify创建多个绑定文件
Browserify是一个Javascript的绑定工具,帮助我们理顺module之间的依赖关系.Gulp用来优化workflow.两者的共同点都是使用流,但在使用流方面也有不同之处: Browser ...
- 【前端】我的Gulp配置
2. gulp + browserify /** * File Name: gulpfile.js */ // 引入 gulp var gulp = require('gulp'); // 引入组件 ...
- React gulp、Browserify、Webpack实例
一.gulp var gulp = require('gulp'); var react = require('gulp-react'); gulp.task('jsx', function() { ...
- gulp配置
/* gulp配置 */ /* gulp配置 */ var gulp = require('gulp'), concat = require('gulp-concat'), rename = requ ...
- Scss开发临时学习过程||webpack、npm、gulp配置
SCSS语法: 假设变量申明带有!default,那么如果在此申明之前没有这个变量的申明,则用这个值,反之如果之前有申明,则用申明的值. ‘...’传递多个参数: @mixin box-shadow( ...
- 快速配置webpack多入口脚手架
背景 当我们基于vue开发单个项目时,我们会init一个vue-cli,但当我们想在其他项目里共用这套模板时,就需要重新init一个,或者clone过来,这非常不方便,而且当多人开发时,我们希望所有的 ...
- vue-cli3配置多页面入口
假如要单独将登陆页面当成一个项目入口文件: 第一步:创建一个登陆页面的文件 在项目public文件夹下创建一个login.html,其实就是将index.html复制一份,将title改一下: 第二步 ...
- gulp 配置达到实现import export支持
gulp.task('tojs', () => { return gulp.src('./es/**/*.js') .pipe(babel({ babelrc: false, plugins: ...
随机推荐
- c#基础语言编程-文件流操作
引言 在System.IO 命名空间下提供了一系列的类,我们可以通过相应的类进行文件.目录.数据流的操作. 1.File类:提供用于创建.复制.删除.移动和打开文件的静态方法.File类 2.File ...
- eCos系统CPU负载测量
原文:http://ecos.sourceware.org/docs-latest/ref/services-cpuload.html 译文:http://blog.csdn.net/zoomdy/a ...
- twemproxy代码框架概述——剖析twemproxy代码前编
本篇将去探索twemproxy源码的主干流程,想来对于想要开始啃这份优秀源码生肉的童鞋会有不小的帮助.这里我们首先要找到 twemproxy正确的打开方式--twemproxy的文件结构,接着介绍tw ...
- HTML5事件——contextmenu 隐藏鼠标右键菜单
在window中单击右键或在Mac中Ctrl+单击时会触发contextmenu事件,通过取消其默认动作能够提供自己定义菜单. 首先先写一个自己的菜单: <style> ul, li { ...
- Linux内核中SPI/I2c子系统剖析
Linux内核中,SPI和I2C两个子系统的软件架构是一致的,且Linux内核的驱动模型都以bus,driver,device三种抽象对象为基本元素构建起来.下文的分析将主要用这三种抽象对象的创建过程 ...
- [RxJS] Filtering operator: single, race
Single, race both get only one emit value from the stream. Single(fn): const source = Rx.Observable. ...
- header的用法小结(转)
php header()函数的具体作用是向客户端发送一个原始 HTTP 标头[Http Header]到客户端. 标头 (header) 是服务器以 HTTP 协义传 HTML 资料到浏览器前所送出的 ...
- ini格式数据生成与解析具体解释
ini格式数据生成与解析具体解释 1.ini格式数据长啥样? watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/ ...
- PHP 5.6启动失败failed to open configuration file '/usr/local/php/etc/php-fpm.conf'
PHP编译安装完毕,启动失败,提示 [-Jun- ::] ERROR: failed to open configuration ) [-Jun- ::] ERROR: failed to load ...
- 第二篇:python基础之文件读写
python基础之文件读写 python基础之文件读写 本节内容 os模块中文件以及目录的一些方法 文件的操作 目录的操作 1.os模块中文件以及目录的一些方法 python操作文件以及目录可以使 ...