标签：reactjs gulp browserify gulp-uglify javascript

我设置了一个gulp文件,并且除我的bundle.js和homeBundle.js之外,我已经适当缩小了所有脚本和CSS文件.我在每个任务中都运行了uglify()函数,但是当我尝试吞咽时会收到以下错误.

events.js:141
throw er; // Unhandled ‘error’ event
^ Error: /Users/Documents/RTVS360/bundle.js: Streaming not supported

当gulp每次运行时都会重新创建文件时,gulp尝试进行丑化时是否存在问题？

在下面您可以看到我的gulpfile.任何帮助将不胜感激.

var gulp = require('gulp');
var reactify = require('reactify');
var browserify = require('browserify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
var uglifycss = require('gulp-uglifycss');
var glob = require('glob');
var streamify = require('gulp-streamify');

gulp.task('watchify', function () {
    var bundler = browserify({
        entries: ['./client/main.jsx'],
        transform: [reactify],
        debug: true,
        cache: {},
        packageCache: {},
        fullPaths: true
    });

    var watcher = watchify(bundler);

    return watcher
        .on('update', function () {
            watcher.bundle()
                .on('error', function (err) {
                    console.log('There was an error compiling the components.', err.message);
                })
                .pipe(source('bundle.js'))
                .pipe(gulp.dest('./dest/'));
        })
        .bundle()
        .on('error', function (err) {
            console.log('There was an error compiling the components.', err.message);
        })
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./dest/'));
});

gulp.task('browserify', function () {
    var testFiles = glob.sync('./client/main.jsx');
    var bundler = browserify({
        entries: testFiles,
        transform: [reactify],
        debug: true,
        cache: {},
        packageCache: {},
        fullPaths: true
    });

    function rebundle() {
        bundler
        .bundle()
        .on('error', function(err) {
            console.log('There was an error compiling the components.', err.message);
        })
        .pipe(source('bundle.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dest/'));
    }
    return rebundle();
});

gulp.task('home', function () {

    var testFiles = glob.sync('./client/homepage.jsx');
    var bundler = browserify({
        entries: testFiles,
        transform: [reactify],
        debug: true,
        cache: {},
        packageCache: {},
        fullPaths: true
    });

    function rebundle() {
        bundler
        .bundle()
        .on('error', function(err) {
            console.log('There was an error compiling the components.', err.message);
        })
        .pipe(source('homeBundle.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dest/'));
    }

    return rebundle();
});


// Uglify Scripts
gulp.task('scripts', function() {
    gulp.src('assets/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
});

// Minify Styles
gulp.task('styles', function() {
  gulp.src('./assets/css/**/*.css')
    .pipe(uglifycss({
      "max-line-len": 80
    }))
    .pipe(gulp.dest('./dist/css'));
});


gulp.task('default', ['browserify', 'home','scripts', 'styles']);

解决方法:

您需要将streamify与gulp-uglify一起使用.

似乎您正在导入streamify插件,但未使用它.
您应该使用streamify函数包装uglify调用.例：

var gulp = require('gulp');
var reactify = require('reactify');
var browserify = require('browserify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
var streamify = require('gulp-streamify');

gulp.task('watchify', function () {
    var bundler = browserify({
        entries: ['main.jsx'],
        transform: [reactify],

        // You probably would like to change these two flags to false for
        // production since they increase the size of your output file
        debug: true,
        fullPaths: true,

        cache: {},
        packageCache: {}
    });

    var watcher = watchify(bundler);

    return watcher
        .on('update', function () {
            watcher.bundle()
                .on('error', function (err) {
                    console.log('There was an error compiling the components.', err.message);
                })
                .pipe(source('bundle.js'))
                .pipe(streamify(uglify()))
                .pipe(gulp.dest('./dest/'));
        })
        .bundle()
        .on('error', function (err) {
            console.log('There was an error compiling the components.', err.message);
        })
        .pipe(source('bundle.js'))
        .pipe(streamify(uglify())) // wrap uglify with the streamify plugin
        .pipe(gulp.dest('./dest/'));
});

gulp.task('default', ['watchify']);

Gulp-uglify本身不支持流式处理乙烯基文件对象,因此您需要使用streamify插件使其支持流.

标签：reactjs,gulp,browserify,gulp-uglify,javascript
来源： https://codeday.me/bug/20191119/2034602.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。