超详细的gulp新手入门教程以及gulp常用插件、API使用场景以及案例使用分析

---

前言

大家好我是前端新手小猿同学：
这篇文章主要给大家简单介绍一下如何在项目中使用gulp工具进行工程化希望对大家的学习进步有所帮助，当然文章中可能存在理解不正确的地方希望大家可在评论区相互讨教，共同进步。。

---

一、Gulp简介

Gulp.js是一个基于流的自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。
工作原理：
在Gulp中，使用的是Nodejs中的stream(流)，首先获取到需要的stream，然后可以通过stream的pipe()方法把流导入到你想要的地方，比如Gulp的插件中，经过插件处理后的流又可以继续导入到其他插件中，当然也可以把流写入到文件中。所以Gulp是以stream为媒介的，它不需要频繁的生成临时文件，这也是Gulp的速度快的一个原因。

二、Gulp优点

1. gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。
2. 代码优于配置、node 最佳实践、精简的 API 集，gulp 让工作前所未有的简单
3. 基于 node 强大的流(stream)能力，gulp 在构建过程中并不把文件立即写入磁盘，从而提高了构建速度
4. 遵循严格的准则，确保我们的插件结构简单、运行结果可控
5. Gulp.js 无需写一大堆繁杂的配置参数，AP I也非常简单，学习起来很容易

三、Gulp安装

1.环境要求

首先要确保电脑上已经安装过node.js环境，因为Gulp是基于Node环境运行的，如果没有安装Node环境请先安装Node环境，可以参考这篇文章去安装Node环境。

2.Gulp安装步骤

1.全局安装Gulp

npm install -g gulp

2.全局安装完成之后，在你要使用Gulp的项目中再进行一次单独安装，安装gulp有两种方式，第二种方式会将Gulp信息写入到package.json文件中

npm install gulp
npm install --save-dev gulp 

四、Gulp任务创建以及使用

完成全局安装和项目中安装之后，我们就可以在项目中使用Gulp进行工程化处理了。

1.如何创建

需要我们在项目中与package.json文件同一级的目录下创建一个gulpfile.js文件，我们的gulp代码就主要在这个文件中书写。

2.如何使用

比如我们创建一个gulp任务，输出一个hello gulp。
要实现这样的场景我们首先需要在gulpfile.js文件中引入gulp，然后创建一个自定义任务让这个任务去输出对应的值

 var gulp = require('gulp');
 gulp.task('helloTask',function(){
       console.log('hello gulp');
 });

3.如何运行gulp任务：

要运行gulp任务，只需切换到存放gulpfile.js文件的目录(windows平台请使用cmd或者Power Shell等工具)，然后在命令行中执行gulp命令就行了。
如图：

gulp.task('helloGulp',function(){
    console.log('helloGulp')
})

五、Gulp常用API

1.task()

介绍：
gulp.task方法用来定义任务
案例：
1.多个任务：

gulp.task('oneTask',function(done){
    console.log('one is done')
    done()
});
gulp.task('twoTask',function(done){
    console.log('two is done');
    done()
});

gulp.task('StartTask', gulp.series('oneTask','twoTask',function(done){
    console.log('three is done')
    done()
}))

输出如图：

2.当多个任务当中存在异步的任务时：

gulp.task('oneTask',function(done){
    setTimeout(()=>{
        console.log('one is done')
        done()
    },2000)
   
});
gulp.task('twoTask',function(done){
    console.log('two is done');
    done()
});

gulp.task('StartTask', gulp.series('oneTask','twoTask',function(done){
    console.log('three is done')
    done()
}))

输出如图：

2.src()

1.介绍：
gulp.src()方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息
2.实现：
gulp.src(globs, [options])
globs参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组。

3.dest()

1.介绍：
gulp.dest()方法是用来写文件的，主要配合src()使用，可以将src()获取的文件写入到指定的文件目录下
2.实现：
gulp.dest(path[,options])

4.src()和dest()方法案例

日常src()和dest()方法都是同事出现的，二者相辅相成，缺一不可

gulp.task("Copy",function(done){
	gulp.src('log/**/*.js').pipe(gulp.dest('dist/index.js'))
	done()
})

