package.json
{
"devDependencies": {
"gulp":
"^3.9.1",
"gulp-babel":
"^7.0.1",
"gulp-clean":
"^0.4.0",
"gulp-clean-css":
"^3.9.3",
"gulp-htmlmin":
"^3.0.0",
"gulp-imagemin":
"^4.1.0",
"gulp-rename":
"^1.2.2",
"gulp-rev":
"^8.1.1",
"gulp-rev-collector":
"^1.3.1",
"gulp-uglify":
"^3.0.0",
"pump":
"^3.0.0"
},
"dependencies": {
"babel-plugin-transform-remove-strict-mode":
"^0.0.2",
"gulp-obfuscate":
"^0.2.9",
"gulp-rename":
"^1.2.2",
"gulp-rev":
"^8.1.1",
"gulp-rev-collector":
"^1.3.1",
"gulp-strip-debug":
"^3.0.0",
"pump":
"^3.0.0"
}
}
gulpfile.js
var
gulp =
require(
'gulp'),
htmlmin =
require(
'gulp-htmlmin'),
uglify =
require(
'gulp-uglify'),
clean =
require(
'gulp-clean'),
pump =
require(
'pump'),
imagemin =
require(
'gulp-imagemin'),
babel =
require(
'gulp-babel'),
obfuscate =
require(
'gulp-obfuscate'),
rename =
require(
'gulp-rename'),
//文件重命名
rev =
require(
'gulp-rev'),
//更改版本名
stripDebug =
require(
'gulp-strip-debug'),
collector =
require(
'gulp-rev-collector'),
//gulp-rev的插件，用于html文件更改引用路径
cleanCSS =
require(
'gulp-clean-css');
gulp.
task(
'htmlmin',
function() {
var
options = {
removeComments:
true,
//清除HTML注释
collapseWhitespace:
true,
//压缩HTML
minfyJS:
true,
//压缩JS
minfyCss:
true,
//压缩CSS
};
return
gulp.
src([
'dist/rev-css/*.json',
'dist/rev-js/*.json',
'src/html/*.html'])
//- 读取两个rev-manifest.json文件以及需要进行css和js名替换的html文件
.
pipe(
htmlmin(
options))
.
pipe(
collector())
//- 执行文件内css和js名的替换
.
pipe(
gulp.
dest(
'dist/html'));
});
gulp.
task(
'scriptmin',
function() {
return
gulp.
src(
'src/js/*.js')
.
pipe(
babel())
.
pipe(
uglify({
mangle: {
toplevel:
true
}
}))
//这个是简单混淆 就是变量变成单个字母
// .pipe(uglify()) // 加上下一行 时简单混淆加强一点点 就是变量变成ಠ_ಠ966
// .pipe(obfuscate())
.
pipe(
stripDebug())
.
pipe(
rev())
.
pipe(
gulp.
dest(
'dist/js'))
.
pipe(
rev.
manifest())
.
pipe(
gulp.
dest(
'dist/rev-js'));
})
gulp.
task(
'cssmin',
function() {
return
gulp.
src(
'src/css/*.css')
.
pipe(
cleanCSS())
.
pipe(
rev())
.
pipe(
gulp.
dest(
'dist/css'))
.
pipe(
rev.
manifest())
.
pipe(
gulp.
dest(
'dist/rev-css'));
});
gulp.
task(
'cssmin2',
function() {
return
gulp.
src(
'src/ddcss/css/*.css')
.
pipe(
cleanCSS())
.
pipe(
gulp.
dest(
'dist/ddcss/css'));
});
//compress PNG/SVG/JPEG/GIF 图片
gulp.
task(
'imagemin',
function() {
return
gulp.
src(
'src/images/*.{png,jpg,gif,jpeg}')
.
pipe(
imagemin({
optimizationLevel:
5,
//类型：Number 默认：3 取值范围：0-7（优化等级）
progressive:
true,
//类型：Boolean 默认：false 无损压缩jpg图片
interlaced:
true,
//类型：Boolean 默认：false 隔行扫描gif进行渲染
multipass:
true
//类型：Boolean 默认：false 多次优化svg直到完全优化
}))
.
pipe(
gulp.
dest(
'dist/images'));
});
gulp.
task(
'watch',
function() {
gulp.
watch(
'src/js/*.js', [
'scriptmin']);
gulp.
watch(
'src/css/*.css', [
'cssmin']);
gulp.
watch(
'src/html/*.html', [
'htmlmin']);
});
gulp.
task(
'clean',
function() {
return
gulp.
src(
'dist', {
read:
false
})
.
pipe(
clean())
});
gulp.
task(
'default', [
'scriptmin',
'cssmin',
'imagemin'],
function() {
gulp.
start(
'htmlmin');
});
gulp.
task(
'defaultD', [
'clean'],
function() {
return
gulp.
start(
'scriptmin',
'cssmin',
'htmlmin');
});
.babelrc
{
"presets": [
"es2015"
],
"plugins": [
"transform-remove-strict-mode"]
}
文件路径
没有讲解 自己去查