Question

我希望将所有内容合并到一个缩小的JS文件中，并将main.js的内容放在最后。下面在正确的目的地输出缩小的文件，但它似乎忽略了顺序。任何帮助将不胜感激。

        var data = [
      {id : "1", name : "Item name 1", quality : "bad"},
      {id : "2", name : "Item name 2", quality : "good"},
      {id : "3", name : "Item name 3", quality : "unknown"},
      {id : "4", name : "Item name 4", quality : "good"},
      {id : "5", name : "Item name 5", quality : "good"},
      {id : "6", name : "Item name 6", quality : "bad"}
    ];

    const qualityType = {
      'good': 'good',
      'bad': 'bad',
      'unknown': 'unknown'
    };

    function enumFormatter(cell, row, enumObject) {
      return enumObject[cell];
    }
class FilterBtn extends React.Component{
    constructor(){
    super();
    this.handleBtnClick = this.handleBtnClick.bind(this);
  }
    handleBtnClick(){
    this.props.callAF();
  }
  render(){
    return (
            <button 
                onClick={ this.handleBtnClick } 
        className='btn btn-default'>
        Click to apply select filter
            </button>
        );
  }
}
class BigTable extends React.Component{
    constructor(){
    super();
    this.state={
        data: data
    }
  }
  componentWillReceiveProps(nextProps){
    if(this.props.applyFilter !== nextProps.applyFilter){
        this.refs.nameCol.applyFilter('good');  
    }
  }
  render(){
    return(
            <div>
                <BootstrapTable data={data}>
                    <TableHeaderColumn 
            dataField='id' 
            isKey>
            Product ID
                    </TableHeaderColumn>
                    <TableHeaderColumn 
            dataField='name'>
            Product Name
                    </TableHeaderColumn>
                    <TableHeaderColumn 
            ref='nameCol' 
            dataField='quality' 
            filterFormatted 
            dataFormat={ enumFormatter }
                        formatExtraData={ qualityType } 
            filter={{ 
                type: 'SelectFilter', 
              options: qualityType 
                        }}>
            Product Quality
                    </TableHeaderColumn>
                </BootstrapTable>
            </div>
        );
  }
}
class MainClass extends React.Component{
    constructor(){
    super();
    this.state = {
        applyFilter : false
    }
    this.callAFF = this.callAFF.bind(this);
  }
  callAFF(){
    this.setState({
        applyFilter: true
    });
  }
  render(){
    return (
        <div>
        <FilterBtn 
            callAF={
                this.callAFF
            }/>
         <BigTable
            applyFilter={this.state.applyFilter}/>
      </div>
    );
  }
}
ReactDOM.render(
    <MainClass/>,
    document.querySelector("#container")
);

}）;

Answer 1

尝试在concat之前运行uglify。我认为uglify与订单混淆。请尝试以下方法：

// Filepaths
var themepath = 'wp/wp-content/themes/themename'


// optimise scripts
gulp.task('scripts', function() {
    return gulp.src('build/scripts/**/*.js')
    .pipe(order(['build/scripts/plugins/**/*.js','build/scripts/main.js']))
    .pipe(uglify())
    .pipe(concat('main-min.js'))
    .pipe(plumber())
    .on('error', errorLog)
    .pipe(gulp.dest(themepath + '/assets/scripts/min/'))
    .pipe(browserSync.stream());
});

Answer 2

好吧我明白了。

因为您在gulp.src的预定义流中指定了顺序。您需要指定相对于原始gulp.src路径的顺序，I.E。从订单路径中删除了构建/脚本：

.pipe(order(['plugins/**/*.js', 'main.js']))

Gulp连接插件和主脚本然后缩小

2 个答案: