-
Notifications
You must be signed in to change notification settings - Fork 0
/
gulpfile.babel.js
127 lines (111 loc) · 3.08 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 gulp from 'gulp';
import autoprefixer from 'autoprefixer';
import browserify from 'browserify';
import watchify from 'watchify';
import source from 'vinyl-source-stream';
import buffer from 'vinyl-buffer';
import eslint from 'gulp-eslint';
import babelify from 'babelify';
import uglify from 'gulp-uglify';
import rimraf from 'rimraf';
import notify from 'gulp-notify';
import browserSync, { reload } from 'browser-sync';
import sourcemaps from 'gulp-sourcemaps';
import postcss from 'gulp-postcss';
import nested from 'postcss-nested';
import vars from 'postcss-simple-vars';
import extend from 'postcss-simple-extend';
import cssnano from 'cssnano';
import htmlReplace from 'gulp-html-replace';
import imagemin from 'gulp-imagemin';
import pngquant from 'imagemin-pngquant';
import runSequence from 'run-sequence';
const paths = {
bundle: 'app.js',
srcJsx: 'src/Index.js',
srcCss: 'src/**/*.css',
srcImg: 'src/images/**',
dist: 'dist',
distJs: 'dist/js',
distImg: 'dist/images'
};
const customOpts = {
entries: [paths.srcJsx],
debug: true
};
const opts = Object.assign({}, watchify.args, customOpts);
gulp.task('clean', cb => {
rimraf('dist', cb);
});
gulp.task('browserSync', () => {
browserSync({
server: {
baseDir: './'
}
});
});
gulp.task('watchify', () => {
let bundler = watchify(browserify(opts));
function rebundle() {
return bundler.bundle()
.on('error', notify.onError())
.pipe(source(paths.bundle))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(paths.distJs))
.pipe(reload({stream: true}));
}
bundler.transform(babelify)
.on('update', rebundle);
return rebundle();
});
gulp.task('browserify', () => {
browserify(paths.srcJsx, {debug: true})
.transform(babelify)
.bundle()
.pipe(source(paths.bundle))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(paths.distJs));
});
gulp.task('styles', () => {
gulp.src(paths.srcCss)
.pipe(sourcemaps.init())
.pipe(postcss([vars, extend, nested, autoprefixer, cssnano]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(paths.dist))
.pipe(reload({stream: true}));
});
gulp.task('htmlReplace', () => {
gulp.src('index.html')
.pipe(htmlReplace({css: 'styles/main.css', js: 'js/app.js'}))
.pipe(gulp.dest(paths.dist));
});
gulp.task('images', () => {
gulp.src(paths.srcImg)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest(paths.distImg));
});
gulp.task('lint', () => {
gulp.src(paths.srcJsx)
.pipe(eslint())
.pipe(eslint.format());
});
gulp.task('watchTask', () => {
gulp.watch(paths.srcCss, ['styles']);
gulp.watch(paths.srcJsx, ['lint']);
});
gulp.task('watch', cb => {
runSequence('clean', ['browserSync', 'watchTask', 'watchify', 'styles', 'lint', 'images'], cb);
});
gulp.task('build', cb => {
process.env.NODE_ENV = 'production';
runSequence('clean', ['browserify', 'styles', 'htmlReplace', 'images'], cb);
});