将grunt脚本转换为gulp

我是Grunt，Gulp，Browserify，React的新成员，并尝试通过在Creating Modular View Components with React and Grunt article上给出的示例进行实验来尝试熟悉它们。我在这里发布的咕噜文件来自这篇文章。我想要做的是写一个相同的吞咽文件，做同样的事情。我以某种方式设法做到这一点，见下文（当然，通过复制粘贴！）但我有点困惑。我已经使用像看到了一些一饮而尽文件：将grunt脚本转换为gulp

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

但低于一饮而尽文件使用转换并传递“reactify”。它甚至不是需求模块的一部分。那个是从哪里来的？它是吞噬反应还是Browserify模块的一部分？

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

另一个问题是：我得到了一口版本提供工作：

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

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

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

npm install -g gulp
npm install --save-dev gulp

我发现的文章不是什么两个，为什么之间的差异做我清楚需要执行两者？我不能只是做npm install -g --save-dev gulp？我的经验是与常春藤和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/')); 
});

来源

2014-04-01 StephenNYC

1/reactify为browserify的转化。您必须使用npm进行安装，但您无需直接使用它，browserify将需要并使用它（因为您已将其配置为这样做）。

Gulp是一个内置的工具，而不是依赖/包管理器，这是npm的工作。莱宁宁既做到了这一点，但这是特定的。对Clojure来说，做这两件事很难做到，因为不需要指定脚本的依赖关系 - 通常只需要将这些文件与库结合即可。

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

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

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

来源

2014-05-01 13:17:01 tungd

将grunt脚本转换为gulp

回答

相关问题