-
Notifications
You must be signed in to change notification settings - Fork 0
/
gulpfile.js
110 lines (95 loc) · 2.85 KB
/
gulpfile.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
const autoprefixer = require('gulp-autoprefixer');
const concat = require('gulp-concat');
const cssnano = require('gulp-cssnano');
const fs = require('fs');
const gulp = require('gulp');
const gulpIf = require('gulp-if');
const gutil = require('gulp-util');
const header = require('gulp-header');
const htmlmin = require('gulp-htmlmin');
const process = require('process');
const replace = require('gulp-replace');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const ENV = process.env.ENV || 'dev';
let ASSET_PATH = '/dist/assets';
if (ENV === 'production') {
ASSET_PATH = '/assets';
}
gulp.task('markup', ['styles'], () => {
return gulp.src('markup/**/*.html')
.pipe(replace('{{inline-css}}', (...args) => {
return `
<style type="text/css">
${fs.readFileSync('dist/assets/styles/app.css', 'utf-8')}
</style>
`;
}))
.pipe(replace(/{{([a-z]+)\s+?([a-z]+=".*")}}/gi, (...args) => {
const [match, type, rawAttrs, position] = args;
const attrs = rawAttrs.split(' ').reduce((acc, attr) => {
const [key, value] = attr.split('=');
acc[key] = value.replace(/\"/gi, '');
return acc;
}, {});
switch(type) {
case 'assetpath':
return ASSET_PATH;
break;
case 'asset':
const package = require('./package.json');
const cacheBust = `?version=${package.version}`;
switch(attrs.type) {
case 'style':
return `${ASSET_PATH}/styles/app.css${cacheBust}`;
break;
case 'script':
return `${ASSET_PATH}/scripts/app.js${cacheBust}`;
break;
case 'image':
return `${ASSET_PATH}/images/${attrs.name}${cacheBust}`;
}
break;
}
return '';
}))
.pipe(gulpIf(ENV === 'production', htmlmin()))
.pipe(gulp.dest('dist/'));
});
gulp.task('styles', () => {
const vars = `
$font-path: "${ASSET_PATH}/fonts/";
`;
return gulp.src([
'assets/styles/app.scss',
])
.pipe(header(vars))
.pipe(sass().on('error', sass.logError))
.pipe(gulpIf(ENV !== 'production', sourcemaps.init()))
.pipe(autoprefixer({
browsers: [
'Android >= 4.4',
'last 2 versions',
'last 4 iOS versions',
],
}))
.pipe(gulpIf(ENV === 'production', cssnano()))
.pipe(gulpIf(ENV !== 'production', sourcemaps.write()))
.pipe(concat('app.css'))
.pipe(gulp.dest('dist/assets/styles/'));
});
gulp.task('images', () => {
return gulp.src([
'assets/images/**/*',
]).pipe(gulp.dest('dist/assets/images/'));
});
gulp.task('watch', ['build',], () => {
gulp.watch('assets/styles/**/*', ['markup']);
gulp.watch([
'markup/**/*.html',
], ['markup']);
});
gulp.task('build', [
'images',
'markup',
]);