forked from weipxiu/Art_Blog
-
Notifications
You must be signed in to change notification settings - Fork 0
/
gulpfile.js
216 lines (193 loc) · 6.9 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
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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
const gulp = require('gulp');
const clean = require('gulp-clean');//清空目录下资源
const htmlmin = require('gulp-htmlmin');//压缩html
const imagemin = require('gulp-imagemin'); //引入图片压缩模块
const scriptmin = require('gulp-uglify'); //引入js压缩模块
const gulpless = require('gulp-less'); //引入less转换模块
const gulp_minify_css = require('gulp-minify-css'); //压缩css
const concat = require('gulp-concat'); //引入合并代码模块
const babel = require('gulp-babel'); //引入ES6转ES5模块
const rev = require('gulp-rev');//给静态文件资源添加hash值防缓存
const preprocess = require("gulp-preprocess"); //区分html,js环境变量
const runSequence = require('run-sequence'); //流程控制,控制任务执行顺序
const plumber = require('gulp-plumber'); //阻止报错暂停
const browserSync = require('browser-sync'); //热更新模块
// 环境变量
const env = process.env.NODE_ENV
let target = env === 'production' ? './dist' : 'D:/PHPTutorial/WWW/wp-content/themes/Art_Blog'
console.log('当前环境:'+env+'对应打包地址:'+target)
/*
gulp.task -- 定义任务
gulp.src -- 找到需要执行任务的文件
gulp.dest -- 执行任务的文件的去处
gulp.watch -- 观察文件是否发生改变
安装gulpless压缩模块 npm i gulp-less --save-dev
执行任务 gulp + 任务名称 + 回车
*/
//清空dist目录
gulp.task("clean", function () {
console.log('清空/'+target+'目录下的资源')
return gulp.src(target+'/*', {
read: false
})
.pipe(clean({
force: true
}));
})
// 拷贝文件
gulp.task("copyHtml", function () {
//pipe后面对应的地址就是将前面路径文件拷贝复制到哪里去
console.log('\n正在打包编译中,请稍后......................\n');
return gulp.src(["src/**", "!src/*.html", "!src/*.css", "!src/js/*", "!src/css/*"]).pipe(gulp.dest(target))
});
//压缩html
gulp.task('miniHtml', () => {
return gulp.src(['src/*.html'])
.pipe(preprocess({
context: {
// 此处可接受来自调用命令的 NODE_ENV 参数,默认为 development 开发测试环境
NODE_ENV: process.env.NODE_ENV || 'development',
},
}))
.pipe(htmlmin({
collapseWhitespace: false, // 折叠html节点间的空白
minifyCSS: true, // 压缩css
minifyJS: true, // 压缩js
removeComments: true, // 去除注释
removeEmptyAttributes: true, // 去除空属性
removeRedundantAttributes: true // 去除与默认属性一致的属性值
}))
.pipe(gulp.dest(target));
});
// 压缩css
gulp.task("minCss", function () {
gulp.src("src/css/*.css")
//.pipe(rev())//添加hash值防缓存
//.pipe(gulpless())
.pipe(gulp_minify_css())
.pipe(gulp.dest(target+"/css"))
//style.css压缩
return gulp.src("src/style.css")
.pipe(gulp_minify_css())
.pipe(gulp.dest(target))
});
//压缩完的style.css追加版本号
gulp.task("themesVer", function () {
return gulp.src(["src/ver.css",target+"/style.css"])
.pipe(concat("style.css"))
.pipe(gulp.dest(target))
})
//图片压缩
//安装模块 npm install --save-dev gulp-imagemin
gulp.task("imageMin", function () {
return gulp.src('src/images/*')
.pipe(imagemin([
imagemin.gifsicle({
interlaced: true
}),
imagemin.jpegtran({
progressive: true
}),
imagemin.optipng({
optimizationLevel: 7
}),
imagemin.svgo({
plugins: [{
removeViewBox: true
},
{
cleanupIDs: false
}
]
})
]))
.pipe(gulp.dest(target+'/images'))
})
// ES6转换转ES5(babel-v7版本)
// gulp.task('babel', () =>{
// return gulp.src('src/js/*.js')
// .pipe(babel({
// presets: ['@babel/env']
// }))
// .pipe(scriptmin()) //转换后进行压缩
// .pipe(gulp.dest(target+'/js'))
// }
// );
//ES6转换转ES5(babel-v7版本)、代码合并
//安装 npm i gulp-concat --save-dev
gulp.task("jsConcat", function () {
//公共
gulp.src(["src/js/main.js","src/js/ajax_wordpress.js"])
.pipe(plumber())
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(scriptmin()) //转换后进行压缩
.pipe(concat("main_min.js"))
.pipe(scriptmin()) //在合并的时候压缩js
.pipe(gulp.dest(target+"/js"))
//特例
gulp.src(["src/js/rem.js","src/js/date.js","src/js/jquery-2.1.4.min.js","src/js/jquery.lazyload.js"])
.pipe(gulp.dest(target+"/js"))
//首页
return gulp.src(["src/js/index.js","src/js/swiper.min.js"])
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(scriptmin()) //转换后进行压缩
.pipe(concat("index_min.js"))
.pipe(scriptmin()) //在合并的时候压缩js
.pipe(gulp.dest(target+"/js"))
})
//初始化browserSync
// browserSync.init({
// server: {
// baseDir: './src'
// },
// prot:1234,
// middleware: function (req, res, next) {
// let str = '';
// let pathname = require('url').parse(req.url).pathname;
// if (pathname.match(/\.css/)) {
// str = scssSolve(pathname);
// if (str) {
// res.end(str);
// }
// }
// if (pathname.match(/\.js/)) {
// str = jsSolve(pathname);
// if (str) {
// res.end(str);
// }
// }
// next();
// }
// });
// gulp.watch('src/*.html').on('change', function () {
// browserSync.reload('*.html');
// });
// gulp.watch('src/*.php').on('change', function () {
// browserSync.reload('*.php');
// });
// gulp.watch('src/css/**/*.scss').on('change', function () {
// browserSync.reload('*.css');
// });
// gulp.watch('src/js/**/*.js').on('change', function () {
// browserSync.reload('*.js');
// });
// browserSync.reload();
//监听文件是否发生改变
gulp.task("Watch", function () {
gulp.watch(["src/**", "!src/*.html", "!src/js/*", "!src/**.css"], ["copyHtml"]);
gulp.watch(['src/*.html'], ["miniHtml"]);
gulp.watch(["src/**.css"], ["minCss"]);
// gulp.watch([target+"/**.css"], ["themesVer"]);
gulp.watch(["src/js/main.js","src/js/ajax_wordpress.js"], ["jsConcat"]);
})
//如果直接执行 gulp 那么就是运行任务名称为‘default’的任务,后面数组代表所需要执行的任务列表
//"imageMin"不加入,否则打包太慢,图片压缩还是单独处理比较好
gulp.task('default',function(){
runSequence("clean", "copyHtml", "miniHtml", "minCss", "themesVer", "jsConcat", "Watch",function(){
console.log('\n恭喜你,编译打包已完成,所有文件在'+target+'文件夹!!!');
})
});