Gulp3的使用_常用插件_使用Gulp搭建web服务器

什么是Gulp

Gulp 是一个自动化工具，Gulp是基于Node.js的，Gulp4.0跟Gulp3.0版本的差别很大。前端开发者可以使用它来处理常见任务：

• 搭建web服务器；
• 文件保存时自动重载浏览器；
• 使用预处理器如Sass、LESS；
• 优化资源，比如压缩CSS、JavaScript、压缩图片；

Gulp安装

因为Gulp是基本Node的，安装Gulp之前，确保电脑里已经装好了Node环境。
使用Gulp时，不能用最新版的Node.js，需要使用Node稳定版本（参考官网说明，目前10.x的版本是稳定版本(LTS)）。
如果Node不是稳定版本，在进行Gulp操作时，会报如下错误：
const { Math, Object } = primordials;

题外话，（点击查看Mac下怎样切换不同版本的Node，https://blog.csdn.net/Charissa2017/article/details/104497572）：

• 1、npm 是 JavaScript 世界的包管理工具，并且是 Node.js 平台的默认包管理工具，在安装nodejs的时候，npm会被跟着一起安装，通过 npm 可以安装、共享、分发代码,管理项目依赖关系。
• 2、nvm都是node版本管理工具，为了解决node各种版本存在不兼容现象，nvm是让你在同一台机器上安装和切换不同版本的node的工具。
• 3、node.js是在项目开发时所需要的代码库。

简单来说就是，nvm管理NodeJs和npm的版本，npm管理NodeJs的第三方插件。

回到正题，

Gulp全局安装

第一次使用gulp时，需要进行全局安装，全局安装只需要安装一次，作用是可以在命令行中执行gulp语句。

全局安装gulp3版本
npm i gulp@3 -g

默认这种安装方式耗时会特别长
如果想结束npm安装，按ctrl+c退出安装
再清除缓存数据
npm cache verify

把npm改成淘宝镜像库：
npm config set registry https://registry.npm.taobao.org

再执行，npm i gulp@3 -g
速度就会快很多。

安装完成后可以执行 gulp -v ，测试是否安装成功。

局部安装

局部安装表示在当前项目中要使用的gulp，局部安装的gulp要和全局安装的gulp版本保持一致。

全局安装完成后，初始化项目模块
npm init -y

可以看到在根目录下会自动生成package.json配置文件

因为在上线后是不需要gulp包的，所以将gulp安装在开发依赖
npm i gulp@3 --save-dev

安装完成后，package.json配置文件的开发依赖中会出现gulp。

开始使用

• 在根目录下新建gulpfile.js 文件，这个文件中用来配置所有任务。
• 在gulpfile.js 中使用require将gulp模块加载进来。
• 定义任务，gulp.task(“任务名”，function(){任务执行的回调函数})。
• 执行任务，在终端中输入 ”gulp 任务名“。

//加载gulp模块
var gulp=require("gulp");
//定义了一个叫做a的任务，在终端中输入gulp a，可以执行该任务
gulp.task("a",function(){
    console.log("aaa")
});
//如果每一个参数为default，在终端中输入gulp，即可执行该任务
gulp.task("default",function(){
    console.log("888")
})

Gulp方法

Gulp的工作方式

gulp 实际工作是使用nodejs 中的stream 来处理的，简单来说，如果需要合并两个文件，就需要讲两个文件都加载进来，然后再处理将文件合并，注意这里加载进来的文件并不是文本形式加载，而是以二进制数据流的方式，也就是steam加载进入。被加载进入的文件是以二进制数据流模式存在的，内容中除了含有文件内容，还包括了文件的地址，文件名等等一系列相关信息。然后再将所有的数据流处理生产新文件。因此这里就用到了nodejs中stream的方法pipe。

pipe

管道，流向的意思，这里可以理解为写入到。

a.pipe(b);//将a写入到b中

src方法

• 读取文件的数据流，将本地文件读取到gulp内存中。
• 语法：gulp.src(globs)。
• 参数含义：globs参数是读取文件的筛选条件，可以写入字符串，也可以是数组，数组含有多个读取条件。

gulp.src("js/a.js") //读取一个文件
gulp.src(["js/a.js","js/b.js"]) //读取两个文件
gulp.src("js/*.js") //读取js文件夹下所有的js文件
gulp.src("./js/**/*.js") //读取js文件夹下所有后代文件夹下的内容

dest方法

• 输入文件的数据 流，将内存中的数据输出到本地文件中。
• 语法：gulp.dest(path)。
• 参数含义：path参数是要写入文件存放的路径。
• 用gulp.dest() 把文件流写入文件后，文件流仍然可以继续使用。

//将当前目录下，js文件夹下所有的js读入，然后写入到当前目录的dist文件夹下
gulp.src("./js/*.js").pipe(gulp.dest("./dist/"))

task方法

• 定义任务。
• 语法：gulp.task(name,[deps],fn)。
• 参数含义：name是任务名，如果name为”default“时，表示默认任务，执行时不需要再输入任务名称；[deps]是前置任务，即任务所依赖前面任务名的数组；fn是任务执行的函数。

gulp.task("one",function () {
    console.log("one");
});
//如果执行gulp two,这时候就会先执行任务one，再执行任务two
gulp.task("two",["one"],function () {
    console.log("two")
});

watch方法

• 用来监视某个或某些文件的变化，当文件发生变化时，不需要手动执行任务，会自动执行该任务的回调函数。
• 语法：gulp.watch(“path”,[deps],fn)。
• 参数含义：path是监视的文件，deps是监视文件发生变化后需要执行任务名的数组，fn是监视完成后的执行函数。

