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: ...
随机推荐
- android十六进制颜色代码转换为int类型数值
android开发中将十六进制颜色代码转换为int类型数值方法:Color.parseColor("#00CCFF")返回int数值;
- python-gdb
https://blog.log4d.com/2013/11/python-gdb/ https://wiki.python.org/moin/DebuggingWithGdb
- JAVA学习:方法
方法是放在两个不同的java文件中,一个是指存储相应的业务逻辑, 另一个java文件是只控制 输入输出(也就是用户界面). Calc方法: /* * 方法 */ public class Calc { ...
- common-lang——StringUtils
1.文字省略处理 最多显示几个字 StringUtils.abbreviate("中华人民共和国", 5); // output:中华.. 2.文字中间省略 最多显示几个字符 St ...
- CentOS使用sendmail发送邮件
1.安装sendmail yum -y install sendmail 2.启动sendmail服务 service sendmail start 3.将发件内容写入mail.txt mail -s ...
- 你的网站为什么会慢?——用YSlow为你的网站提速
在前面的文章我翻译的文章中分别从内容.服务器.JavaScript和CSS.图片.Coockies和移动应用等几个方面总结了34条提高网站性能的黄金守则,但是这些守则中,有一些是不常用到的,若非有实力 ...
- react初识
如下是在研究中记录的笔记: 1,作用:局部的更新dom结构;虚拟dom保证性能2,和mvc不同,mvc是对于技术上的分离(分类),而react是组件上的分离,每个视图模块分离,复用,以视图模块为单位3 ...
- 第一篇、Apache和Tomcat的整合
1.web架构 首先上图,解释web通用架构 通常情况下分为三大块 : ★ Web server : 通常情况下由 Apache Http Server . IBM Http Server .I ...
- java.util.Random深入理解
java.util.Random next方法的原理 比较好的参考文档: http://isky001.iteye.com/blog/1339979 package random.utilrandom ...
- Gprinter Android SDK V1.0 使用说明
佳博打印机代理商淘宝店https://shop107172033.taobao.com/index.htm?spm=2013.1.w5002-9520741823.2.Sqz8Pf 在此店购买的打印机 ...