项目目录
项目目录
新建一个app目录用于存放源代码，dist目录（会自动生成）用于存放打包后的文件，rev目录（会自动生成）用于存放其它文件名添加Hash值前后的映射信息。
安装依赖
npm install --save-dev babel-core babel-plugin-transform-remove-strict-mode babel-preset-es2015 del gulp gulp-autoprefixer gulp-babel@7 gulp-cached gulp-clean-css gulp-connect gulp-imagemin gulp-rev gulp-rev-collector gulp-uglify
理论上第一步只要安装gulp包，就能将项目初始化，为了方便，我就一次性全列出来了，功能可见下面源码中的说明，大家根据需求取舍，建议使用淘宝镜像cnpm来安装。特别说明一下，gulp-babel得安装8.0以下的版本，不然使用ES6语法会报错找不到@babel/core。全部安装完成后效果如下。
package.json
代码编写
不废话，直接上源码
//.babelrc
{
"presets":["es2015"], //编译为ES5语法
"plugins": ["transform-remove-strict-mode"] //关闭严格模式，这里按需求而定
}
<!--test.html -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/test.css">
<title>test</title>
</head>
<body>
<h1>Test</h1>
<img src="pic/test.png">
<script src="js/test.js"></script>
</body>
</html>
//test.js
let msg = "test";
console.log(msg); //ES6语法会被编译为ES5语法，并清除注释
//gulpfile.babel.js
import gulp from 'gulp'; //引入依赖包，gulp必需
import babel from 'gulp-babel'; //支持ES6语法需要babel相关几个包
import cached from "gulp-cached";
import autoprefixer from 'gulp-autoprefixer';
import cleanCss from 'gulp-clean-css';
import uglify from 'gulp-uglify';
import rev from 'gulp-rev';
import revCollector from 'gulp-rev-collector';
import imagemin from "gulp-imagemin";
import connect from "gulp-connect";
import del from 'del'; //Node原生的清除方法
gulp.task('css', () => {
return gulp.src('app/css/**/*.css') //读取css目录下任意多级目录下所有以.css为结尾的文件，最新版gulp中建议使用return语法
.pipe(cached('css')) //缓存文件，避免每次重复打包
.pipe(autoprefixer({ //自动加兼容前缀
overrideBrowserslist: ['> 5%'], //兼容使用率超过5%的浏览器
cascade: false //前缀美化
}))
.pipe(cleanCss({ //压缩CSS
advanced: false,
compatibility: 'ie8',
keepBreaks: false,
keepSpecialComments: '*'
}))
.pipe(rev())
.pipe(gulp.dest('dist/css')) //保存打包后的CSS文件到dist下的css目录
.pipe(rev.manifest()) //文件名加Hash值，配合上上行使用
.pipe(gulp.dest('rev/css')) //保存CSS映射信息
});
gulp.task('js', function () {
return gulp.src('app/js/**/*.js')
.pipe(cached('js'))
.pipe(babel())
.pipe(uglify({ //压缩JS
mangle: false //是否混淆变量
}))
.pipe(rev())
.pipe(gulp.dest('dist/js'))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'))
});
gulp.task('pic', function () {
return gulp.src('app/pic/**/*')
.pipe(cached('pic'))
.pipe(imagemin()) //压缩图片，但效果不明显
.pipe(gulp.dest('dist/pic'));
});
gulp.task('html', function() {
return gulp.src(['rev/**/*.json', 'app/*.html'])
.pipe(cached('html'))
.pipe(revCollector({ //更改HTML源码中链接路径
replaceReved: true //替换为追加Hash值后的文件名
dirReplacements: {
'css': 'css', //将URL中的css替换为css，其实相同则不必写
'js': 'js'
}
}))
.pipe(gulp.dest('dist'))
});
gulp.task('clear', function () {
return del(['dist/*']); //每次打包清除dist目录
});
gulp.task("reload", function () {
return gulp.src('app/*.html')
.pipe(connect.reload()); //页面重新加载
})
gulp.task('watch', function() {
gulp.watch('app/*.html', gulp.series('html')); //监听html文件变化，执行‘html’任务
gulp.watch('app/css/**/*.css', gulp.series('css'));
gulp.watch('app/js/**/*.js', gulp.series('js'));
gulp.watch('app/pic/**/*', gulp.series('pic'));
gulp.watch('dist/**/*', gulp.series('reload'));
});
gulp.task('connect', function () {
connect.server({ //启用本地服务器
root: 'dist', //根目录
port: 3000, //端口
livereload: true //热更新
});
});
gulp.task('default', gulp.series('clear', gulp.parallel('css', 'js', 'pic'), 'html')); //gulp指令默认执行的任务，series为串行执行，parallel为并行执行。这里先清空dist目录，再编译，后更改html文件
gulp.task('server', gulp.series('default', gulp.parallel('connect', 'watch'))); //开启服务器并实时更新页面
打包编译
在命令行中输入gulp开始打包，不出意外，你的文件夹下将会多出以下文件。
打包成功
再输入gulp server指令，可以在localhost:3000查看页面，当有源码改变后，会触发watch中的任务，不必手动刷新便能在页面上看到效果。最后附上这个项目的github地址 https://github.com/wzbus/gulp
