将 grunt 脚本转换为 gulp

Question

我是 Grunt、Gulp、Browserify、React 的新手，并尝试通过在 Creating Modular View Components with React and Grunt article 中给出的示例来熟悉它们。我在这里发布的 grunt 文件来自文章。我想要做的是编写一个等效的 gulp 文件。我以某种方式设法做到了，见下文（当然是通过复制粘贴！）但我有点困惑。我见过一些 gulp 文件使用类似的东西：

.pipe(react())
.pipe(browserify())

但是下面的 gulp 文件使用了 transform 并传入了“reactify”。它甚至不是必需模块的一部分。那个是从哪里来的？它是 gulp-react 或 Browserify 模块的一部分吗？

如果缺少的模块像 Leiningen 一样不可用，Gulp 会自动安装它吗？

另一个问题是：我得到了 gulp 版本通过提供：

gulp.src(['react_components/app.jsx']

如果我提供react_components/*.jsx，它会抱怨错误。我假设它通过从顶部 jsx 文件开始来处理递归依赖项？我看到gruntfile 在这种情况下使用*.jsx。我很困惑 ：）。执行此 react-gulp-browserify 组合的最佳方法是什么？

另一个问题：我注意到生成的 app.built.js 包含连接的 JavaScript 文件，但它很大（17k 行）。我想我错过了缩小步骤，但是是否有一个内置的任务/npm 模块也可以像 Google 闭包编译器那样摆脱未使用的代码？

最后一个问题，如果你能原谅我的话：

1. npm install -g gulp
2. npm install --save-dev gulp

我发现的文章不清楚两者之间的差异以及为什么我需要同时执行这两者？我不能只做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'
    ]);
};

Gulp 代码：

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/'));
});

Answer 1

1/reactify 是browserify 的转换。您必须使用npm 安装它，但是您不必要求它或直接使用它，browserify 将要求并为您使用它（因为您已将其配置为这样做）。

Gulp 是一个内置工具，而不是依赖项/包管理器，这是 npm 的工作。 Leiningen 两者都做，但那是它特有的。与 Clojure 相比，对于 JavaScript 来说两者都很难做到，因为不必指定脚本的依赖关系 - 通常只需将文件与库连接就可以了。

2/ 我不确定，你的错误信息是什么？我发现当你有一个需要应用程序所有模块的入口文件时，Gulp 工作得最好，但 Gulp 对多个文件没有问题。

3/ 你可以使用 UglifyJS，项目页面上的示例 Gulpfile 有它的示例。您可以在browserify 和dest 之前的任何位置使用管道传输它。

4/ npm install -g gulp 全局安装 Gulp，为您提供 gulp 命令，npm install --save-dev gulp 在本地项目的 node_modules 文件夹中安装 Gulp，并将 gulp 添加为 package.json 中的开发依赖项之一。这是必需的，因为新版本的 Gulp 可能会破坏 Gulpfile 或某些插件。 gulp 命令由全局 Gulp 提供，但 Gulp 文件将针对 package.json 中指定的本地 Gulp 版本运行。