首页 文章

将grunt脚本转换为gulp

提问于
浏览
1

我是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 回答

  • 0

    1 / reactifybrowserify 的转换 . 您必须使用 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运行 .

相关问题