Gulp.js

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目.

为什么要用Node环境：

js是一个脚本文件，不能直接用来操作文件。但是，在项目过程中，免不了需要经常操作一些文件，包括移动复制压缩上传修改等。如果重新学习C之类底层操作的语言的未免成本太高，此时node的横空出世，解决了这个问题。因为node使用了js的语法，而且使用js的人也越来越多，node就理所当然的火遍大江南北

在node中有很多插件，类似于手机中的软件，拿到一个新手机没有任何软件是没有办法使用的。

gulp就是node中的工具之一。类似前端工程化工具还有：webpack，grunt，browserify。

gulp是一种前端自动化工具，在使用gulp之前需要先安装gulp
安装gulp有两种方式，一种是通过下载软件安装，一种是通过类似手机的应用商店的软件下载，而node就是这个应用商店
直接在网页上下载安装不仅安全性无法保证，而且还会造成不兼容等问题；

通过手机的应用商店下载的软件会自动适配当前手机的型号和cpu等信息，既保证了安全，也保证的软件的功能完整性

配置nodejs

在配置gulp环境之前需要有node环境,去官网下载node
node是一个命令行工具，使用这个工具需要用到两个命令

npm install 安装软件
npm uninstall 卸载软件

1.需要注意的是node没有可视化界面操作，直接在命令行中进行操作
node -v 显示node的版本

2.gulp的全局环境类似于下载器，在使用gulp之前需要先安装环境
npm install gulp -g
下载完成之后执行

gulp -v

查看gulp的版本，安装完成

3.创建一个文件夹，起个任意名字，从命令行中进入当前文件夹

执行npm install gulp --save-dev

配置局部环境 下载完成后执行gulp -v会出现全局和局部的版本号

执行npm init 设置配置信息，可以全部为默认常用插件配置文件

开始使用gulp

实现功能将线下版本的文件放在线上版本中
在命令行中输入gulp，提示没有gulpfile文件，需要手动创建固定文件名gulpfile.js文件
在该文件中引入gulp模块，

let gulp = require(“gulp”);

gulp为gulp模块返回的对象，在这个对象中，有一些方法
gulp.task(“指令名字”,()=>{指令执行函数}) 绑定指令的方法

gulp.task("index",()=>{
	gulp.src()//找到源文件的目录
	gulp.pipe()//在连缀之中继续调用gulp方法
	gulp.dest()//转存方法
	//实现功能的时候，一定要用ruturn
	return gulp.src("index.html").pipe(gulp.dest("dist"));
	})

在gulp.src中可以接收数组，表示多个文件
文件名可以用*代替，表示通配
**/*表示多层文件夹嵌套
!文件路径，表示除了此文件

gulp.watch()监控

gulp.task("watch",()=>{
	//监控index.html文件，如果发生改变，那么执行index指令
	gulp.watch("index.html",["index"]);
})

gulp原生默认指令（default）：

• default 为gulp自带默认指令，当在命令行中执行gulp后不跟任何指令名的时候，所执行的指令
• gulp.task(“default”,[“hello”]); //第二个参数为要执行的命令名，可以接受多个，表示默认执行的指令

gulp插件（服务器插件）创建本地服务

安装插件（插件只有局部，没有全局，所以要安装在项目文件夹中）

npm install gulp-connect

引入插件

在gulpfile文件中引用：

let connect = require(“gulp-connect”);

配置gulp-connect

gulp.task("server",()=>{
	connect.server({
	root:"dist",     //以哪个文件夹为服务器
	port:8888,       //端口号
	livereload:true  //是否可以自动刷新
	})
})

此时可以在浏览器中输入本地地址，访问服务器
如果要实现保存自动刷新功能，首先需要在index指令中调用connect插件

gulp.src(“index.html”).pipe(gulp.dest(“dist”)).pipe(connect.reload());

其次需要同时运行服务器指令和监测指令，可通过默认指令实现

gulp.task(“default”,[“server”,“watch”]);

表示先打开server，再打开watch，就可以进行实时监测，实现本地修改保存，服务器自动修改

服务器代理（解决跨域问题）

安装http-proxy-middleware插件(gulp代理中间件插件)

npm install http-proxy-middleware

引入插件

let proxy = require('http-proxy-middleware’);
//开启服务
gulp.task('proxyServer', function() {
    connect.server({
        root: 'src',
        port: 8888,
        middleware: function(connect, opt) {
            return [
                proxy('/api',  {
                    target: 'https://api.douban.com/v2',    //代理的目标地址
                    changeOrigin:true
                    pathRewrite:{    //路径重写规则
                        '^/api':''
                    }
                })
            ]
        }
    });
});

说明：proxy()参数解释

• ‘/api’ => 匹配你要代理的请求地址前缀
• target => 你要把请求代理到哪
• pathRewrite => 是把在页面中写的请求地址的某部分的重写为后面的字符串

此时页面中请求的写法：

$.post('/api/book/1226666',function(data){
    console.log(data);
})
 // 也就是发往 /api/book/1226666的请求最终会被发往 https://api.douban.com/v2/book/1226666

文件拷贝

我们可以通过刚刚学习的拷贝命令去拷贝其他项目中的文件，包括项目中的图片

gulp.task("images",()=>{
    return gulp.src("images/*.jpg").pipe(gulp.dest("dist/images"))	//*代表所有
})

拷贝多种文件及文件夹：

• 拷贝多种后缀名

gulp.src(“images/*.{jpg,png}”)

• 如果要拷贝文件夹下所有内容

gulp.src(“images//”)

• 如果要拷贝所有的话， 可以使用 images/**/* 去表示当前images文件夹下所有的内容全部进行拷贝。

