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: ...
随机推荐
- Java8新特性
Java8新特性 Java8主要的新特性涵盖:函数式接口.Lambda 表达式.集合的流式操作.注解的更新.安全性的增强.IO\NIO 的改进.完善的全球化功能等. 1.函数式接口 Java 8 引入 ...
- 深入了解VSTS的Unit Test测试属性
深入的了解一下方法上带有的属性的含义.每个方法上几乎都带有TestMethod这个属性,我们直觉告诉我们,这肯定是表示被测试函数的意思.事实也正是如此,在Unit Test里,有许多测试属性,常用的如 ...
- [Unity3D]Unity3D游戏开发之自己主动寻路与Mecanim动画系统的结合
大家好,欢迎大家关注我的博客,我是秦元培,我的博客地址是blog.csdn.net/qinyuanpei. 这段时间博主将大部分的精力都放在了研究官方演示样例项目上,主要是希望能够从中挖掘出有价值的东 ...
- Android如何创建背景透明的Dialog
一:控制Dialog 的背景方法:1.定义一个无背景主题主题<!--去掉背景Dialog--> <style name="NobackDialog" parent ...
- android 39 共享首选项
共享首选项SharedPreferences:用于存储少量数据,大量数据则存入文件或者sd卡.以键值对保存数据. activity.java package com.sxt.day06_05; imp ...
- percona-MYSQLGUI监控
1.https://www.percona.com/blog/2016/05/26/monitoring-with-percona-app-for-grafana/ http://pmmdemo.pe ...
- linux下ntfs硬盘的加载
问题: # mount –t ntfs /dev/sdb1 /mnt/ mount: unknown filesystem type ‘ntfs’ 这是由于Cent ...
- 关于jsp web项目中的javax.servlet.ServletException: java.lang.NoClassDefFoundError: javax/el/ELResolver错误
错误: javax.servlet.ServletException: java.lang.NoClassDefFoundError: javax/el/ELResolver org.apache.j ...
- 理解JavaScript的定时器与回调机制
定时器方法 JavaScript是单线程的.虽然HTML5已经开始支持异步js了. JavaScript的setTimeout与setInterval看起来就像已经是多线程的了.但实际上setTime ...
- 14、SQL Server 存储过程
SQL Server 存储过程 存储过程类似函数,可以重复使用.相对于函数,存储过程拥有更强大的功能和更高的灵活性. 存储过程中可以包含逻辑控制语句和数据操作语句,可以接受参数,输出参数,返回单个值或 ...