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
| var gulp = require('gulp'); //本地安装gulp所用到的地方
var fileinclude = require('gulp-file-include'); //包含HTML
var connect = require('gulp-connect'); //本地服务
var imagemin = require('gulp-imagemin'); //图片压缩
var watch = require('gulp-watch'); //监听
var less = require('gulp-less');
var notify = require('gulp-notify'); //处理LESS错误
var plumber = require('gulp-plumber'); //处理LESS错误
var browserSync = require('browser-sync');
var reload = browserSync.reload;
/*//本地服务
gulp.task('webserver', function() {
connect.server({
port: 8080, //修改端口
livereload: true //添加实时刷新，需要watch相应的css.js,html文件
});
});*/
//include html并刷新服务器
gulp.task('fileinclude', function(done) {
gulp.src(['src/html/*.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('dist/html'))
.on('end', done)
.pipe(reload({ stream: true }))
});
//压缩图片
gulp.task('imagemin', function() {
gulp.src('src/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images')).pipe(reload({ stream: true }));
});
//打包CSS进入到dist目录
gulp.task('csstodist', function() {
gulp.src('src/css/*.css')
.pipe(gulp.dest('dist/css')).pipe(reload({ stream: true }));
});
//打包JS到dist目录
gulp.task('jstodist', function() {
gulp.src('src/js/*')
.pipe(gulp.dest('dist/js')).pipe(reload({ stream: true }));
});
gulp.task('testLess', function () {
gulp.src('src/css/*.less')
.pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
.pipe(less())
.pipe(gulp.dest('dist/css')).pipe(reload({ stream: true }));
});
// 监视文件改动并重新载入
gulp.task('serve', function() {
browserSync({
port: 8080,
server: {
baseDir: 'dist/'
}
});
});
//监听所有HTML JS CSS改动
gulp.task('watch', function () {
// gulp.watch(['src/css/*','src/css/*.less','src/html/*.html','src/js/*','src/images/*'], ['testLess','jstodist','csstodist','fileinclude','imagemin']);
gulp.watch(['src/**/*.css'], ['csstodist']);
gulp.watch(['src/css/*.less'], ['testLess']);
gulp.watch(['src/html/**/*.html'], ['fileinclude']);
gulp.watch(['src/js/*'], ['jstodist']);
gulp.watch(['src/images/*'], ['imagemin']);
});
gulp.task('default',['testLess','fileinclude','serve','imagemin','csstodist','jstodist','watch']);
|