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(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'))
复制代码