-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Gulpfile.js
131 lines (121 loc) · 3.34 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
// Dependencies
const gulp = require('gulp');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const sourcemaps = require('gulp-sourcemaps');
const sassGlob = require('gulp-sass-glob');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const imagemin = require('gulp-imagemin');
const rename = require('gulp-rename');
const babel = require('gulp-babel');
const browserSync = require('browser-sync').create();
// Some config data for our tasks
const config = {
styles: {
sass: 'assets/sass/style.scss',
srcDir: 'assets/sass',
dest: 'assets/css'
},
scripts: {
js: './assets/js/**/*.js',
dest: './assets/js'
},
images: {
srcDir: './assets/img/*',
dest: './assets/img'
},
browserSync: {
active: false,
localURL: 'mylocalsite.local'
}
};
function styles() {
return gulp.src(config.styles.sass)
.pipe(sourcemaps.init()) // Sourcemaps need to init before compilation
.pipe(sassGlob()) // Allow for globbed @import statements in SCSS
.pipe(sass()) // Compile
.on('error', sass.logError) // Error reporting
.pipe(postcss([
autoprefixer(), // Autoprefix resulting CSS
cssnano() // Minify
]))
.pipe(rename({ // Rename to .min.css
suffix: '.min'
}))
.pipe(sourcemaps.write()) // Write the sourcemap files
.pipe(gulp.dest(config.styles.dest)) // Drop the resulting CSS file in the specified dir
.pipe(browserSync.stream());
}
function scripts() {
return gulp.src(config.scripts.js)
.pipe(sourcemaps.init())
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(concat('pledges.js')) // Concatenate
.pipe(uglify()) // Minify + compress
.pipe(rename({
suffix: '.min'
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(config.scripts.dest))
.pipe(browserSync.stream());
}
function images() {
// Optimize Images
return gulp
.src(config.images.srcDir)
.pipe(
imagemin([
imagemin.gifsicle({ interlaced: true }),
imagemin.jpegtran({ progressive: true }),
imagemin.optipng({ optimizationLevel: 5 }),
imagemin.svgo({
plugins: [
{
removeViewBox: false,
collapseGroups: true
}
]
})
])
)
.pipe(gulp.dest(config.images.dest));
}
// Injects changes into browser
function browserSyncTask() {
if (config.browserSync.active) {
browserSync.init({
proxy: config.browserSync.localURL
});
}
}
// Reloads browsers that are using browsersync
function browserSyncReload(done) {
browserSync.reload();
done();
}
// Watch directories, and run specific tasks on file changes
function watch() {
gulp.watch(config.styles.srcDir, styles);
gulp.watch(config.scripts.js, scripts);
// Reload browsersync when PHP files change, if active
if (config.browserSync.active) {
gulp.watch('./**/*.php', browserSyncReload);
}
}
// export tasks
exports.styles = styles;
exports.scripts = scripts;
exports.images = images;
exports.watch = watch;
// What happens when we run gulp?
gulp.task('default',
gulp.series(
gulp.parallel(styles, scripts), // First run these tasks asynchronously
gulp.parallel(watch, browserSyncTask) // Then start watching files and browsersyncing
)
);