自动化构建工具Gulp

Gulp基础使用

Gulp中文网 在首页面就展示了基本使用的步骤。

后面自己创建一个使用Gulp的用例。

首先全局安装Gulp客户端

npm install -g gulp-cli 

初始化项目

npm init --yes

在项目下安装Gulp

npm install gulp -D

在项目下新建一个gulpfile.js的Gulp入口文件。
在gulpfile.js中创建一个Gulp任务

const task1 = () => {
    console.log('gulp111 tast is running');
}

module.exports = {
    task1
}

该任务会虽然会执行出结果但是会有报错，因为在最新Gulp中支持的是异步任务所以在任务中应该有一个回调函数。

const task1 = (callback) => {
    console.log('gulp111 tast is running');
    callback()
}

module.exports = {
    task1
}

在任务中还可以配置默认执行任务项，执行gulp命令时就可以不用输入任务名。

const task1 = (callback) => {
    console.log('gulp111 tast is running');
    callback()
}
const task2 = (callback) => {
    console.log('gulp222 tast is running');
    callback()
}

module.exports = {
    default:task1,
    task2    
}

Gulp组合任务

组合式任务可以分为并行执行和串行执行两种方式。

并行执行

const gulp = require('gulp')
const task1 = (callback) => {
    setTimeout(() => {
        console.log('task1 is running');
        callback()
    },1000)
}
const task2 = (callback) => {
    setTimeout(() => {
        console.log('task2 is running');
        callback()
    },1000)
}
const task3 = (callback) => {
    setTimeout(() => {
        console.log('task3 is running');
        callback()
    },1000)
}
exports.p = gulp.parallel(task1,task2,task3)

串行执行

const gulp = require('gulp')
const task1 = (callback) => {
    setTimeout(() => {
        console.log('task1 is running');
        callback()
    },1000)
}
const task2 = (callback) => {
    setTimeout(() => {
        console.log('task2 is running');
        callback()
    },1000)
}
const task3 = (callback) => {
    setTimeout(() => {
        console.log('task3 is running');
        callback()
    },1000)
}
exports.s = gulp.series(task1,task2,task3)

组合任务就可以随意将任务进行排列组合进行执行。

Gulp文件操作

构建样式文件

Gulp是基于流 的构建系统，所以Gulp的文件操作也是以流的方式。

src：拿到输入的内容

pipe：管道

dest：目标

实现将less文件转换为css样式文件并且进行压缩后重命名操作。

Gulp插件可以在 Gulp官网插件查询 或者在 npm官网 查找安装。

const {src,dest} = require('gulp')
const less = require('gulp-less')
const cleancss = require('gulp-clean-css')
const rename = require('gulp-rename')
const autoprefixer = require('gulp-autoprefixer')

const style = () => {
    return src('src/style/index.less',{base:'src'})   //第二个参数为文件目录格式以src样式为准
    .pipe(less())   //less转化css
    .pipe(autoprefixer())   //解决兼容性问题
    .pipe(cleancss())   //将css代码进行格式化压缩
    .pipe(rename({'extname':'.min.css'}))    //将文件进行重新命名
    .pipe(dest('dist'))
}

module.exports = {
    style
}

文件目录：

构建脚本文件

安装构建js文件所需插件

const {src,dest} = require('gulp')
const rename = require('gulp-rename')
const babel = require('gulp-babel');
const uglify = require('gulp-uglify')

const script = () => {
    return src('src/js/index.js',{base:'src'})  //第二个参数为文件目录格式以src样式为准
    .pipe(babel({
        presets: ['@babel/env']
    }))     //代码格式化
    .pipe(uglify())     //代码压缩
    .pipe(rename({'extname':'.min.js'}))    //重命名
    .pipe(dest('dist'))
}

module.exports = {
    script
}

文件目录

构建结构文件

const {src,dest} = require('gulp')
const htmlmin = require('gulp-htmlmin')

const html = () => {
    return src('src/index.html')
    .pipe(htmlmin({
        collapseWhitespace:true,
        minifyCSS:true,
        minifyJS:true
    }))   //格式化html文件
    .pipe(dest('dist'))
}

module.exports = {	
    html
}

文件目录

组合构建

可以在Gulp中引入parallel方法进行异步构建。

const build = parallel(style,script,html)

可以实现同样的效果