gulp介绍

gulp 简介

根据官网对于gulp定义为：一个自动化并且能改善你工作流程的工具。我们可以利用gulp和JavaScript的灵活性来自动完成耗时且重复性的工作，并将它们组合为有效的构建管道。

gulp 安装

• 命令行工具安装 npm install --global gulp-cli
• 创建一个项目目录并进入该目录 npx mkdirp my-project cd my-project
• 创建package.json文件 npm init
• devDependencies中安装gulp npm install --save-dev gulp
• 验证您的gulp版本 gulp --version

gulp 的简单应用

使用文本编辑器，在项目根目录中创建一个名为gulpfile.js的文件，其中包含以下内容：

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

在项目目录中运行gulp命令

gulp

常用API

src()

创建一个流，以从文件系统中读取Vinyl对象。Vinyl对象官方的解释是

虚拟文件格式。当src（）读取文件时，将生成Vinyl对象来表示该文件-包括路径，内容和其他元数据。

创建一个Vinyl对象

var Vinyl = require('vinyl');

var jsFile = new Vinyl({
  cwd: '/',
  base: '/test/',
  path: '/test/file.js',
  contents: Buffer.from('var x = 123')
});

dest()

创建用于将Vinyl对象写入文件系统的流。

src() 与 dest() 简单使用

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

function copy() {
  return src('input/*.js')
    .pipe(dest('output/'));
}

exports.copy = copy;

series()

将任务功能和/或组合的操作组合为较大的操作，这些操作将依次依次执行。

series()的简单使用

const { series } = require('gulp');

function javascript(cb) {
  // body omitted
  cb();
}

function css(cb) {
  // body omitted
  cb();
}

exports.build = series(javascript, css);

parallel()

将任务功能和/或组合的操作组合为较大的操作，这些操作将同时执行

parallel()的简单使用

const { parallel } = require('gulp');

function javascript(cb) {
  // body omitted
  cb();
}

function css(cb) {
  // body omitted
  cb();
}

exports.build = parallel(javascript, css);

watch()

允许在发生更改时监视全局变量并运行任务。任务与任务系统的其余部分统一处理。

watch()的简单使用

const { watch } = require('gulp');

watch(['input/*.js', '!input/something.js'], function(cb) {
  // body omitted
  cb();
});

task()

在任务系统中定义任务。然后可以从命令行以及series（），parallel（）和lastRun（）API访问该任务。（官方不再推荐使用此API）

task()的简单使用

const { task } = require('gulp');

task('build', function(cb) {
  // body omitted
  cb();
});

最新的官方推荐用法

const { series } = require('gulp');

function clean(cb) {
  // body omitted
  cb();
}

function build(cb) {
  // body omitted
  cb();
}

exports.build = build;
exports.default = series(clean, build);

gulp的简单项目配置

• 图片压缩 ImageMin
• js 压缩 Js
• sass 配置 Sass
• 拷贝 Copy
• 清空 Clean
• 开发 dev
• 打包 build

const fs = require('fs');

const { src, dest, parallel, watch, series } = require('gulp');
const imagemin = require('gulp-imagemin');
const clean = require('gulp-clean');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');

const SOURCE = 'src';
const DESTING = 'dist';

const paths = {
    ImagePath: 'src/assets/image/**/*.{png,svg,jpg,jpeg}',
    JsPath: 'src/**/*.js',
    ScssPath: 'src/**/*.scss',
    CopyPath: ['src/**/*.{html,json}']
}

// 图片压缩
const ImageMin = () => {
    return src(paths.ImagePath, { base: SOURCE })
        .pipe(imagemin({ verbose: true }))
        .pipe(dest(DESTING));
};

// 清空目标文件夹
const Clean = () => {
    return src(DESTING, { read: false, allowEmpty: true }).pipe(clean({ force: true }));
};

// 压缩js
const Js = () => {
    return src(paths.JsPath, { base: SOURCE })
        .pipe(uglify())
        .pipe(dest(DESTING));
};

// Sass 转 css
const Sass = () => {
    return src(paths.ScssPath, { base: SOURCE })
        .pipe(sass({ outputStyle: 'compact' }).on('error', sass.logError))
        .pipe(dest(DESTING));
};

// 拷贝文件
const Copy = () => {
    return src(paths.CopyPath, { base: SOURCE }).pipe(dest(DESTING));
};

// 开发环境
const dev = series(Clean, Copy, ImageMin, (cb) => {
    const deleteFile = (filePath) => {
        let destFilePath = filePath.replace('src', 'dist');
        fs.unlinkSync(destFilePath);
    };

    // add watch
    const Options = { ignoreInitial: false };
    const JsWatch = watch(paths.JsPath, Options, Js);
    const SassWatch = watch(paths.ScssPath, Options, Sass);
    const CopyWatch = watch(paths.CopyPath, Options, Copy);

    // watch file delete
    JsWatch.on('unlink', deleteFile);
    SassWatch.on('unlink', deleteFile);
    CopyWatch.on('unlink', deleteFile);

    cb();
});

exports.ImageMin = ImageMin;
exports.Js = Js;
exports.Sass = Sass;
exports.Copy = Copy;
exports.Clean = Clean;

exports.dev = dev;
exports.build = series(Clean, ImageMin, parallel(Copy, Js, Sass));