我是Grunt,Gulp,Browserify,React的新手,并尝试通过试验Creating Modular View Components with React and Grunt article给出的示例来熟悉它们 . 我在这里发布的grunt文件来自这篇文章 . 我有点困惑 . 我见过一些gulp文件,比如:
.pipe(react())
.pipe(browserify())
但下面的gulp文件使用transform并传入“reactify” . 它甚至不是require'd模块的一部分 . 那个是从哪里来的?它是gulp-react或Browserify模块的一部分吗?
如果像Leiningen那样没有它,Gulp会自动安装一个缺失的模块吗?
另一个问题是:我通过提供以下方式获得了gulp版本:
gulp.src(['react_components/app.jsx']
如果我提供 react_components/*.jsx
,它会抱怨错误 . 我假设它从顶部的 jsx
文件开始处理递归依赖项?在这种情况下,我看到 gruntfile
正在使用 *.jsx
. 我'm confused :). What'是做反应的最佳方法 - gulp-browserify组合?
另一个问题:我注意到结果 app.built.js
包含连接的JavaScript文件,但它很大(17k行) . 我想我错过了缩小步骤但是有一个内置的task / npm模块,它还可以摆脱Google封闭编译器那样的未使用的代码吗?
最后一个问题,如果你能原谅我:
-
npm install -g gulp
-
npm install --save-dev gulp
文章I 've found is not clear on what the diff between the two and why do I need to execute both? Can' t我刚做 npm install -g --save-dev gulp
?我的经验是Ivy和Maven(Java项目)所以我试图在这种情况下看看npm是如何区别的 .
咕噜代码:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
react: {
files: 'react_components/*.jsx',
tasks: ['browserify']
}
},
browserify: {
options: {
transform: [ require('grunt-react').browserify ]
},
client: {
src: ['react_components/**/*.jsx'],
dest: 'scripts/app.built.js'
}
}
});
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', [
'browserify'
]);
};
吞咽代码:
var gulp = require('gulp');
var react = require('gulp-react');
var browserify = require('gulp-browserify');
var gutil = require('gulp-util');
var rename = require('gulp-rename');
gulp.task('default', function() {
var production = gutil.env.type === 'production';
gulp.src(['react_components/app.jsx'], {read: false})
// Browserify, and add source maps if this isn't a production build
.pipe(browserify({
debug: !production,
transform: ['reactify'],
extensions: ['.jsx']
}))
.on('prebundle', function(bundler) {
// Make React available externally for dev tools
bundler.require('react');
})
// Rename the destination file
.pipe(rename('app.built.js'))
// Output to the build directory
.pipe(gulp.dest('scripts/'));
});
1 回答
1 /
reactify
是browserify
的转换 . 您必须使用npm
安装它,但是您不必要求它或直接使用它,browserify
将需要并为您使用它(因为您配置它是这样做的) .Gulp是一个构建工具,而不是依赖/包管理器,这是
npm
的工作 . Leiningen做了两件事,但是必须指定 - 通常只是将文件与库连接就可以了 .2 /我不确定这个,你的错误信息是什么?当你有一个需要应用程序所有模块的入口文件时,我发现Gulp工作得最好,但是Gulp对多个文件没有任何问题 .
3 /您可以使用UglifyJS,项目页面上的示例Gulpfile有示例 . 您可以在
browserify
之后和dest
之前的任何地方管道 .4 /
npm install -g gulp
全局安装Gulp,在本地项目的node_modules
文件夹中为您提供gulp
命令npm install --save-dev gulp
安装Gulp,并在package.json
中添加gulp
作为开发依赖项之一 . 这是必需的,因为新版本的Gulp可能会破坏Gulpfile或某个插件 .gulp
命令由全局Gulp提供,但Gulp文件将针对package.json
中指定的本地版本Gulp运行 .