gulp

文章目录

gulpgulp 就是一种可以自动化完成我们开发过程中大量的重复工作 gulp是一个前端自动化构建工具。创建一个简单的应用gulp的安装常用的gulp插件扩展的插件下载插件配置插件 方法使用- //注册任务- //读文件- //输出文件- //监听文件变更- //设置执行任务顺序（串行）- //注册多个任务 查找规则 说明应用gulpfile.js编译scss 与sass编译less自动添加前缀合并文件压缩css 压缩html压缩图片 压缩js编译es6md5 添加前缀代理

不再是简单的使用HTML + CSS + JavaScript 这些技术去构建网页应用。我们要提高效率，就必须减少重复的工作。使用less之类预处理的css提供开发阶段更加便利，更加快捷

gulp 就是一种可以自动化完成我们开发过程中大量的重复工作

预处理语言的编译js css html 压缩混淆图片体积优化

gulp是一个前端自动化构建工具。

gulp类似的工具：grunt 、webpackgulp是基于node体系的。gulp优点： 易于使用构建快速插件高质易于学习

创建一个简单的应用

gulpfile.js —gulp配置文件

gulp的安装

安装nodejs,查看版本：node -v全局安装gulpcnpm install gulp -g局部安装gulpcnpm install gulp --save-dev (开发依赖包)

常用的gulp插件

插件名功能gulp-sass编译scssgulp-less编译lessgulp-autoprefixer自动添加前缀gulp-concat合并文件gulp-clean-css压缩cssgulp-webserver起服务gulp-htmlmin压缩htmlgulp-imagemin压缩图片gulp-uglify压缩js 不支持ES6gulp-babelES6—>ES5gulp-rev生成文件后缀gulp-rev-collector替换文件路径gulp-rename文件重命名gulp-babel编译JS（ES6—>ES5）

注：使用 babel（安装成7.0的版本） 需要babel-core和babel-preset-es2015

cnpm install gulp-babel@7 babel-core babel-preset-env/es2015 -g

扩展的插件

https://www.npmjs.com/

下载插件

$ cnpm install gulp-concat gulp-uglify gulp-rename --save-dev （多个插件同时下载）$ cnpm install gulp-less gulp-clean-css --save-dev

配置插件

//gulpfile.jsvar concat = require(‘gulp-concat’);var uglify = require(‘gulp-uglify’);var rename = require(‘gulp-rename’);var less = require(‘gulp-less’);var sass = require(‘gulp-sass’);var cleanCss = require(‘gulp-clean-css’);

方法使用

- //注册任务

gulp.task(‘任务名’,function(){ //逻辑具体任务 })

- //读文件

gulp.src(“目标文件路径”)

- //输出文件

gulp.dest(“输出的文件路径”)//可以理解为管道，将操作加入到执行队列。gulp.pipe()

- //监听文件变更

gulp.task(‘任务名’, function () { gulp.watch('监听文件目录', gulp.series('任务名', '任务名'...)); })

- //设置执行任务顺序（串行）

gulp.series(“任务名”,“任务名”…)//设置执行任务顺序（并行）gulp.parallel(“任务名”,“任务名”…)

- //注册多个任务

gulp.task(‘default’, gulp.series(“任务名”…));

查找规则 说明

查找规则说明*查找所有的**匹配的0个或多个文件夹{,}匹配多个文件，或多个属性！非

应用gulpfile.js

gulpfile.js//引入模块var gulp = require(‘gulp’);//注册转换less的任务gulp.task(‘less’,function(){ return gulp.src('src/less/*.less') .pipe(less()) //使用less对象进行编译 .pipe(gulp.dest('src/css'))编译的的结果保存到目录 })//注册转换sass的任务gulp.task(‘sass’,function(){ return gulp.src("src/scss/*.scss") .pipe(sass()) //进行编译 //自动处理浏览器前缀 .pipe(autoprefixer({ browsers: ['last 2 versions', 'Android >= 4.0'], //浏览器版本 cascade: true, //是否美化属性值 默认：true remove:true //是否去掉不必要的前缀 默认：true })) .pipe(gulp.dest('dist/')) })//注册合并压缩js的任务gulp.task(‘js’,function(){ return gulp.src("src/js/**/*.js") //找到目标原文件，将数据读取到gulp的内存中 .pipe(concat('build.js'))//合并临时文件 .pipe(gulp.dest('dist/js/'))//输出文件到本地路径 .pipe(uglify())//压缩文件 .pipe(rename('build.min.js'))//重命名第一种情况 .pipe(rename({suffix:'.min'})) //重命名第二种情况;suffix:后缀名 .pipe(gulp.dest("dist/js/")) })/* 编译js文件，合并js，并且压缩 es6 - es5 需要gulp-babel和babel-core和babel-preset-es2015 $ cnpm install gulp-babel@7 babel-core babel-preset-es2015 -g */gulp.task(‘js’,function(){ return gulp.src('./src/js/style/*.js') .pipe(babel({ presets:'es2015' })) //编译es6 -es5 .pipe(concat("all.js")) //合并 .pipe(uglify()) //压缩 .pipe(gulp.dest('./src/js/')) })//注册压缩html的任务gulp.task(‘htmlMin’, () => { //removeComments: true,//清除HTML注释 //collapseWhitespace: true,//压缩HTML return gulp.src('index.html') .pipe(htmlmin({collapseWhitespace: true,removeComments: true,})) .pipe(gulp.dest('dist/')); });//开启服务gulp.task(‘server’,function(){ return gulp.src('src') .pipe(webserver({ port:9090, //端口号 open:true, //自动打开浏览器 livereload:true, //自动打开刷新 proxies:[ //代理 { source:'/api/find',target:'http://localhost:3000/api/find'} ] })) })//开发坏境（串联）gulp.task(‘dev’,gulp.series(‘任务名’,‘任务名’))//线上环境（并联）gulp.task(‘build’,gulp.parallel(‘任务名’,‘任务名’))执行 --> gulp 任务名一些参数last 2 versions: 主流浏览器的最新两个版本last 1 Chrome versions: 谷歌浏览器的最新版本last 2 Explorer versions: IE的最新两个版本last 3 Safari versions: 苹果浏览器最新三个版本Firefox >= 20: 火狐浏览器的版本大于或等于20iOS 7: IOS7版本Firefox ESR: 最新ESR版本的火狐5%: 全球统计有超过5%的使用率在 package 文件中scripts字段添加dev 和 build 两个命令{“scripts”: { "dev": "gulp dev",// npm run dev 开发 "build": "gulp build" // npm run build },“devDependencies”: { "gulp-sass": "^4.0.2", "gulp-webserver": "^0.9.1" }}

编译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 gulp.src("./目录")

port ：配置端口号 open: 自动打开浏览器（true） livereload: 自动刷新（true） host: 配置IP(localhost是默认值) fallback: 指定默认打开的文件(index.html默认) middleware:function(req,res,next){ //拦截前端请求 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": "^8.1.1" //对文件名加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" } ] })); });