使用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文件的内容的时候,就会自动进行重新编译,并且自动刷新浏览器,十分地方便和好用!!!
是不是很简单呢,赶紧自己动手实践一下吧,实践是检验真理的唯一标准!!!
如果这篇文章能够帮助到您,希望您不要吝惜点赞👍👍和收藏💖💖,您的支持是我继续努力的动力 💪💪!!!