-
Notifications
You must be signed in to change notification settings - Fork 9
/
gulpfile.babel.js
127 lines (108 loc) · 2.98 KB
/
gulpfile.babel.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import path from 'path';
import gulp from 'gulp';
import browserify from 'browserify';
import watchify from 'watchify';
import babel from 'gulp-babel';
import source from 'vinyl-source-stream';
import connect from 'gulp-connect';
import sass from 'gulp-sass';
const paths = {
src: './src',
dest: './dist'
};
const input = path.join(paths.src, 'index.js');
const outputName = {
dev: 'react-picker.dev.js',
prod: 'react-picker.min.js',
};
gulp.task('watch', () => {
const opts = Object.assign({}, watchify.args, {
entries: [input],
debug: true,
});
const bundler = watchify(browserify(opts));
bundler.transform('babelify', {presets: ['es2015', 'react']});
function bundle() {
bundler.bundle()
.on('error', console.log)
.pipe(source(outputName.dev))
.pipe(gulp.dest(paths.dest))
.pipe(connect.reload());
}
bundle(bundler);
bundler.on('update', bundle);
bundler.on('log', console.log);
});
gulp.task('dev', () => {
browserify(input)
.transform('babelify', {presets: ['es2015', 'react']})
.bundle()
.pipe(source(outputName.dev))
.pipe(gulp.dest(paths.dest));
});
gulp.task('prod', () => {
browserify(input)
.transform('envify', {global: true, _: 'purge', NODE_ENV: 'production'})
.transform('babelify', {presets: ['es2015', 'react']})
.transform('uglifyify', {global: true})
.bundle()
.pipe(source(outputName.prod))
.pipe(gulp.dest(paths.dest));
});
// before release, build the styles for the component
gulp.task('build-scss', () => {
// Build sass
return gulp.src('styles/index.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('styles/'))
.pipe(connect.reload());
});
gulp.task('babel', () => {
return gulp.src(path.join(paths.src, '**/*.js'))
.pipe(babel())
.pipe(gulp.dest(paths.dest))
});
// Kick off a server to run the example app
gulp.task('example-server', () => {
connect.server({
root: 'docs/',
livereload: true,
});
});
// Watch and build the example app
gulp.task('example-watch-js', () => {
const opts = Object.assign({}, watchify.args, {
entries: 'docs/script.js',
debug: true,
});
const bundler = watchify(browserify(opts));
bundler.transform('babelify', {presets: ['es2015', 'react']});
function bundle() {
bundler.bundle()
.on('error', console.log)
.pipe(source('docs/bundle.js'))
.pipe(connect.reload())
.pipe(gulp.dest('docs/dist'))
}
bundle(bundler);
bundler.on('update', bundle);
bundler.on('log', console.log);
});
gulp.task('example-watch-scss', () => {
return gulp.watch('docs/*.scss', ['example-build-scss'])
});
gulp.task('example-build-scss', () => {
// Build sass
return gulp.src('docs/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('docs/css'))
.pipe(connect.reload());
});
gulp.task('example', [
'example-server',
'example-watch-js',
'example-build-scss',
'example-watch-scss',
'watch',
]);
gulp.task('default', ['babel', 'dev', 'prod', 'build-scss']);