• 将两个文件夹拷贝到同一个目标文件夹下

gulp.src([‘xml/.xml’,'json/.json’]).pipe(gulp.dest('dist/data’))

• 排除 !

gulp.src([‘xml/.xml’,'json/.json’,’!json/secret.json’]).pipe(gulp.dest(‘dist/data’))

• 任务合并执行

gulp.task('build',['index-copy','image-copy','data'],()=>{
    console.log('编译成功')
})

侦测文件变化，自动执行任务
gulp.watch()

gulp.task('watch',()=>{
    gulp.watch('index.html',['index-copy']);
    gulp.watch('images/**/*',['images-copy']);
    gulp.watch(['json/*.json','xml/*.xml','!json/secret.json'],['data']);
})

侦测自动执行，如果文件发生改变那么将执行对应任务。

ES6转ES5 gulp-babel

用于将es6转成es5需要先安装babel插件

npm install gulp-babel@7

再安装babel上的将es6转成es5的插件

npm install babel-preset-es2015

根据babel指引不需要这个，但是实际少了会报错

npm install babel-core

在当前gulp目录中，创建.babelrc的文件，里面的内容是{“presets”:[“es2015”]}

gulp.task('toes5',()=>{
    return gulp.src(['js/*.js'])
	.pipe(babel())
	.pipe(gulp.dest('dist/js'))
})

gulp合并插件 gulp-concat用于合并js文件

gulp.task('scripts',()=>{
    return gulp.src(['js/nav.js','js/banner.js’])
	.pipe(babel())
	.pipe(concat('index.js'))
	.pipe(gulp.dest('dist/js'))
})

gulp代码压缩插件gulp-uglify

gulp.task('scripts',()=>{
    return gulp.src(['js/nav.js','js/banner.js’])
	.pipe(babel())
	.pipe(concat('index.js'))
	.pipe(uglify())
	.pipe(gulp.dest('dist/js'))
})

我们是否可以保存两份js文件，一份已经压缩，另一份没有压缩的那？

重命名 gulp-rename插件

gulp.task('scripts',()=>{
    return gulp.src(['js/nav.js','js/banner.js’])
    .pipe(babel())
    .pipe(concat('index.js'))
    .pipe(gulp.dest('dist/js'))
    .pipe(uglify())
    .pipe(rename('index.min.js'))
    .pipe(gulp.dest('dist/js'))
})

css压缩 gulp-minify-css

此处需要配合sass插件，将sass文件先编译成css文件后，在进行压缩

gulp.task('sass',()=>{
    return gulp.src('stylesheet/**/*.scss')
    .pipe(sass())
    .pipe(minifyCSS())
    .pipe(gulp.dest('dist/css'))
})

图片压缩gulp-imagemin插件

gulp.task('image-copy',()=>{
    return gulp.src('images/**/*’)
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'))
})

gulp插件

插件官网http://gulpjs.com/plugins/
将插件安装到本地之后， 要require引入之后才可以正常使用