/
gulpfile.js
132 lines (111 loc) · 3.27 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
var gulp = require('gulp'),
webserver = require('gulp-webserver'),
htmlValidate = require('gulp-w3cjs'),
cssValidate = require('gulp-css-validator'),
jshint = require('gulp-jshint'),
jsstylish = require('jshint-stylish'),
through2 = require('through2'), // required by the code supplied by w3cjs
imageResize = require('gulp-image-resize'),
rename = require('gulp-rename'),
changed = require('gulp-changed'),
beep = require('beepbeep'), //provide audio feedback on errors
chalk = require('chalk'); //color console log output
// TODO: add build task (minification, concatenation, etc.)
// Set your paths here
var paths = {
scripts: ['src/js/*.js'],
styles: ['src/css/*.css'],
images: ['src/images-src/*'],
content: ['src/index.html', 'src/index-bad.html']
}
var dist = {
scripts: ['dist/js/'],
styles: ['dist/css/'],
images: ['dist/images'],
content: ['dist/']
}
// Our live reload webserver
gulp.task('webserver', function(){
gulp.src('src/')
.pipe(webserver({
livereload: true,
open: true,
}));
});
// Validators
gulp.task('validateHtml', function(){
gulp.src(paths.content)
.pipe(htmlValidate())
// code from w3cjs documentation - except if contents
.pipe(through2.obj(function(file, enc, cb){
cb(null, file);
if (!file.w3cjs.success){
beep();
console.log(chalk.bgRed.bold('HTML validation error(s) found'));
}
}));
});
gulp.task('validateCss', function(){
gulp.src(paths.styles)
.pipe(cssValidate())
.on('error', function(err){
beep();
console.log(chalk.bgRed.bold('CSS validation error(s) found'));
});
});
gulp.task('jshint', function(){
gulp.src(paths.scripts)
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
.pipe(through2.obj(function(file, enc, cb){
cb(null, file);
if (!file.jshint.success){
beep();
console.log(chalk.bgRed.bold('Javascript validation error(s) found'));
}
}));
});
// Images
gulp.task('resizeImages', function(){
gulp.src(paths.images)
.pipe(changed('src/images/'))
.pipe(imageResize({
width : 1920,
height : 0,
crop : true,
imageMagick : true
}))
// TODO: add gulp-imagemin?
.pipe(rename(function(path){
path.basename += '@2x';
}))
.pipe(gulp.dest('src/images/'))
.pipe(imageResize({
width : 100,
height : 0,
crop : true,
imageMagick : true
}))
.pipe(rename(function(path){
path.basename += '@1x';
}))
.pipe(gulp.dest('src/images/'));
});
// Thought it may be helpful to have the imageResize options here(Values listed are default):
// width : 0, //Pixel or % value
// height : 0,
// crop : false, // crop image to exactly match width and height
// upscale : false, // If false image is copied instead of resized if it would be upscaled
// gravity : Center, // only has effect if crop is true
// quality : 1, // Range from 0(bad) to 1(lossless) - Only affects JPG
// //format : jpeg, // Defaults to input
// filter : Catrom, // Catrom good for reduction, Hermite for enlarge
// imageMagick : false // Set to true when using ImageMagick
// Watch function to tie it all together
gulp.task('watch', function(){
gulp.watch(paths.content, ['validateHtml']);
gulp.watch(paths.styles, ['validateCss']);
gulp.watch(paths.scripts, ['jshint']);
gulp.watch(paths.images, ['resizeImages']);
});
gulp.task('default', ['webserver', 'watch']);