使用gulp压缩图片
第一步：
cnpm i gulp-livereload -D
cnpm i -g http-server
第二步：
书写gulpfile.js文件：
代码如下：
const gulp=require('gulp');
const livereload=require('gulp-livereload');
const babel=require('gulp-babel');
const uglify=require('gulp-uglify');
const concat=require('gulp-concat');
const js_path=['./src/js/**/*.js'];
// js文件所在位置可能是 './src/js/*.js'也可能是 './src/js/user/vip/*.js'，所以这里使用 **表示可以是任意级别的子目录，也可以没有这一级。
gulp.task('js', ()=>{
return gulp
.src(js_path) // 读取结束
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(concat('bundle.min.js')) // 这一步的作用就是 打包，参数是打包后的名字，叫做bundle.min.js
.pipe(uglify()) // 压缩js文件，注意uglify是不认ES6的，所以需要babel
.pipe(gulp.dest('./build/js')) // 指定输出文件所在的目录
.pipe(livereload()); // 不光要输出到上面的目录当中，还要输出到livereload()上面，必须要有这句话。
});
// 通过监视js文件，来执行js任务，从而触发livereload的工作。
gulp.task('watch', ()=>{
//开启livereload的服务
livereload.listen();
//重新编译JS
gulp.watch(js_path, ['js']);
//监听html；标记文件修改
// gulp.watch([
// './1.html',
// ], file=>{ // file表示变化的文件
// livereload.changed(file.path); // 告诉livereload哪个文件需要更新。
// });
// 也就是说，有两种写法，要么两个参数分别是文件列表 和 任务列表，要么是文件列表 和 回调函数，第一种写法，
// 一般是需要对文件进行压缩或进行其他处理，第二种做法就是只要监视的 文件发生变化了，就进行重新加载。
// 但是不管是哪一种，都不能少了 livereload.listen(); 这一行
gulp.watch([
'./1.html'
], file=>{
livereload.changed(file.path);
});
// 由于这里并没有对html文件进行压缩、拼接之类的处理，所以不用像上面对js文件最后进行.pipe(livereload())，只需要简单的使用一个回调函数即可。
});
gulp.task('default', ['js', 'watch']);
第三步：
在Chrome上面安装一个插件，名叫LiveReload。
就长下面这个样子：
第四步：
打开两个终端窗口，一个是输入gulp，它就会进行编译并且监视文件的改变，另一个需要输入命令 http-server，提供一个服务端环境，并且通过服务器访问html文件。
HTML文件的内容如下所示：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
document.write(`<script src="build/js/bundle.min.js?t=${Math.random()}" charset="utf-8"></sc`+`ript>`)
</script>
</head>
<body>
大家好，我是帅帅邬同学！！！
</body>
</html>
经过上面的步骤之后，当你修改HTML文件的内容或者js文件的内容的时候，就会自动进行重新编译，并且自动刷新浏览器，十分地方便和好用！！！
是不是很简单呢，赶紧自己动手实践一下吧，实践是检验真理的唯一标准！！！
如果这篇文章能够帮助到您，希望您不要吝惜点赞👍👍和收藏💖💖，您的支持是我继续努力的动力 💪💪！！！
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
