-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathgulpfile.js
95 lines (84 loc) · 2.74 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
const config = {
img_src: 'src/assets/_img',
img_dest: 'src/assets/img',
imgmin_quality: 70
}
const fs = require('fs')
const gulp = require('gulp')
const imagemin = require('gulp-imagemin')
const mozjpeg = require('imagemin-mozjpeg')
const pngquant = require('imagemin-pngquant')
const cache = require('gulp-cache') // 缓存压缩图片，避免重复压缩
gulp.task('imgmin', function () {
gulp.src(`${config.img_src}/**/*.{jpg,jpeg,png}`)
.pipe(cache(imagemin(
[mozjpeg({ quality: config.imgmin_quality }), pngquant({ quality: config.imgmin_quality })])))
.pipe(gulp.dest(config.img_dest))
})
// webp
// generate .webp image
// html <img> src -> data-src
// css -> add .__webp__ className
// append <head> __webp__.js
gulp.task('webp', ['generateWebp', 'webpcss', 'webphtml'])
const generateWebp = require('gulp-webp')
gulp.task('generateWebp', function () {
gulp.src('dist/**/*.{png,jpg,jpeg}')
.pipe(generateWebp())
.pipe(gulp.dest('./dist'))
})
const webpcss = require('gulp-webpcss')
const cssnano = require('gulp-cssnano');
gulp.task('webpcss', function () {
gulp.src("dist/**/*.css")
.pipe(webpcss({
webpClass: '.__webp__',
replace_from: /\.(png|jpg|jpeg)/,
replace_to: '.webp',
}))
.pipe(cssnano())
.pipe(gulp.dest("./dist"))
})
const cheerio = require('gulp-cheerio')
gulp.task('webphtml', function () {
return gulp
.src('dist/**/*.html')
.pipe(cheerio(function ($, file) {
// 插入webp.js
var webpJs = fs.readFileSync('__webp__.js', 'utf-8');
$('head').append(`<script id="__webp__">${webpJs}</script>`)
$('img[src]:not(.not-webp)').each(function () {
var imgEl = $(this)
var src = imgEl.attr('src')
if (/^http|\.(gif|svg)$/.test(src)) return
imgEl.css('visibility','hidden')
imgEl.removeAttr('src')
imgEl.attr('data-src', src)
})
if ($('#__webp__').length > 0) return
}))
.pipe(gulp.dest('dist'))
})
// 雪碧图
// _
const spritesmith = require('gulp.spritesmith')
const gulpIf = require('gulp-if')
var buffer = require('vinyl-buffer');
gulp.task('sprites', function () {
// 读取 sprites
let spritesList = fs.readdirSync('_sprites_src')
let sprites = gulp.src('_sprites_src/*/*.{jpg,png}')
spritesList.forEach((spritesItem) => {
sprites = sprites.pipe(gulpIf(`${spritesItem}/*.{jpg,png,svg}`, spritesmith({
imgName: spritesItem + '.png',
cssName: spritesItem + '.css',
cssTemplate:'sprites-css.handlebars',
imgPath: `./${spritesItem}.png`
})))
})
return sprites
.pipe(buffer())
.pipe(imagemin(
[mozjpeg({ quality: config.imgmin_quality }), pngquant({ quality: config.imgmin_quality })]))
.pipe(gulp.dest('src/assets/sprites'))
})