Question

我正在使用reactjs，我想使用gulp来执行以下操作

将所有jsx，js文件转换为一个js文件
使用browserify
缩小js输出文件
允许在jsx文件中使用require（）函数需要jquery
注意对jsx的任何更改并转换为js

这是我到目前为止所拥有的：

var gulp = require('gulp')
var browserify = require('browserify')
var source = require('vinyl-source-stream')
var reactify = require('reactify')
var rename = require('gulp-rename')

gulp.task('js', function() {
    var b = browserify({
        entries: ['./lib/test.js', './lib/app.jsx'],
        transform: [reactify],
        extensions: ['.js','.jsx'],
        debug: false,
        cache: {},
        packageCache: {},
        fullPaths: false
    });

    function build(file) {
        return b
        .external('jquery')
        .plugin('minifyify', {
            map: false
        })
        .bundle()
        .pipe(source('main.js'))
        // Add .min.js to the end of each optimized file
        .pipe(gulp.dest('./js/'));
    };
    build();
});
gulp.task('watch', function() {
    gulp.watch("lib/*.jsx", ["js"])
})
gulp.task('default', ['js', 'watch']);

如何在gulp文件中完成上述任务以使其生产准备就绪？

Answer 1

我无法回答你的所有观点，但也许这可以让你开始。这就是我使用browserify的方式：

'use strict';

var babelify = require('babelify');
var browserify = require('browserify');
var browserSync = require('browser-sync');
var buffer = require('vinyl-buffer');
var config = require('../config');
var debowerify = require('debowerify');
var gulp = require('gulp');
var gulpif = require('gulp-if');
var gutil = require('gulp-util');
var handleErrors = require('../util/handleErrors');
var ngAnnotate = require('browserify-ngannotate');
var source = require('vinyl-source-stream');
var sourcemaps = require('gulp-sourcemaps');
var streamify = require('gulp-streamify');
var uglify = require('gulp-uglify');
var watchify = require('watchify');

// Based on: http://blog.avisi.nl/2014/04/25/how-to-keep-a-fast-build-with-browserify-and-reactjs/
function buildScript(file) {

    var bundler = browserify({
        entries: config.browserify.entries,
        debug: true,
        cache: {},
        packageCache: {},
        fullPaths: true
    }, watchify.args);

    if (!global.isProd) {
        bundler = watchify(bundler);
        bundler.on('update', function() {
            rebundle();
        });
    }

    var transforms = [
        babelify,
        debowerify,
        ngAnnotate,
        'brfs',
        'bulkify',
        'browserify-shim'
    ];

    transforms.forEach(function(transform) {
        bundler.transform(transform);
    });

    function rebundle() {
        var stream = bundler.bundle();
        var createSourcemap = global.isProd && config.browserify.sourcemap;

        gutil.log('Rebundle...');

        return stream.on('error', handleErrors)
            .pipe(source(file))
            .pipe(gulpif(createSourcemap, buffer()))
            .pipe(gulpif(createSourcemap, sourcemaps.init()))
            .pipe(gulpif(global.isProd, streamify(uglify({
                compress: { drop_console: true }
            }))))
            .pipe(gulpif(createSourcemap, sourcemaps.write('./')))
            .pipe(gulp.dest(config.scripts.dest))
            .pipe(gulpif(browserSync.active, browserSync.reload({ stream: true, once: true })));
    }

    return rebundle();
}

gulp.task('browserify', function() {
    return buildScript('main.js');
});

关于观看更改，Watchify会在Browserify任务中自动监视并重新编译脚本。但在这里我是如何看待变化的：

'use strict';

var config = require('../config');
var gulp = require('gulp');

  gulp.task('watch', ['browserSync', 'server'], function() {
  gulp.watch(config.scripts.src,  ['lint']);
  gulp.watch(config.styles.watch, ['styles']);
  gulp.watch(config.images.src,   ['images']);
  gulp.watch(config.fonts.src,    ['fonts']);
  gulp.watch(config.views.watch,  ['views']);

});

一般而言，我不是管理一个负责创建多个任务的巨型配置文件，而是将每个任务分解为gulp / tasks中自己的文件。循环中自动需要该文件夹中的任何文件。

要添加新任务，只需将新任务文件添加到gulp / tasks。

这是我的gulpfile.js

'use strict';

global.isProd = false;

require('./gulp');

这是./gulp/index.js中的循环：

'use strict';

var fs = require('fs');
var onlyScripts = require('./util/scriptFilter');
var tasks = fs.readdirSync('./gulp/tasks/').filter(onlyScripts);

tasks.forEach(function(task) {
  require('./tasks/' + task);
});

如何构建我的gulp文件？

1 个答案: