gulp.js

Posted 2021-01-11 carolavie

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‘)));