原创

browserify+gulp配置


browserify+gulp配置配置可以使用Node模块 能直接npm 然后require导入

安装配置

  1. gulp
  2. browserify
  3. babelify
  4. vinyl-source-stream

配置

gulp.task('browserify', function (done) {
    var items = [{ name: './src/common.js', filname: 'common.js' }, { name: './src/login.js', filname: 'login.js' }];
    var tasks = items.map(function(entry){
        return browserify({ entries: [entry.name] })
        .transform(babelify)
        .bundle()
        .pipe(source(entry.filname))
        .pipe(buffer())
        .pipe(
            babel({
                "presets": ["es2015", "stage-3"]
            })
        )
        // .pipe(uglify())
        .pipe(gulp.dest('./dist'));
    });
    es.merge(tasks).on('end', done);
})

然后调用

gulp.task('default', gulp.series('clean', 'copy', 'css','browserify','distimages'));

来一个网整的

const gulp = require('gulp');
const clean = require('gulp-clean');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// import browserify from "browserify";
const browserify = require('browserify');
const babelify = require('babelify');
const buffer=require('vinyl-buffer');
const es = require('event-stream');
const source = require('vinyl-source-stream');
const less = require('gulp-less');
const cleanCSS = require('gulp-clean-css');
const autoprefixer = require('gulp-autoprefixer');
process.env.NODE_ENV = 'production';
gulp.task('browserify', function (done) {
    var items = [{ name: './src/common.js', filname: 'common.js' }, { name: './src/login.js', filname: 'login.js' }];
    var tasks = items.map(function(entry){
        return browserify({ entries: [entry.name] })
        .transform(babelify)
        .bundle()
        .pipe(source(entry.filname))
        .pipe(buffer())
        .pipe(
            babel({
                "presets": ["es2015", "stage-3"]
            })
        )
        // .pipe(uglify())
        .pipe(gulp.dest('./dist'));
    });
    es.merge(tasks).on('end', done);
})
// gulp.task('browserify', function (done) {
//     glob('./src/**.js', function (err, files) {
//         if (err) done(err);

//         var tasks = files.map(function (entry) {
//             return browserify({ entries: [entry] })
//                 .bundle()
//                 .pipe(source(entry))
//                 .pipe(rename({
//                     extname: '.js'
//                 }))
//                 .pipe(gulp.dest('./dist'));
//         });
//         es.merge(tasks).on('end', done);
//     })
// });
gulp.task('clean', () => {
    return gulp.src(['dist'], { read: false, allowEmpty: true }).pipe(clean());
});

gulp.task('copy', () => {
    return gulp
        .src(['src/static/*', 'src/static/*/*'])
        .pipe(gulp.dest('dist/static'))
});

gulp.task('css', () => {
    return gulp
        .src('src/*.less')
        .pipe(less())
        .pipe(autoprefixer())
        .pipe(cleanCSS({ compatibility: 'ie8' }))
        .pipe(gulp.dest('dist/'))
});

gulp.task('js', () => {
    return gulp
        .src(['src/*.js'])
        .pipe(
            babel({
                "presets": ["es2015", "stage-3"]
            })
        )
        .pipe(uglify({ mangle: true, compress: { drop_console: true } }))
        .pipe(gulp.dest('dist/'))
});
//输出images
gulp.task('distimages', function(){
    return gulp.src('src/img/logo.png')
        .pipe(gulp.dest('./dist/images'));
});

gulp.task('default', gulp.series('clean', 'copy', 'css','browserify','distimages'));
gulp
前端基础
  • 作者:渣渣前端(联系作者)
  • 发表时间:2020-06-03 21:46
  • 版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
  • 公众号转载:请在文末添加作者公众号二维码
  • 评论