gulp.js

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 任务名称