-
Notifications
You must be signed in to change notification settings - Fork 0
/
gulpfile.babel.js
136 lines (126 loc) · 4.17 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
128
129
130
131
132
133
134
135
136
import gulp from 'gulp';
import sass from 'gulp-sass';
import cleanCSS from 'gulp-clean-css';
import del from 'del';
import autoprefixer from 'gulp-autoprefixer';
import sourcemaps from 'gulp-sourcemaps';
import log from 'gulplog';
import plumber from 'gulp-plumber';
import uglify from 'gulp-uglify';
import useref from 'gulp-useref';
import gulpif from 'gulp-if';
import imagemin from 'gulp-imagemin';
import browserify from 'browserify';
import source from 'vinyl-source-stream';
import buffer from 'vinyl-buffer';
import babelify from 'babelify';
import { assign } from 'lodash';
import watchify from 'watchify';
import browserSync from 'browser-sync';
const bs = browserSync.create();
// Variables
// -----
const bundleFile = "kmeans"
const globalNamespace = "KMeans"
const dirs = {
src: 'src/',
temp: '.tmp/',
dist: 'dist/'
}
const paths = {
src: {
styles: dirs.src + 'styles/',
scripts: dirs.src + 'scripts/',
images: dirs.src + 'images/',
data: dirs.src + 'data/'
},
temp: {
styles: dirs.temp + 'styles/',
scripts: dirs.temp + 'scripts/'
},
dist: {
styles: dirs.dist + 'css/',
scripts: dirs.dist + 'js/',
images: dirs.dist + 'images/',
data: dirs.dist + 'data/'
}
}
// Compile scss files, run autoprefixer and move those into temp folder
// -----
export const scss = () => gulp.src(paths.src.styles + '*.scss')
.pipe(sourcemaps.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false }))
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.temp.styles))
.pipe(bs.stream());
// Run autoprefixer for css files
// -----
export const css = () => gulp.src(paths.src.styles + '**/*.css')
.pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false }))
.pipe(gulp.dest(paths.temp.styles))
.pipe(bs.stream());
// Handle javascripts
// -----
let customOpts = {
entries: './src/scripts/main.js',
debug: true,
transform: [babelify]
};
let opts = assign({}, watchify.args, customOpts);
let b = watchify(browserify(opts, {standalone: 'KMeans'}));
export const scripts = () => {
return b.bundle()
// log errors if they happen
.on('error', log.error.bind(log, 'Browserify Error'))
.pipe(source(bundleFile + '.js'))
// optional, remove if you don't need to buffer file contents
.pipe(buffer())
// optional, remove if you dont want sourcemaps
.pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
// Add transformation tasks to the pipeline here.
.pipe(sourcemaps.write('./')) // writes .map file
.pipe(gulp.dest(paths.temp.scripts));
}
// Minify image
// -----
export const images = () => gulp.src(paths.src.images + "**/*")
.pipe(imagemin())
.pipe(gulp.dest(paths.dist.images));
// Copy example data to dist
// -----
export const data = () => gulp.src(paths.src.data + "**/*")
.pipe(gulp.dest(paths.dist.data));
// Delete dist and temp folders
// -----
export const clean = () => del([dirs.temp + '**', dirs.dist + '**']);
// Serve and watch on local webserver
// -----
export const play = gulp.series(clean, gulp.parallel(scripts, scss, css), () => {
bs.init({
notify: false,
port: 9000,
server: {
baseDir: [dirs.temp, dirs.src]
}
});
gulp.watch(paths.src.styles + "**/*.scss", scss);
gulp.watch(paths.src.styles + "**/*.css", css);
// gulp.watch(paths.src.scripts + "**/*.js").on('change', bs.reload;
gulp.watch([
dirs.src + "*.html",
paths.src.scripts + "**/*.js",
"src/images/**/*"
]).on('change', bs.reload);
b.on('update', scripts); // on any dep update, runs the bundler
b.on('log', log.info); // output build logs to terminal
});
// Create bundle
// -----
export const build = gulp.series(clean, gulp.parallel(scripts, scss, css, images, data), () => {
return gulp.src(dirs.src + "*.html")
.pipe(useref({searchPath: [dirs.temp, dirs.src]}))
.pipe(gulpif('*.css', cleanCSS()))
// .pipe(gulpif('*.js', uglify())) // TODO: fix GulpUglifyError
.pipe(gulp.dest(dirs.dist))
});