gulp核心知识点目录

gulp

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

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

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

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

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

创建一个简单的应用

• gulpfile.js —gulp配置文件

gulp的安装

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

常用的gulp插件

• 注：使用 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.js
• var 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(“任务名”…));

查找规则 说明

应用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: 火狐浏览器的版本大于或等于20
• iOS 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"
				}
			]
		}));
});