javascript - gulp+browserify进行前端自动化以及打包问题

问题描述

问 题

目前使用gulp进行前端自动化，现在还想做一下模块化，因为是多页面（几十个）,所以就想使用browseify进行打包，但是在写gulpfile的时候出现一个文件路径的问题，这是我的代码：

gulp.task('bundle', function(done) {
    glob('./src/assets/js/*.js', function(err, files) {
        if(err) done(err);
        var tasks = files.map(function(entry) {
            return browserify({ entries: [entry] })
                .bundle()
                .pipe(source(entry))
                .pipe($.buffer())
                .pipe($.sourcemaps.init({loadMaps: true}))
                .pipe($.uglify())  
                .pipe($.sourcemaps.write('./'))  
                .pipe(rename({
                    extname: '.bundle.js'
                }))
                .pipe(gulp.dest('./dist/assets/js/'));
            });
        es.merge(tasks).on('end', done);
    })
})

这样的话会在dist/assets/js/目录下生成一个src/assets/js/aaa.js的结构，但是我只是想要一个文件名而已，可是这个却传过来的是一个文件目录，如何做才能像之前使用gulp那样dest之后不会拼接路径？

解决方案

我是不通过glob获取文件的方式，而是从其他地方传递文件名数组过来，通过browserify的basedir配置项提取出公共的路径，这个可能和lz的情况不太一致。
另外，gulp-rename插件是可以更改输出文件的路径的，通过dirname配置项。

这篇关于javascript - gulp+browserify进行前端自动化以及打包问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！