Gulp的使用方法
Gulp安装
//在 VSCODE 中输入 ctrl + `:打开终端CMD
//在CMD中输入：
//npm i gulp -g(全局安装)
创建gulp项目
- 1，创建目录 gulp_demo（创建项目根目录）
- 2，cd gulp_demo（进入到项目根目录中）
- 3，npm init -y（初始化项目）
- 4，npm i gulp -s（安装本地gulp作为项目依赖）
开启第一个gulp应用程序
1，在gulp_demo的根目录下创建一个：gulpfile.js的文本(文件名固定)
2，引入gulp模块
const gulp = require("gulp")
// 开启一个gulp任务
// task(task_name,callback)：开启任何的方法
// task_name：任务名称
// callback：回调函数
gulp.task("default",done=>{
// 在回调函数中写入任务代码
console.log("Hello Gulp!");
done()
})
//在终端使用命令：gulp default（任务名称）。
//注意：若你的任务名为“default”，直接gulp就会启动默认任务。
编译sass文件
1，安装插件
npm i gulp-sass -s
2，引入插件模块
const sass = require("gulp-sass")
3，任务代码
gulp.task("sass_to_css",done=>{
// gulp.src()：引入源文件
// gulp.dest()：输入到目标文件
gulp.src("./src/sass/01.scss") // 引入源文件
.pipe(sass()) // .scss => .css
.pipe(gulp.dest("./dist/css/")) // 输入到目标文件
done()
})
压缩CSS文件
1，安装插件
npm i gulp-clean-css -s
2，引入插件
const cleanCss = require("gulp-clean-css")
3，任务代码
gulp.task("cleanCss",done=>{
gulp.src("./src/sass/*.scss")// 可读流
.pipe(sass())
.pipe(cleanCss())
.pipe(gulp.dest("./dist/css"))// 可写流
done()
})
*：通配选择符
修改文件名字插件
1，安装插件
npm i gulp-rename -s
2，引入插件
const rename = require("gulp-rename")
3，任务代码
gulp.task("rename",done=>{
gulp.src("./src/sass/*.scss")// 可读流
.pipe(sass()) // 编译
.pipe(cleanCss()) // 压缩css
.pipe(rename({
//dirname: "main/text/ciao", 目录名
//basename: "aloha", 路径名
//prefix: "bonjour-", 前缀名
suffix:".min",// 后缀名 电视网-新三国第一集-人人美剧.mp4
extname:".css"// 扩展名
})) //修改名字
.pipe(gulp.dest("./dist/css"))// 可写流
done()
})
//dirname: "main/text/ciao",
//basename: "aloha",
//prefix: "bonjour-",
//suffix: "-hola",
//extname: ".md"
// ./dist/main/text/ciao/bonjour-aloha-hola.md
压缩JS文件
1，安装插件
npm i gulp-uglify -s
2，引入插件
const uglify = require("gulp-uglify")
3，任务代码
gulp.task("uglify_js",done=>{
gulp.src("./src/js/big.js")
.pipe(uglify())
.pipe(rename("big.min.js"))
.pipe(gulp.dest("./dist/js"))
done()
})
合并JS文件
1，安装插件
npm i gulp-concat -s
2，引入插件
const concat = require("gulp-concat")
3，任务代码
gulp.task("concat_js",done=>{
gulp.src("./src/js/*.js")
.pipe(concat("all.js"))
.pipe(uglify())
.pipe(gulp.dest("./dist/js"))
done()
})
ES6 转 ES5：适用老版本浏览器JS代码
1，安装插件
npm i gulp-babel@7 -s //注意：建议推荐安装7版本毕竟8版本出了事解决不了！
npm i babel-preset-es2015 -s //依赖
npm i babel-core -s //依赖
2，准备
在项目的根目录创建: .babelrc 的文件
在文件中写入
{
"presets":["es2015"]
}
3，引入插件
const babel = require("gulp-babel")
4，任务代码
gulp.task("es6toes5",done=>{
gulp.src("./src/js/es6.js")
.pipe(babel())
.pipe(rename("es5.js"))
.pipe(gulp.dest("./dist/js"))
done()
})
压缩图片
1，安装插件
npm i gulp-imagemin -s
2，引入插件
const imagemin = require("gulp-imagemin")
3，任务代码
gulp.task("img",(done)=>{
gulp.src("./src/img/2.jpg")
.pipe(imagemin())
.pipe(gulp.dest("./dist/img"))
done()
})
热更新服务器
1，安装插件
npm i browser-sync -s
2，引入插件
// 创建浏览器同步对象
const browserSync = require("browser-sync").create()
// 引入浏览器的reload方法
const reload = browserSync.reload
3，任务代码
// 创建浏览器同步对象
const browserSync = require("browser-sync").create()
// 引入浏览器的reload方法
const reload = browserSync.reload
gulp.task("sync",done=>{
// 初始化服务器
browserSync.init({
server:"./",// 指定服务器的根目录
// port:8001// 默认端口号：3000
})
gulp.watch("./index.html").on("change",reload)
done()
})
