我正在使用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 文件中完成上述任务以使其做好生产准备?
最佳答案
我无法回答您的所有观点,但这也许可以帮助您开始。这就是我使用 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);
});
关于jquery - 如何构建我的 gulp 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32038655/