-
Notifications
You must be signed in to change notification settings - Fork 0
/
gulpfile.js
227 lines (187 loc) · 7.11 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
// Generated on 2015-05-04 using generator-jekyllized 0.7.3
"use strict";
var gulp = require("gulp");
var gulpSequence = require('gulp-sequence');
// Loads the plugins without having to list all of them, but you need
// to call them as $.pluginname
var $ = require("gulp-load-plugins")();
// "del" is used to clean out directories and such
var del = require("del");
// BrowserSync isn"t a gulp package, and needs to be loaded manually
var browserSync = require("browser-sync");
var elm = require('gulp-elm');
var fs = require('fs');
// merge is used to merge the output from two different streams into the same stream
var merge = require("merge-stream");
// Need a command for reloading webpages using BrowserSync
var plumber = require("gulp-plumber");
var reload = browserSync.reload;
// And define a variable that BrowserSync uses in its function
var bs;
var wiredep = require('wiredep').stream;
// Deletes the directory that is used to serve the site during development
gulp.task("clean:dev", function(cb) {
return del(["serve"], cb);
});
// Deletes the directory that the optimized site is output to
gulp.task("clean:prod", function(cb) {
return del(["dist"], cb);
});
// Compiles the SASS files and moves them into the "assets/stylesheets" directory
gulp.task("styles", function () {
// Looks at the style.scss file for what to include and creates a style.css file
return gulp.src("src/assets/scss/style.scss")
.pipe(plumber())
.pipe($.sass())
.on('error', function(err){
browserSync.notify("SASS error");
console.error(err.message);
// Save the error to index.html, with a simple HTML wrapper
// so browserSync can inject itself in.
fs.writeFileSync('serve/index.html', "<!DOCTYPE HTML><html><body><pre>" + err.message + "</pre></body></html>");
// No need to continue processing.
this.emit('end');
})
// AutoPrefix your CSS so it works between browsers
.pipe($.autoprefixer("last 1 version", { cascade: true }))
// Directory your CSS file goes to
.pipe(gulp.dest("serve/assets/stylesheets/"))
// Outputs the size of the CSS file
.pipe($.size({title: "styles"}))
// Injects the CSS changes to your browser since Jekyll doesn"t rebuild the CSS
.pipe(reload({stream: true}));
});
// Optimizes the images that exists
gulp.task("images", function () {
return gulp.src("src/assets/images/**")
.pipe($.changed("dist/assets/images"))
.pipe($.imagemin({
// Lossless conversion to progressive JPGs
progressive: true,
// Interlace GIFs for progressive rendering
interlaced: true
}))
.pipe(gulp.dest("dist/assets/images"))
.pipe($.size({title: "images"}));
});
// Copy over fonts to the "dist" directory
gulp.task("fonts", function () {
return gulp.src("src/assets/fonts/**")
.pipe(gulp.dest("dist/assets/fonts"))
.pipe($.size({ title: "fonts" }));
});
// Copy index.html and CNAME files to the "serve" directory
gulp.task("copy:dev", ["copy:bower"], function () {
return gulp.src(["src/index.html", "src/CNAME", "src/js/**/*", "src/assets/images/**/*"])
.pipe(gulp.dest("serve"))
.pipe($.size({ title: "index.html & CNAME" }))
});
// Copy bower.
gulp.task("copy:bower", function () {
return gulp.src(["bower_components/**/*"])
.pipe(gulp.dest("serve/bower_components"))
.pipe($.size({ title: "Bower" }))
});
// Copy images.
gulp.task("copy:images", function () {
return gulp.src([])
.pipe(gulp.dest("serve/assets/images"))
.pipe($.size({ title: "Assets images" }))
});
gulp.task("cname", function () {
return gulp.src(["serve/CNAME"])
.pipe(gulp.dest("dist"))
.pipe($.size({ title: "CNAME" }))
});
gulp.task('bower', function () {
gulp.src("src/index.html")
.pipe(wiredep())
.pipe(gulp.dest("serve"));
});
// Optimizes all the CSS, HTML and concats the JS etc
gulp.task("minify", ["styles"], function () {
var assets = $.useref.assets({searchPath: "serve"});
return gulp.src("serve/**/*.*")
// Concatenate JavaScript files and preserve important comments
.pipe($.if("*.js", $.uglify({preserveComments: "some"})))
// Minify CSS
.pipe($.if("*.css", $.minifyCss()))
// Start cache busting the files
.pipe($.revAll({ ignore: ["index.html", ".eot", ".svg", ".ttf", ".woff"] }))
.pipe(assets.restore())
// Replace the asset names with their cache busted names
.pipe($.revReplace())
// Minify HTML
.pipe($.if("*.html", $.htmlmin({
removeComments: true,
removeCommentsFromCDATA: true,
removeCDATASectionsFromCDATA: true,
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeAttributeQuotes: true,
removeRedundantAttributes: true
})))
// Send the output to the correct folder
.pipe(gulp.dest("dist"))
.pipe($.size({title: "optimizations"}));
});
// Task to upload your site to your GH Pages repo
gulp.task("deploy", [], function () {
// Deploys your optimized site, you can change the settings in the html task if you want to
return gulp.src("dist/**/*")
.pipe($.ghPages({branch: "gh-pages"}));
});
gulp.task('elm-init', elm.init);
gulp.task('elm', ['elm-init'], function(){
return gulp.src('src/elm/Main.elm')
.pipe(plumber())
.pipe(elm())
.on('error', function(err) {
console.error(err.message);
browserSync.notify("Elm compile error", 5000);
// Save the error to index.html, with a simple HTML wrapper
// so browserSync can inject itself in.
fs.writeFileSync('serve/index.html', "<!DOCTYPE HTML><html><body><pre>" + err.message + "</pre></body></html>");
})
.pipe(gulp.dest('serve'));
});
// BrowserSync will serve our site on a local server for us and other devices to use
// It will also autoreload across all devices as well as keep the viewport synchronized
// between them.
gulp.task("serve:dev", ["build"], function () {
bs = browserSync({
notify: true,
// tunnel: "",
server: {
baseDir: "serve"
}
});
});
// These tasks will look for files that change while serving and will auto-regenerate or
// reload the website accordingly. Update or add other files you need to be watched.
gulp.task("watch", function () {
// We need to copy dev, so index.html may be replaced by error messages.
gulp.watch(["src/index.html", "src/js/**/*.js"], ["copy:dev", reload]);
gulp.watch(["src/elm/**/*.elm"], ["elm", "copy:dev", reload]);
gulp.watch(["src/assets/scss/**/*.scss"], ["styles", "copy:dev", reload]);
});
// Serve the site after optimizations to see that everything looks fine
gulp.task("serve:prod", function () {
bs = browserSync({
notify: false,
// tunnel: true,
server: {
baseDir: "dist"
}
});
});
// Default task, run when just writing "gulp" in the terminal
gulp.task("default", ["serve:dev", "watch"]);
// Builds the site but doesnt serve it to you
// @todo: Add "bower" here
gulp.task("build", gulpSequence("clean:dev", ["styles", "copy:dev", "elm"]));
// Builds your site with the "build" command and then runs all the optimizations on
// it and outputs it to "./dist"
gulp.task("publish", ["build", "clean:prod"], function () {
gulp.start("minify", "cname", "images", "fonts");
});