减少Gulp的长建设时间

时间:2017-06-29 13:24:27

标签: javascript reactjs build gulp

我的构建任务如下。对于任何文件中的每个更改,每次大约需要30s-60s。发展太久了。我怎样才能改进它?或者有没有办法快速看到发展环境的变化?

gulp.task('build', function () {
  return gulp.src([
      filePath + '/Scripts/js/desktop/pages/Index.js'
    ])
    .pipe(concatJs("app.js"))
    .pipe(gulp.dest(filePath + '/scripts/js/desktop/bundle'))
    .pipe(rollup({
      allowRealFiles: true,
      "format": "iife",
      "plugins": [
        resolve({
          module: true,
          browser:true
        }),
        commonjs({
            namedExports: {
                'node_modules/react/react.js': ['Component', 'Children', 'createElement', 'PropTypes']
            }
        }),
        require("rollup-plugin-babel")({
          "presets": [["es2015", { "modules": false }]],
          "plugins": ["external-helpers"],
          "exclude": './node_modules/**'
        }),
        replace({
          'process.env.NODE_ENV': JSON.stringify( 'production' )
        })
      ],
      entry: filePath + '/scripts/js/desktop/bundle/app.js'
    }))
    .pipe(gulp.dest(filePath + '/build/scripts/'));
});

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';

import Index from '../pages/MyAccount/Index';
import FAQ from '../pages/FAQ/Index';
import Header from '../components/Header/Header';
import Breadcrumb from '../components/Breadcrumb/Breadcrumb';
import Footer from '../components/Footer/Footer';
import reducers from '../../reducers/index';


const store = applyMiddleware(ReduxPromise)(createStore);

class Pager extends React.Component {

    constructor(props) {
        super(props);
    }

    render(){

            const history = createHistory();

            return (
                <Provider store={store(reducers)}>
                        <Router history={history}>
                            <div>
                                <Header />
                                <div className="hb-container">
                          <Breadcrumb id={1}/>
                        </div>
                                <div className="clearfix"></div>
                                <div className="hb-container">
                                    <Route path="/hesabim" component={Index}  />
                                    <Route path="/yardim" component={FAQ}  />
                                </div>
                                <Footer/>
                            </div>
                        </Router>
                </Provider>
        );
    }

};

let root = document.getElementById('root');
ReactDOM.render(<Pager {...(root.dataset) } />,
root);

构建完成后,app.js约为810 KB。

0 个答案:

没有答案