const gulp = require("gulp");
/*
原理：
管道机制 基于流的自动化工具
步骤
1、开启任务 gulp.task() 参数1:任务名称 参数2：回调函数 (任务名称的集合)
2、输入源 gulp.src() 文件存储的路径
3、管道 pipe 需要文件工作的一个流程
4、输出源 gulp.dest() 文件存储的路径
输入源 管道 输出源
饭盆 你妈妈的嘴 你的嘴
index.html 压缩 dist文件夹中
*/
//文件拷贝
//创建了一个任务copyindex
gulp.task("copyIndex",function(){
//找到输入源
gulp.src("src/html/index.html")
//通过管道给了输出源
.pipe(gulp.dest("dist/html"))
})
gulp.task("copyCss",function(){
gulp.src("src/css/*")
.pipe(gulp.dest("dist/css"))
})
gulp.task("copyImg",function(){
//src的img文件夹下面的一个或多个文件夹中的所有文件
gulp.src("src/img/**/*")
.pipe(gulp.dest("dist/css"))
})
//匹配多个属性
gulp.task("copyImg",function(){
//匹配src文件夹下面的img下面0个或多个文件夹下面的所有文件里面的 png文件或者jpg文件
gulp.src("src/**/*.{png,jpg}")
.pipe(gulp.dest("dist/css"))
})
//图片压缩
//引入图片压缩的模块
const imgMin = require("gulp-imagemin");
//开启任务
gulp.task("imgMin",function(){
gulp.src("src/img/**/*")
//在管道中压缩
.pipe(imgMin())
//压缩完毕后存放在dist目录下面的img文件夹下
.pipe(gulp.dest("dist/img"))
})
//压缩js
const jsMin = require("gulp-uglify");
//开启任务
gulp.task("jsMin",function(){
gulp.src("src/js/**/*")
.pipe(jsMin())
.pipe(gulp.dest("dist/js"))
})
//压缩css 编译sass
const cssMin = require("gulp-sass-china");
gulp.task("cssMin",function(){
gulp.src("src/sass/**/*")
//压缩并编译
.pipe(cssMin({
//sass编译的样式
outputStyle:"compressed"
}))
.pipe(gulp.dest("src/css"))
})
//监听
gulp.task("watch",function(){
//当sass文件夹下面的文件发送变化的时候我就去执行cssMin这个任务
gulp.watch("src/sass/**/*",["cssMin"])
})
//-----------开始
//开启服务器
const connect = require("gulp-connect");
//跨域处理
const proxy = require("http-proxy-middleware");
gulp.task("server",function(){
connect.server({
root:"src",
port:8877,
//是否更新
livereload:true,
//跨域处理
middleware:function(){
return [
//localhost:8877/v4
//第一个参数是请求的地址 第二个参数是将当前地址转换到哪个一个主机之上
proxy("/v4",{
//代理的主机头 协议域名端口
target:"https://m.maizuo.com",
changeOrigin:true
}),
proxy("/commonHeader",{
//代理的主机头 协议域名端口
target:"https://mapi.m.jd.com",
changeOrigin:true
})
]
}
})
})
//热更新
gulp.task("watch-server",function(){
//监听src下面所有的文件，当文件发生了改变以后
gulp.watch("src/**/*",function(){
//让服务器刷新更新所有文件
gulp.src("src/**/*")
.pipe(connect.reload(true))
})
})
gulp.task("F5",["server","watch-server","cssMin"]);
//----结束
//合并文件
const concat = require("gulp-concat");
gulp.task("concat",function(){
gulp.src(["src/js/js/ajax.js","src/js/js/lunbo.js"])
.pipe(concat("abc.js"))
.pipe(gulp.dest("dist/js"))
})
//ES6转ES5
const babes = require('gulp-babel');
const babel = require('gulp-babel');
gulp.task('babel', () =>
gulp.src('src/es6.js')
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(gulp.dest('dist'))
);
gulp:
基于流的自动化工具
合并文件
压缩文件
热更新
开启服务器
代码转义
......
node
webpack gulp 基于node
node
Node.js 的包管理器 npm，是全球最大的开源库生态系统
1、npm是一个包
2、npm是一个网站
3、是一个命令
1、全局安装gulp
cnpm install gulp -g
2、如果需要使用gulp的时候
a、cnpm init 初始化仓库
b、局部安装gulp cnpm install gulp --save-dev
--save：将保存配置信息至package.json
-dev：保存至package.json的devDependencies节点
c、创建一个gulpfile.js文件
3、pageage.json node_modules gulpfile三个文件必须在同一目录
4、运行任务
gulp 任务名称
const gulp = require("gulp");
/*原理：管道机制 基于流的自动化工具
步骤1、开启任务 gulp.task() 参数1:任务名称 参数2：回调函数 (任务名称的集合)
2、输入源 gulp.src() 文件存储的路径
3、管道 pipe 需要文件工作的一个流程
4、输出源 gulp.dest() 文件存储的路径
输入源 管道 输出源饭盆 你妈妈的嘴 你的嘴
index.html 压缩 dist文件夹中
*/
//文件拷贝//创建了一个任务copyindexgulp.task("copyIndex",function(){//找到输入源gulp.src("src/html/index.html")//通过管道给了输出源.pipe(gulp.dest("dist/html"))})
gulp.task("copyCss",function(){gulp.src("src/css/*").pipe(gulp.dest("dist/css"))})
gulp.task("copyImg",function(){//src的img文件夹下面的一个或多个文件夹中的所有文件gulp.src("src/img/**/*").pipe(gulp.dest("dist/css"))})
//匹配多个属性gulp.task("copyImg",function(){//匹配src文件夹下面的img下面0个或多个文件夹下面的所有文件里面的 png文件或者jpg文件gulp.src("src/**/*.{png,jpg}").pipe(gulp.dest("dist/css"))})
//图片压缩//引入图片压缩的模块const imgMin = require("gulp-imagemin");//开启任务gulp.task("imgMin",function(){gulp.src("src/img/**/*")//在管道中压缩.pipe(imgMin())//压缩完毕后存放在dist目录下面的img文件夹下.pipe(gulp.dest("dist/img"))})
//压缩jsconst jsMin = require("gulp-uglify");//开启任务gulp.task("jsMin",function(){gulp.src("src/js/**/*").pipe(jsMin()).pipe(gulp.dest("dist/js"))})
//压缩css 编译sassconst cssMin = require("gulp-sass-china");gulp.task("cssMin",function(){gulp.src("src/sass/**/*")//压缩并编译.pipe(cssMin({//sass编译的样式outputStyle:"compressed"})).pipe(gulp.dest("src/css"))})
//监听
gulp.task("watch",function(){//当sass文件夹下面的文件发送变化的时候我就去执行cssMin这个任务gulp.watch("src/sass/**/*",["cssMin"])})
//-----------开始
//开启服务器const connect = require("gulp-connect");//跨域处理const proxy = require("http-proxy-middleware");
gulp.task("server",function(){connect.server({root:"src",port:8877,//是否更新livereload:true,//跨域处理middleware:function(){return [//localhost:8877/v4//第一个参数是请求的地址 第二个参数是将当前地址转换到哪个一个主机之上proxy("/v4",{//代理的主机头 协议域名端口target:"https://m.maizuo.com",changeOrigin:true}),proxy("/commonHeader",{//代理的主机头 协议域名端口target:"https://mapi.m.jd.com",changeOrigin:true})]}})})
//热更新gulp.task("watch-server",function(){//监听src下面所有的文件，当文件发生了改变以后gulp.watch("src/**/*",function(){//让服务器刷新更新所有文件gulp.src("src/**/*").pipe(connect.reload(true))})})
gulp.task("F5",["server","watch-server","cssMin"]);
//----结束
//合并文件const concat = require("gulp-concat");
gulp.task("concat",function(){gulp.src(["src/js/js/ajax.js","src/js/js/lunbo.js"]).pipe(concat("abc.js")).pipe(gulp.dest("dist/js"))})
//ES6转ES5const babes = require('gulp-babel');
const babel = require('gulp-babel'); gulp.task('babel', () => gulp.src('src/es6.js') .pipe(babel({ presets: ['@babel/env'] })) .pipe(gulp.dest('dist')));