这段代码的主要作用就是通过src()方法从log文件下获取到该文件夹下面的所有js文件，然后重新写入到dist文件夹下的index中,执行完成这个任务之后我们会发现，在我们的项目目录中增加了一个dist文件夹，这个文件夹下面会有一个index文件。如图：

这样也就更容易理解为什么gulp.src()方法获取的文件流里的内容不是原始的文件，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息，当我们修改dist文件下的js文件并不会影响原有的js文件，因为src()获取的只是一个虚拟的文件对象流。

5.watch()

1.介绍：
gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩、ES6代码转换等等
2.实现：
gulp.watch(glob, tasks)
glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。
tasks 为文件变化后要执行的任务
3.实例:

gulp.task('one',function(done){
  console.log('执行任务一')
  done()
});
gulp.task('two',function(done){
    console.log('执行任务二')
  done()
});
gulp.watch('log/*.js', gulp.series('one','two',function(cb){
    cb()
}));
gulp.task('watch',function(cb){
    cb()
})

启动监听任务之后:
watch会一直监听log文件下所有的js文件，当某一个js文件发生变化之后，会立马执行任务一和任务二，当我们改变log下面的任意一个js文件之后，watch会立马做对应的反应，执行对应任务。

输出如图：

六、Gulp常用插件

1. 自动加载插件(gulp-load-plugins)

        1.安装

 npm install --save-dev gulp-load-plugins

        2.实现案例：

var gulp = require('gulp');
//加载gulp-load-plugins插件，并马上运行它
var plugins = require('gulp-load-plugins')();
//使用plugins引入
plugins.rename = require('gulp-rename');
plugins.rubySass = require('gulp-ruby-sass');

  3.特点：
  可以实现按需引入，节省项目空间，利于优化

2. 重命名（ gulp-rename

）
1.安装

npm install --save-dev gulp-rename

        2.实现案例：

var gulp = require('gulp'),
rename = require('gulp-rename'),
gulp.task('rename', function () {gulp.src('log/test.js')
    .pipe(rename('test.min.js')) //会将test.js重命名为test.min.js
    .pipe(gulp.dest('js'))})

如图：

3. js文件压缩（gulp-uglify

）
1.安装

npm install --save-dev gulp-uglify

        2.实现案例

var gulp = require('gulp'),
uglify = require("gulp-uglify");
gulp.task('uglify', function () {gulp.src('log/index.js')
    .pipe(uglify())  //压缩
    .pipe(gulp.dest('js'))})

4. css文件压缩（gulp-minify-css）

        1.安装

npm install --save-dev gulp-minify-css

        2.实现案例

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'));
});

5. html文件压缩（gulp-minify-html

）
1.安装

npm install --save-dev gulp-minify-html

        2.实现案例

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'));
});

6. less和sass的编译（gulp-less

）
1.安装

npm install --save-dev gulp-less

        2.实现案例

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

7. 图片压缩（gulp-imagemin

）
1.安装

npm install --save-dev gulp-imagemin

        2.实现案例

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png图片压缩插件
gulp.task('default', function () {
    return gulp.src('src/images/*')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()] //使用pngquant来压缩png图片
        }))
        .pipe(gulp.dest('dist'));
});

8. ES6 转换成 ES5 （gulp-babel babel-core

）
1. 安装babel& ES6 转换成 ES5 插件

npm install --save-dev gulp-babel babel-core
npm install --save-dev babel-preset-es2015

        2.实现案例：

var gulp = require('gulp'),
babel = require('gulp-babel');
gulp.task('es6',  () => {
  return gulp.src('app/*.js')
    .pipe(babel())
    .pipe(gulp.dest('dist'));
});

---

总结

这篇文章主要给大家介绍了前端工程化的常用工具之一Gulp.js,也是博主工程化专栏的第一篇文章，工程化专栏中博主打算前Gulp开始再到webpack、grunt等等，常见的工具，从教程开始做起，到后面可能会更多分享的是实际工作中遇到的这方面bug的整理以及处理方法，希望大家能够喜欢，看完文章如果觉得对你有帮助，可以帮博主点点关注，关注博主不迷路，博主带你上高速，悄悄的学习，然后惊艳所有人，淦