gulp.task("a",function(){
    gulp.src("./src/js/*.js")
    .pipe(gulp.dest("./dist/"));
});
gulp.task("default",function(){
    // 监视任务
    gulp.watch("./src/js/*.js",["a"],function(){
        console.log("执行完成");
    })
})

gulp插件

gulp-load-plugins 自动加载插件

从package.json 文件中加载所需要的gulp 插件，可以直接附加到选择的对象上，而不再需要每一个依次引入，所以在使用gulp-load-plugins，需要先将要用的插件下载下来。

原来的代码是这样的：

var gulp = require('gulp');
var concat=require("gulp-concat");
var uglify=require("gulp-uglify");
var rename=require("gulp-rename");
//......
gulp.task("a",function(){
    gulp.src("./src/js/*.js")
    .pipe(concat("c.js"))
    .pipe(uglify())
    .pipe(rename("c.min.js"))
    .pipe(gulp.dest("./dist/"));
});

我们可以使用自动加载插件来简化代码
下载自动加载插件到开发依赖中
npm i gulp-load-plugins --save-dev
要注意require引入插件后，返回的是一个方法，需要在后面加( )

使用gulp-load-plugins 后的代码是这样的：

var gulp=require("gulp");
var plugins=require("gulp-load-plugins")();
gulp.task("a",function(){
    gulp.src("./src/js/*.js")
    .pipe(plugins.concat("c.js"))
    .pipe(plugins.uglify())
    .pipe(plugins.rename("c.min.js"))
    .pipe(gulp.dest("./dist/"));
});

gulp-concat 合并文件

下载合并插件到开发依赖中
npm i gulp-concat --save-dev

var gulp = require('gulp');
var concat = require("gulp-concat");
 
gulp.task('concat', function () {
    gulp.src('js/*.js')  //要合并的文件
    .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"
    .pipe(gulp.dest('dist/js'));
});

gulp-uglify 压缩文件

下载压缩插件到开发依赖中
npm i gulp-uglify --save-dev

gulp.task("default",function () {
   gulp.src("./js/a.js")
       .pipe(uglify())
       .pipe(gulp.dest("./dist"))
});

gulp-rename 重命名

下载重命名插件到开发依赖中
npm i gulp-rename --save-dev

gulp.task('rename', function () {
    gulp.src('js/jquery.js')
    .pipe(uglify())  //压缩
    .pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js
    .pipe(gulp.dest('js'));
});

gulp-minify-css css文件压缩

下载css文件压缩插件到开发依赖中
npm install gulp-minify-css --save-dev

var gulp = require('gulp'),
    minifyCss = require("gulp-minify-css");
 
gulp.task('minify-css', function () {
    gulp.src('css/*.css') // 要压缩的css文件
    .pipe(minifyCss()) //压缩css
    .pipe(gulp.dest('dist/css'));
});

gulp-minify-html html文件压缩

下载html文件压缩插件到开发依赖中
npm install gulp-minify-html --save-dev

var gulp = require('gulp'),
    minifyHtml = require("gulp-minify-html");
 
gulp.task('minify-html', function () {
    gulp.src('html/*.html') // 要压缩的html文件
    .pipe(minifyHtml()) //压缩
    .pipe(gulp.dest('dist/html'));
});

gulp-sass sass解析

下载sass解析插件到开发依赖中
npm install gulp-sass --save-dev
如果安装出现问题可以参考：
https://blog.csdn.net/Charissa2017/article/details/104502186

var gulp = require('gulp'),
    sass = require("gulp-sass");
 
gulp.task('compile-sass', function () {
    gulp.src('sass/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));
});

gulp-imagemin 图片压缩

下载图片压缩插件到开发依赖中
npm install gulp-imagemin --save-dev

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
 
gulp.task('default', function(){
		gulp.src('src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
    }
);

搭建web服务器

• browser-sync 是静态服务器，create() 开启创建；
• 使用browser.init 创建服务位置和端口，server表示访问目录，自动会打开该目录下的index.html文件。
• 使用gulp.watch 做监听，并且重新执行js 的合并压缩打包等处理，最后当存储完成后，刷新网页browser.reload 是重载页面；

var gulp=require("gulp");
var plugins=require("gulp-load-plugins")();
var browser=require("browser-sync").create();//打开浏览器
//js处理
gulp.task("setJs",function(){
    gulp.src("./js/*.js")
    .pipe(plugins.concat("c.js"))
    .pipe(plugins.uglify())
    .pipe(plugins.rename("c.min.js"))
    .pipe(gulp.dest("./dist/"))
    .on("end",browser.reload);
})
//sass处理
gulp.task("setSass",function(){
    gulp.src("./scss/b.scss")
    .pipe(plugins.sass())
    .pipe(plugins.minifyCss())
    .pipe(plugins.rename("c.min.css"))
    .pipe(gulp.dest("./dist/"))
    .on("end",browser.reload);
})
//html处理
gulp.task("setHtml",function(){
    gulp.src("./index.html")
    .pipe(gulp.dest("./dist/"))
    .on("end",browser.reload);
})
//监听
gulp.task("default",["setJs","setSass"],function(){
    browser.init({
        server:"./",
        port:4001
    })
    gulp.watch("./js/*.js",["setJs"]);
    gulp.watch("./scss/*.scss",["setSass"]);
    gulp.watch("./index.html",["setHtml"]);
})