# 构建工具

# rollup

安装rollup

npm install rollup --save-dev
1

rollup.config.js

export default {
    entry: 'src/main.js',
    dest: 'build/bundle.js'
}
1
2
3
4

src/math.js

export function square(x) {
    return x * x;
}
export function cube(x) {
    return x * x * x;
}
1
2
3
4
5
6

src/main.js

import {cube} from './maths.js'
console.log(cube(5));
1
2

运行rollup -c

# gulp

安装gulp

npm install gulp --save-dev
1

创建 gulpfile.js

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var paths = {
    scripts: ['js/index.js', 'js/main.js']
}
gulp.task('default', function(){
    gulp.src('js/*.js')
    .pipe(uglify())
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('build'));
});
1
2
3
4
5
6
7
8
9
10
11
12

安装压缩合并插件

npm install gulp-uglify gulp-concat --save-dev
1

在 js 文件夹下创建 index.js main.js index.js

var index = {};
index = {
    test: function(argument) {
        console.log('test');
    }
}
index.test();
1
2
3
4
5
6
7

main.js

var main = main || {};
main.test = function() {
    console.log('main test');
}
me.test();
1
2
3
4
5

在index.html 中引入index.js 执行 gulp 在build文件夹下可以看到打包合并的文件