Question

我开始在React中编写一个新的应用程序，然后我复制 - 从之前的项目中粘贴我的gulp配置。我不记得我是如何创建这个gulp配置的，所以请帮助我理解那里的内容。

问题是我编译的React应用程序非常大。它的大小几乎是2MB，所有这一切只有＆＃34; var React = require（＆＃39; react＆＃39;）;＆＃34;在我的主文件中。

这是gulpfile.js

＆＃13;

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var browserify = require('browserify');
var es6ify = require('es6ify');
var plumber = require('gulp-plumber');
var tap        = require("gulp-tap");
var gutil      = require('gulp-util');
var babelify = require('babelify');


//script to not need to require
/*var plugins = require("gulp-load-plugins")({
	pattern: ['gulp-*', 'gulp.*', 'main-bower-files'],
	replaceString: /\bgulp[\-.]/
});*/

var dest = 'src/'; 

function handleError(err) {
  console.log(err.toString());
  this.emit('end');
}
 

gulp.task('serve', ['sass', 'renderjs'], function() {

    browserSync.init({
        browser: "chrome",
        server: "./app",
        port: 3000
        
    });

    gulp.watch("src/scss/*.scss", ['sass']);
    gulp.watch("app/*.html").on('change', browserSync.reload);
    gulp.watch("app/**/*.php").on('change', browserSync.reload); 
    gulp.watch("assets/**/*").on("change", browserSync.reload);
    gulp.watch("src/react/**/*.js", ['renderjs']);  
     gulp.watch("src/react/**/*.jsx", ['renderjs']);  
     
});



// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("src/scss/*.scss")
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream());
});



 

var dest = "assets/";

function build2(){
    return gulp.src("src/react/main.js")
    .pipe(plumber())
    .pipe(tap(
        function(file)
        {
            var d = require('domain').create();
            d.on("error",
                function(err){
                    gutil.log(gutil.colors.red("Browserify compile error:"), err.message, "\n\t", gutil.colors.cyan("in file"), file.path);
                      gutil.beep();
                }
            );
            
            d.run(function(){
               file.contents = browserify({
                   entries: [file.path],
                   transform: [babelify.configure({
                       presets: ['react', 'es2015'],
                       plugins: ['transform-es2015-modules-commonjs']
                   })],
                   debug: true
               }).bundle();
            });
        }
    ))
    .pipe(gulp.dest('app/js'));
};

gulp.task('renderjs', build2);


gulp.task('default', ['serve']);

＆＃13;

Web上的大多数人都告诉我编辑我的Webpack配置，但我非常确定Webpack不会用于此配置。

我的package.json看起来像这样：

＆＃13;

{
  "name": "y",
  "version": "0.0.1", 
  "description": "A web app for ...",
  "main": "gulpfile.js",
  "dependencies": {
    "browser-sync": "^2.18.5",
    "flux": "^3.1.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-load-plugins": "^1.4.0",
    "gulp-sass": "^3.0.0",
    "main-bower-files": "^2.13.1", 
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-form-data": "^0.2.3"
  },
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "babel-core": "^6.21.0",
    "babel-jest": "^18.0.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.22.0",
    "babel-plugin-transform-react-require": "^1.0.1",
    "babel-polyfill": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babelify": "^7.3.0",
    "browser-sync": "^2.18.6",
    "browserify": "^13.3.0",
    "domain": "0.0.1",
    "es6ify": "^1.6.0",
    "gulp-babel": "^6.1.2",
    "gulp-browserify": "^0.5.1",
    "gulp-plumber": "^1.1.0",
    "gulp-react": "^3.1.0",
    "gulp-reactify": "^3.0.1",
    "gulp-tap": "^0.1.3",
    "gulp-util": "^3.0.8",
    "jest": "^18.1.0",
    "react-hot-loader": "^1.3.1",
    "react-router": "^3.0.2",
    "reactify": "^1.1.1",
    "vinyl-source-stream": "^1.1.0",
    "vinyl-transform": "^1.0.0",
    "watchify": "^3.8.0",
    "webpack": "^1.14.0",
    "webpack-dev-middleware": "^1.9.0",
    "webpack-hot-middleware": "^2.15.0",
    "webpack-module-hot-accept": "^1.0.4",
    "webpack-stream": "^3.2.0"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/eightmd/SUN-Calculator.git"
  },
  "author": "",
  "license": "ISC",
  "homepage": "https://bitbucket.org/MikeMrk/crud#readme"
}

＆＃13;

我该怎么办？谢谢！

如何使编译的反应文件更小？

0 个答案: