1、什么是gulp？
- gulp是一个自动的打包工具，前端开发者可以使用gulp来处理常见任务，快速的编写代码，提高工作效率。
2、gulp能做些什么？
- gulp是基于Nodejs的自动任务运行器，它拥有搭建静态服务器，文件保存时自动重载浏览器，使用预处理器如sass\less，优化资源，比如压缩css，压缩javascript，压缩图片等等强大的功能。
3、gulp的安装
- 前面说了gulp是基于Nodejs的，所以我们需要先安装node
- 在node环境下安装全局的gulp，-g是安装全局的意思
npm i gulp -g
- 在再项目中安装局部的gulp
npm i gulp --save-dev
4、开始搭建静态服务器
- 先来个最简单的
//先引入gulp
const gulp = require("gulp")
//再引入静态服务器 browser-sync 使用npm i broswer-sync -g 全局安装
const broswer = requier("browser-sync").create()
gulp.task = ("default" , function(){
broswer.init({
server : "./",
port : 4001
})
})
在终端输入gulp执行
E:\1000phone_2\SZ-GP4\codeing-m\week7\liveServer>gulp
出现以下效果说明静态服务器搭建成功
1.png
- 接下来我们给这个静态服务器添加任务
gulp.task("resetJs" , function(done){
gulp.src("./js/**/*.*") // 选中当前目录下js文件夹中的所有文件
.pipe(plugins.babel({
presets: ['@babel/env']
}))
.pipe(plugins.concat("main.js"))
.pipe(plugins.uglify())
.pipe(plugins.rename("main.min.js"))
.pipe(gulp.dest("./dist/js/"))
.on("end" , browser.reload);
done();
})
- 在default任务中监听resetJs
gulp.task("default" , function(done){
browser.init({
server : "./",
port : 4010,
});
gulp.watch("./js/**/*.*" , gulp.series(["resetJs"]));
done();
})
这样我们就成功的给这个静态服务器添加了任务
5、gulp常用插件
- 自动加载插件 ： gulp-load-plugins
npm i gulp-load-pluigns --save-dev
- 压缩文件 ： gulp-uglify
npm i gulp-uglify --save-dev
- 重命名 ：gulp-rename
npm i gulp-rename --save-dev
- css文件压缩： gulp-minify-css
npm i gulp-minify-css --save-dev
- html文件压缩：gulp-minify-html
npm i gulp-minify-html --save-dev
- 文件合并：
npm i gulp-concat --save-dev
- sass解析 ：gulp-sass
npm i gulp-sass --save-dev
