-
Notifications
You must be signed in to change notification settings - Fork 0
/
gulpfile.js
102 lines (85 loc) · 2.6 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
/**
* 组件安装
* npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev
*/
// 引入 gulp及组件
var gulp = require('gulp'), //基础库
imagemin = require('gulp-imagemin'), //图片压缩
less = require('gulp-less'), //sass
minifycss = require('gulp-minify-css'), //css压缩
jshint = require('gulp-jshint'), //js检查
uglify = require('gulp-uglify'), //js压缩
rename = require('gulp-rename'), //重命名
concat = require('gulp-concat'), //合并文件
clean = require('gulp-clean'), //清空文件夹
base64 = require('gulp-base64'); //图片Base64编码
// HTML处理
gulp.task('html', function() {
var htmlSrc = './src/*.html',
htmlDst = './dist/';
gulp.src(htmlSrc)
.pipe(gulp.dest(htmlDst))
});
// 样式处理
gulp.task('css', function() {
var cssSrc = './src/less/*.less',
cssDst = './dist/css',
cssDstz = './src/css';
gulp.src(cssSrc)
.pipe(less({ style: 'expanded' }))
.pipe(gulp.dest(cssDstz))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest(cssDst));
});
// 图片处理
gulp.task('images', function() {
var imgSrc = './src/images/**/*',
imgDst = './dist/images';
gulp.src(imgSrc)
.pipe(imagemin())
.pipe(gulp.dest(imgDst));
});
// js处理
gulp.task('js', function() {
var jsSrc = './src/js/*.js',
jsDst = './dist/js';
gulp.src(jsSrc)
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest(jsDst))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest(jsDst));
});
// 清空图片、样式、js
gulp.task('clean', function() {
gulp.src(['./dist/css', './dist/js', './dist/images'], { read: false })
.pipe(clean());
});
// 默认任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default', ['clean'], function() {
gulp.start('html', 'css', 'images', 'js');
});
// 监听任务 运行语句 gulp watch
gulp.task('watch', function() {
// gulp.start('html', 'css', 'images', 'js');
// 监听html
gulp.watch('src/*.html', function () {
gulp.run('html');
});
// 监听css
gulp.watch('src/less/*.less', function() {
gulp.run('css');
});
// 监听images
gulp.watch('src/images/**', function() {
gulp.run('images');
});
// 监听js
gulp.watch('src/js/*.js', function() {
gulp.run('js');
});
// });
});