gulp是一个前端自动化构建工具,基于流的构建系统,主要优点是速度,效率和简化
gulp可以干什么?
开发服务器,Sass,Less或Stylus文件的预处理器,处理JavaScript的自动化脚本,代码优化工具,压缩,编译或移动文件
gulp的官网:https://www.gulpjs.com.cn/
gulp类似的工具:grunt webpack
gulp是基于node.js的,gulp和所有插件都通过JavaScript编写并依托Node.js平台
1.gulp优点:
- 易于使用
- 构建快速
- 插件高质
- 易于学习
2.gulp的安装
全局安装 -> 使用gulp的命令
npm install gulp -g (4.0)
npm install gulp@next -g (3.9版本)
执行gulp -v 查看gulp的版本号
局部安装 -> 配置文件内依赖gulp
在本地下载
npm install gulp --save-dev(4.0)
3.gulp api
1.gulp.task(name,[deps],fn) //建任务
name:任务名 string
任务名为default : 执行 ---> gulp
任务名为minJs : 执行 ---> gulp 任务名
2.gulp.src(globs,[options]) //读文件
globs 数据类型:string/array 查找文件的规则
- 通配符路径匹配
- “src/a.js”
指定具体文件;
- “*”:匹配所有文件
例:src/*.js(包含src下的所有js文件);
- “**”:匹配0个或多个子文件夹
例:src/**/*.js(包含src的0个或多个子文件夹下的js文件);
- “{}”:匹配多个属性
例:src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件);
- “!”:排除文件
例:!src/a.js(不包含src下的a.js文件);
3.gulp.dest(输出的路径) //输出文件
4.gulp.serise(task1,task2,…) 设置任务的执行顺序 串行执行
5.gulp.parallel(task1,task2,…) 设置任务的执行顺序 并行执行
6.gulp.watch(globs,gulp.serise/gulp.parallel(task1,task2…)) 监听文件变化,执行任务
gulp插件
插件 | 说明 |
---|---|
gulp-sass | 编译scss |
gulp-less | 编译less |
gulp-autoprefixer | 自动添加前缀 |
gulp-concat | 合并文件 |
gulp-clean-css | 压缩css |
gulp-webserver | 起服务 |
browser-sync | 起服务 |
gulp-htmlmin | 压缩html |
gulp-imagemin | 压缩图片 |
gulp-uglify | 压缩js 不支持ES6 |
gulp-baibel | 编译ES6--->ES5
gulp-rev | 生成文件后缀
gulp-rev-collector | 替换文件路径
gulp-rename| 修改文件名和路径
gulp-filter | 过滤文件js文件
编译scss 与sass
"gulp-sass": "^3.1.0"
var gScss = require('gulp-sass');
gulp.task('scss1', function() {
return gulp.src('./origin/*.scss') //指定scss文件
.pipe(gScss())//调用引入的文件 它抛出的是一个函数执行就行
.pipe(gulp.dest('./detection'));
});
编译less
"gulp-less": "^3.4.0"
var gLess = require('gulp-less');
gulp.task('less', function() {
return gulp.src('./origin/*.less')
.pipe(gLess())
.pipe(gulp.dest('./detection/'));
});
自动添加前缀
gulp-autoprefixer
var autoprefixer = require("autoprefixer");
gulp.task('autopre', function() {
return gulp.src("src/css/*.css")
.pipe(autoprefixer({
browsers: ['last 2 versions'] //离你最近的两个浏览器版本
))
.pipe(gulp.dest("dist")); //生成新文件
})
合并文件
gulp-concat
var concats = require('gulp-concat');
gulp.task('concat', function() {
return gulp.src('./detection/*.css') //需要合并的文件
.pipe(concats('all.css')) //合并后的文件名
.pipe(gulp.dest('./dest/')); //合并后存贮的位置
});
压缩css
"gulp-clean-css"
var miniCss = require('gulp-clean-css');
gulp.task('minicss', function() {
return gulp.src('./detection/style.css')
.pipe(miniCss())
.pipe(gulp.dest('./zlib/'));
});
起服务 gulp-webserver
port :配置端口号
open: 自动打开浏览器
livereload: 自动刷新
host: 配置IP
fallback: 指定默认打开的文件
middleware:function(req,res,next){ //拦截前端请求
}
压缩html
"gulp-htmlmin": "^4.0.0"
var miniHtml = require('gulp-htmlmin');
gulp.task('miniH', function() {
return gulp.src('./detection/index.html')
.pipe(miniHtml({
collapseWhitespace: true, //压缩HTML
}))
.pipe(gulp.dest('./zlib/'))
});
miniHtml参数
{
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
}
压缩图片
"gulp-imagemin": "^4.1.0"//压缩jpg jpeg
var imagemin = require('gulp-imagemin');
gulp.task('testImagemin', function() {
return gulp.src('src/img/*.{png,jpg,gif,ico}')
.pipe(imagemin({
optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
}))
.pipe(gulp.dest('dist/img'));
});
压缩js
"gulp-uglify": "^3.0.0"
var uglify = require('gulp-uglify');
gulp.task('uglify', function() {
return gulp.src('./detection/a.js')
.pipe(uglify())
.pipe(gulp.dest('./zlib/'));
});
uglify参数
{
mangle: true,//类型:Boolean 默认:true 是否修改变量名
mangle: {except: ['require' ,'exports' ,'module' ,'$']}//排除混淆关键字
compress: true,//类型:Boolean 默认:true 是否完全压缩
preserveComments: 'all' //保留所有注释
}
编译es6
"gulp-babel": "^7.0.0"
"babel-core": "^6.26.0"
"babel-preset-es2015": "^6.24.1"
var babel = require('gulp-babel');//引入gulp-babel 但是:还得安装 babel-core 和 babel-preset-es2015
gulp.task('babel', function() {
return gulp.src('./origin/a.js') //需要编译的文件
.pipe(babel({
presets: 'es2015' //指定编译后的版本为es5
}))
.pipe(gulp.dest('./detection/')); //编译后存放文件的路径
});
md5 添加前缀
"gulp-rev-collector": "^1.2.4" //路径替换
var rev = require('gulp-rev');
var collector = require('gulp-rev-collector');
gulp.task('revs', function() {
return gulp.src('./detection/style.css') //读取css
.pipe(rev())
.pipe(gulp.dest('./rev/')) //前缀添加完毕后存放文件的位置
.pipe(rev.manifest()) // json
.pipe(gulp.dest('./view/')); //存放json文件的地方
})
gulp.task('cols', function() {
return gulp.src(['./view/rev-manifest.json', './detection/index.html']) //读取json文件 抓取HTML中对应的文件并且取代
.pipe(collector({ //参数设置
replaceReved: true // 是否前缀被改变后可再次被取代
}))
.pipe(gulp.dest('./view/')); //存放修改文件链接后的html文件
})
代理
gulp.task('server',function(){
return gulp.src('member-ui')
.pipe(webserver({
port:8989,
proxies:[
{
source:"/api/add",target:"http://192.168.1.108:3000/api/add"
},
{
source:"/api/del",target:"http://192.168.1.108:3000/api/del"
},
{
source:"/api/detail",target:"http://192.168.1.108:3000/api/detail"
}
]
}));
});
开启服务
gulp.task('server',function(){
return gulp.src('src')
.pipe(webserver({
port:9090, //端口号
open:true, //自动浏览器
linverload:true //自动打开刷新
}))
})
前端拦截
gulp.task('webserver', function() {
return gulp.src('./')
.pipe(webserver({
livereload: true, //自动刷新浏览器
open: true, //打开浏览器
port: 8080,
middleware: function(req, res, next) {
var pathname = url.parse(req.url).pathname;
if (pathname === "/api/list") {
res.end(JSON.stringify({ code: 1, data: 'hello,world!' }));
} else {
pathname = pathname === '/' ? "index.html" : pathname;
res.end(fs.readFileSync(path.join(__dirname, pathname)));
}
}
}))
})
开发坏境
gulp.task('dev',gulp.series('任务名','任务名'))
线上环境
gulp.task('build',gulp.parallel('任务名','任务名'))
操作gulp全部例子
const gulp = require("gulp");
//直接编译common
gulp.task("common", () => {
return gulp.src("./src/common/axios.js")
.pipe(gulp.dest("./build/common"))
})
const gulpSass = require("gulp-sass");
const gulpConcat = require("gulp-concat");
const autoprefixer = require("gulp-autoprefixer");
const cssmin = require("gulp-clean-css");
//编译scss
gulp.task("devCss", () => {
return gulp.src("./src/styles/*.scss")
.pipe(gulpSass())
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(cssmin())
.pipe(gulp.dest("./build/styles"))
})
//运行gulp devCss就可以编译scss
//编译 js'
//因为只有一个js文件,所以不用合并
const babel = require("gulp-babel");
const uglify = require("gulp-uglify")
gulp.task("devJs", () => {
return gulp.src("./src/scripts/*.js")
.pipe(babel({
presets: ['env']
}))
.pipe(uglify())
.pipe(gulp.dest("./build/scripts"))
})
//运行gulp devJs就可以编译js
//编译html
const htmlMin = require("gulp-htmlmin")
gulp.task("devHtml", () => {
return gulp.src("./src/*.html")
.pipe(htmlMin({
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeComments: true
}))
.pipe(gulp.dest("./build"))
})
//运行gulp devHtml就可以编译html
//监听css,js,html
gulp.task("watch", () => {
gulp.watch("./src/styles/*.scss", gulp.parallel("devCss"))
gulp.watch("./src/scripts/*.js", gulp.parallel("devJs"))
gulp.watch("./src/*.html", gulp.parallel("devHtml"))
gulp.watch("./src/common/axios.js", gulp.parallel("common"))
})
//起服务
const webServer = require("gulp-webserver");
gulp.task("serverFs", () => {
return gulp.src("./build") //. 代表当前目录下找index.html
.pipe(webServer({
host: "localhost",
port: 3636,
//fallback: "index.html", //默认打开文件夹名
open: true, //自动打开浏览器
livereload: true, //自动刷新页面
proxies: [{
//事件代理
source: "/getlist",
target: "http://localhost:6363/getlist"
}]
}))
})
gulp.task("serverDate", () => {
return gulp.src("./build")
.pipe(webServer({
host: "localhost",
port: 6363,
middleware: ((req, res) => {
//中间键 有他他上面的代码就不会执行
console.log(req.url)
res.end("11")
})
}))
})
gulp.task("server", gulp.parallel("watch", "serverFs", "serverDate"))
gulp的不同方法
const server = require("gulp-webserver");
const connect = require("gulp-connect");
const proxy = require("http-proxy-middleware")
gulp.task("serverOne", () => {
gulp.src(".")
.pipe(server({
host: "localhost",
port: 3000,
livereload: true,
open: true,
directoryListing: true,
middleware: (req, res) => {
if (req.url === "/api") {
const result = fs.readFileSync("./static/data.json");
// res.end(JSON.stringify(result.toString()))
res.end("this is api")
}
}
}))
})
gulp.task("webserver", () => {
connect.server({
host: "localhost",
root: ["."],
name: "connect",
port: 8080,
fallback: "./index.html",
middleware: (con, opt) => {
return [
proxy("/api", {
target: "http://localhost:3000",
changeOrigin: true,
})
]
}
})
})
gulp.task("default", ["serverOne", "webserver"])