將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

回答

相關問題