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‘]);
时间: 2024-08-06 03:07:38

gulp配置browserify多入口的相关文章

前端构建工具的用法—grunt、gulp、browserify、webpack

随着前端项目的飞速发展,项目越来越大.文件越来越多,前端工程化的工具也越来越多.下面介绍目前最流行的四种构建工具——grunt.gulp.browserify.webpack 所有的构建工具都是基于NodeJs和Npm,所以使用下面任何工具都需要安装Node 一.grunt 1.需要两个文件: Gruntfile.js —— grunt执行任务文件:描述项目会执行的任务. package.json —— 工程描述文件:描述项目基本信息,和项目中使用到的npm包信息,方便其他人了解项目信息.跑起来

TP3.2 Nginx下配置ThinkPhp多入口访问

thinkphp多入口配置后,入口index.php指向应用目录=>app,入口admin.php指向后台管理目录=>admin在nginx下设置伪静态(在nginx的配置文件中): #ThinkPHP REWRITE支持if (!-e $request_filename) {rewrite ^/(.*)$ /index.php?s=$1 last;} 配置后,www.abc.com/index.php可以正常访问,www.adc.com/admin.php访问文件不存在错误! 解决方案:一个

流行得前端构建工具比较,以及gulp配置

前端现在三足鼎立的构建工具(不算比较老的ant,yeoman),非fis,grunt,gulp莫属了. fis用起来最简单,我打算自己得项目中使用一下fis. 先说一下gulp安装吧. 第一步:安装node和npm,搭建node环境. 访问 http://nodejs.org.npm会随着安装包一起安装. 确保node 和npm安装,如果如下两个命令行没有正确安装得话,说明node没有安装正确. $ node -v v0.12.6 $ npm -v 2.11.2 第二步:安装gulp 认识npm

gulp 配置

gulp 安装 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm install --save-dev gulp 3.在项目根目录下创建一个名为 gulpfile.js 的文件和package.json: $ npm install --save-dev   //安装package.json里所有插件 package.json的配置插件可以在下面网址找到: https://www.np

gulp配置版本号 教程之gulp-rev-append

简介: 使用gulp-rev-append给页面的引用添加版本号,清除页面引用缓存. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 1.1.gulp基本使用还未掌握?请参看: gulp详细入门教程 1.2.本示例目录结构如下: 2.本地安装gulp-rev-append 2.1.github:https://github.com/bustardcelly/gulp-rev-append 2.2.安装:命令提示符执行 cnpm

gulp配置实现修改js、css、html自动刷新

写在前面: 本配置支持es6.less 1.首先 给出初始的目录结构 给出执行gulp后的目录结构 给出执行gulp --p后的目录结构 2.package.json里是一个写入.文件描述了npm包的相关配置信息(作者.简介.包依赖等)和所需模块. { "name": "gruntTest", "version": "1.0.0", "description": "", "ma

Nginx下配置ThinkPhp多入口访问

比如在一个项目中有前台与后台两个模块,需要使用不同的入口文件.同时希望前台使用默认的index.php的入口. 关键的配置如下: if (!-e $request_filename) {           rewrite /plugins.php(.*)$ /plugins.php?s=/$1 last;           rewrite /admin.php(.*)$ /admin.php?s=/$1 last;               rewrite  ^(.*)$  /index.

gulp配置

var gulp = require('gulp'), gulpLoadPlugins = require('gulp-load-plugins'), plugins = gulpLoadPlugins(); gulp.task('build-less', function() { return gulp.src('src/main/webapp/html/src/less/*.less') .pipe(plugins.sourcemaps.init()) .pipe(plugins.less(

MySQL官方教程及各平台的安装教程和配置详解入口

官方文档入口: https://dev.mysql.com/doc/ 一般选择MySQL服务器版本入口: https://dev.mysql.com/doc/refman/en/ 在右侧有版本选择: 比如安装教程的入口: https://dev.mysql.com/doc/refman/5.7/en/installing.html 还有很多官方的教程: 官方提供的是英文版本,采用Chrome翻译即可. 这个教程上没有APT源的安装方式,入口在这里: https://dev.mysql.com/d