gulp自动化构建项目

1. 介绍

gulp.js是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp是基于Node.js构建的，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 I/O 操作。Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 JavaScript源码来实现的。

Gulp侧重于前端开发的整个过程的控制管理（像是流水线），我们可以通过给gulp配置不同的task（通过Gulp中的gulp.task()方法配置，比如启动server、sass/less预编译、文件的合并压缩等等）来让gulp实现不同的功能，从而构建整个前端开发流程。

2.引入

首先gulp是依赖在node环境下的。关于Node的环境安装这里就不在赘述。

2.1 全局安装

全局安装gulp：

npm install -g gulp

2.2 作为项目开发依赖安装

首先初始化package.json

npm init -y

在项目中安装gulp

npm i --save-dev gulp // --save-dev或者—D都表示作为开发依赖进行安装

**注意：**全局安装的gulp只是让您的系统（电脑）增加了一个叫做gulp的命令，这个命令会调用当前目录下的 gulpfile.js 文件，并根据该文件的内容来执行相应的任务，而真正起到提供API功能的却是本地安装的gulp。

3.安装插件

gulp所处理的任务大多都是以插件的形式存在的，所以在使用前，需要先安装我们需要的一些插件到项目中

这里列举一些常用的插件：

• gulp-rename：重命名文件
• gulp-concat：合并文件
• gulp-filter：过滤文件
• gulp-uglify：压缩Js
• gulp-csso：压缩优化CSS
• gulp-html-minify：压缩HTML
• gulp-imagemin：压缩图片
• gulp-zip:zip压缩文件
• gulp-autoprefixer：自动为css添加浏览器前缀
• gulp-sass：编译sass
• gulp-babel：将ES6代码编译成ES5

这里将本文所用到的插件都安装进去：

 cnpm i gulp gulp-less gulp-sass gulp-imagemin gulp-concat gulp-connect gulp-content-includer gulp-jslint gulp-minify-css gulp-uglify gulp-watch gulp-rename gulp-autoprefixer gulp-run-sequence -S-dev

这里可以看到package.json中已经有了相关依赖

"dependencies": {
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.7.0",
    "gulp-content-includer": "^0.0.7",
    "gulp-imagemin": "^7.1.0",
    "gulp-jslint": "^1.0.10",
    "gulp-less": "^4.0.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^2.0.0",
    "gulp-run-sequence": "^0.3.2",
    "gulp-sass": "^4.1.0",
    "gulp-uglify": "^3.0.2",
    "gulp-watch": "^5.0.1"
  }
}

3.1 创建gulpfile.js文件

该文件需要配置在项目根目录下，作用是配置Gulp。文件名必须为gulpfile.js，否则无法执行。

接着我们可以学习几个关于gulp的api，方便我们继续往下看：

// 定义一个 task,声明它的名称, 任务依赖, 和任务内容.
gulp.task(name[, deps], fn)

// 读取文件,参数为文件路径字符串或数组, 支持通配符.
gulp.src(globs[, options])

// 写入文件, 作为pipe的一个流程.文件夹不存在时会被自动创建.
gulp.dest(path[, options])

// 监控文件,执行任务.
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

创建一个简单的实例：

var gulp = require('gulp');
gulp.task('default', function() {
 // 将你的默认的任务代码放在这
});

想要执行只需要在终端输入：gulp default/gulp（名称为default时可省略名称）

学习完后我们来正式开始配置一些复杂的任务。

3.2 导入插件

const GulpClient = require("gulp");
const autoPrefixer = require("gulp-autoprefixer");
const less = require("gulp-less");
const minifyCSS = require("gulp-minify-css");
const rename = require("gulp-rename");
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const GulpUglify = require("gulp-uglify");
const imagemin = require("gulp-imagemin");
const runsequence = require('gulp-run-sequence');
const connect = require('gulp-connect');

3.3 编译less文件

需要用到的插件：

// 编译less文件
GulpClient.task('less',() => {
    return GulpClient.src('./css/**/*.less')
    .pipe(less())//编译less
    .pipe(minifyCSS())//简化css
    .pipe(autoPrefixer({
        overrideBrowserslist: ['last 2 version'], // 兼容最新的两个版本
        cascade: false
    }))
    .pipe(rename({
        suffix: '.min' // 将压缩后的css文件名添加上.min
    }))
    .pipe(GulpClient.dest('dist/css'))
})

3.4 编译sass文件

GulpClient.task('sass',() => {
    return GulpClient.src('./css/**/*.{sass,scss}')
    .pipe(sass())
    .pipe(minifyCSS())
    .pipe(rename({
        suffix:'.min'
    }))
    .pipe(GulpClient.dest('dist/css'))
})

3.5 压缩css代码

GulpClient.task('css',() => {
    return GulpClient.src('./css**/*.css')
    .pipe(minifyCSS())
    .pipe(rename({
        suffix:'.min'
    }))
    .pipe(GulpClient.dest('dist/css'))
})

3.6 压缩js代码

GulpClient.task('js',() => {
    return GulpClient.src('./js/**/*.js')
    .pipe(concat('vender.js'))//合并
    .pipe(GulpUglify())//丑化
    .pipe(GulpClient.dest('./dist/js'))//目标文件
})

3.7 压缩图片

GulpClient.task('images',() => {
    return GulpClient.src('./img/**/*.{jpg,png,gif}')
    .pipe(imagemin())//压缩图片
    .pipe(GulpClient.dest('./dist/img'))
})

3.8 输出数据（json/xml等）

GulpClient.task('data',() => {
    return GulpClient.src('./data/**/*.{json,xml}')
    .pipe(imagemin())//压缩图片
    .pipe(GulpClient.dest('./dist/data'))
})

3.9 复制index.html文件到产品目录dist下

GulpClient.task('copy-index',() => {
    return GulpClient.src('index.html')
    .pipe(GulpClient.dest('./dist/'))
})

4. 编译所有文件（执行所有任务）

直接在终端运行gulp build即可

GulpClient.task('build',GulpClient.series(['less','sass','css','js','images','data','copy-index','html']),() => {
    runsequence('concat');
    console.log('编译成功');
})

4.1 自动监视

GulpClient.task('watch',async () => {
    GulpClient.watch('./css/**/*.less',GulpClient.series(['less']))
    GulpClient.watch('./css/**/*.{sass,scss}',GulpClient.series(['sass']))
    GulpClient.watch('./css**/*.css',GulpClient.series(['css']))
    GulpClient.watch('./js/**/*.js',GulpClient.series(['js']))
    GulpClient.watch('./img/**/*.{jpg,png,gif}',GulpClient.series(['images']))
    GulpClient.watch('./data/**/*.{json,xml}',GulpClient.series(['data']))
    GulpClient.watch('index.html',GulpClient.series(['copy-index']))
    GulpClient.watch('./html/**/*.html',GulpClient.series(['html']))
})

4.2 在服务端启动

GulpClient.task('server',async () => {
    connect.server({
        root:'dist',
        livereload:'true'//热加载
    })
})

4.3 设置自动化

GulpClient.task('default',GulpClient.series('build','server'))