如何构建我的 gulp 文件？

Question

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

• 将所有jsx,js文件转换为一个js文件
• 使用浏览器化
• 缩小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');
});

关于监视更改，脚本由 Browserify 任务中的 Watchify 自动监视和重新打包。但这是我观察变化的方式：

'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.xml 中。循环自动需要该文件夹中的任何文件。

要添加新任务，只需将新任务文件添加到 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);
});