将咕噜咕噜的脚本转换为 gulp

Converting a grunt script to gulp

本文关键字：gulp 转换 脚本      更新时间：2023-09-26

我是Grunt，Gulp，Browserify，React的新手，并试图通过尝试使用React和Grunt创建模块化视图组件文章中给出的示例来熟悉它们。我在这里发布的咕噜咕噜文件来自这篇文章。我正在尝试做的是编写一个等效的 gulp 文件来执行相同的操作。我不知何故设法做到了这一点，见下文（当然是通过复制粘贴！但我有点困惑。我见过一些 gulp 文件使用如下内容：

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

但是下面的gulp文件使用转换并传入"reactify"。它甚至不是必需模块的一部分。这是从哪里来的？它是gulp-acting还是Browserify模块的一部分？

如果像莱宁根那样不可用，Gulp 会自动安装丢失的模块吗？

另一个问题是：我通过提供以下内容获得了 gulp 版本的工作：

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

如果我提供react_components/*.jsx，它会抱怨错误。我假设它通过从顶部文件开始来处理递归依赖项jsx？我看到gruntfile在这种情况下正在使用*.jsx。我很困惑:)。做这个反应-吞咽-浏览器组合的最佳方法是什么？

另一个问题：我注意到生成的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'
    ]);
};

咕噜咕噜：

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/reactify 是 browserify 的转换。你必须安装它 npm ，但是您不必要求它或直接使用它，browserify将需要并为您使用它（因为您将其配置为这样做）。

Gulp 是一个构建的工具，而不是依赖项/包管理器，这是 npm 的工作。莱宁根两者都做，但这是它特有的。与 Clojure 相反，对于 JavaScript 来说，两者兼而有之很难做到，因为不必指定脚本的依赖项 - 通常只需将文件与库连接起来就可以了。

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

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

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

相关文章：