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
| // 导入工具包 require('node_modules里对应模块')
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'); // 编译less
var sass = require('gulp-sass'); // 编译sass
var notify = require('gulp-notify'); // 处理LESS错误
var plumber = require('gulp-plumber'); // 构建异常捕获，防止构建进程崩掉
var postcss = require('gulp-postcss'); // css 兼容
var autoprefixer = require('autoprefixer'); // 处理浏览器私有前缀
var cssnext = require('cssnext'); // 使用CSS未来的语法
var precss = require('precss'); // 像Sass的函数
var spritesmith = require('gulp.spritesmith'); // 精灵图片
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var cssbeautify = require('gulp-cssbeautify'); // css 美化
var minifycss = require('gulp-minify-css'); // 压缩css
var concat = require('gulp-concat'); // 合并文件
var babel = require('gulp-babel'); // 将ES6代码编译成ES5
var uglify = require('gulp-uglify'); // 压缩js
var rename = require('gulp-rename'); // 重命名文件
var cached = require('gulp-cached'); // 文件缓存进内存
var remember = require('gulp-remember'); // 读取内存中的文件
var changed = require('gulp-changed'); // 比较文件改变
var gutil = require('gulp-util'); // 让电脑 哔 ~ 的响一声然后抛出异常
var debug = require('gulp-debug');
//include html并刷新服务器
gulp.task('fileinclude', function(done) {
gulp.src(['src/html/*.html'])
// .pipe(cached('fileinclude'))
// .pipe(remember('fileinclude'))
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('dist/html'))
.on('end', done)
.pipe(reload({ stream: true }));
});
// 创建精灵图
gulp.task('sprite', function() {
var spriteData = gulp.src('src/images/sprite/*.png').pipe(spritesmith({
imgName: 'sprite.png',
cssName: '1_sprite.css',
cssFormat: 'css',
imgPath: '../images/sprite.png'
}));
spriteData.img.pipe(gulp.dest('src/images')); // output path for the sprite
spriteData.css.pipe(gulp.dest('src/css/css')); // output path for the CSS
});
// 压缩图片
gulp.task('imagemin', ['sprite'], function() {
var stream = gulp.src('src/images/*.+(png|jpg|jpeg|gif|svg)')
// 如果想对变动过的文件进行压缩，则使用下面一句代码
.pipe(cached(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(debug({ title: '图片文件————:' }))
.pipe(gulp.dest('dist/images'))
.pipe(reload({ stream: true }));
return stream;
});
// 打包CSS进入到dist目录
gulp.task('csstodist', ['testCSS', 'testLess', 'testSass', 'sprite'], function() {
var processors = [autoprefixer, cssnext, precss];
var stream = gulp.src('src/css/css/*.css')
.pipe(cached('csstodist'))
.pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
.pipe(postcss(processors))
.pipe(remember('csstodist'))
.pipe(debug({ title: '编译文件————:' }))
.pipe(concat('common.css'))
.pipe(cssbeautify({
indent: ' ',
openbrace: 'end-of-line',
autosemicolon: true
}))
// .pipe(rename({suffix: '.min'}))
// .pipe(minifycss())
.pipe(gulp.dest('dist/css'))
.pipe(reload({ stream: true }));
return stream;
});
// css 打包进入 src 文件夹
gulp.task('testCSS', function(callback) {
gulp.src('src/css/*.css')
// .pipe(cached('testLess'))
.pipe(changed('src/css/css'))
.pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
// .pipe(gulp.dest('src/css/css'))
.pipe(reload({ stream: true }));
callback();
});
// less 翻译 并 打包进入 src 文件
gulp.task('testLess', function(callback) {
gulp.src('src/css/*.less')
// .pipe(cached('testLess'))
.pipe(changed('src/css/css', { extension: '.css' }))
.pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
.pipe(less())
.pipe(gulp.dest('src/css/css'))
// .pipe(reload({ stream: true }));
callback();
});
// sass 翻译 并 打包进入 src 文件
gulp.task('testSass', function(callback) {
gulp.src('src/css/*.scss')
.pipe(changed('src/css/css', { extension: '.css' }))
.pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
// .pipe(sass().on('error', sass.logError))
.pipe(sass())
.pipe(debug({ title: '编译文件————:' }))
.pipe(gulp.dest('src/css/css'))
// .pipe(reload({ stream: true }));
callback();
});
// 打包Lib进入到dist目录
gulp.task('Libtodist', function() {
gulp.src('src/Lib/**/*')
.pipe(cached('Libtodist'))
.pipe(debug({ title: 'LIB复制文件————:' }))
.pipe(gulp.dest('dist/Lib'))
.pipe(reload({ stream: true }));
});
// 打包JS到dist目录
gulp.task('jstodist', function() {
gulp.src('src/js/**/*.js')
.pipe(plumber({
errHandler: function(e) {
gutil.beep(); // 哔~ 的响一声
gutil.log(e); // 抛出异常
}
}))
.pipe(changed('dist/js', { hasChanged: changed.compareSha1Digest }))
// .pipe(babel({ presets: ['es2015'] }))
.pipe(debug({ title: '编译文件————:' }))
// .pipe(remember('jstodist'))
// .pipe(concat('public.js'))
// .pipe(rename({suffix: '.min'}))
// .pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(reload({ stream: true }));
});
// 监视文件改动并重新载入
gulp.task('serve', function() {
browserSync({
port: 406,
server: {
baseDir: 'dist/'
}
});
});
// 监听所有HTML JS CSS改动
gulp.task('watch', function() {
gulp.watch(['src/css/*.css'], ['testCSS']);
gulp.watch(['src/css/*.less'], ['testLess']);
gulp.watch(['src/css/*.scss'], ['testSass']);
gulp.watch(['src/css/css/*.css'], ['csstodist']);
gulp.watch(['src/images/sprite/*'], ['sprite']);
gulp.watch(['src/Lib/**/*'], ['Libtodist']);
gulp.watch(['src/js/*.js'], ['jstodist']);
gulp.watch(['src/html/**/*.html'], ['fileinclude']);
gulp.watch(['src/images/*'], ['imagemin']);
});
gulp.task('default', ['csstodist', 'fileinclude', 'serve', 'imagemin', 'Libtodist', 'jstodist', 'watch']);
|