@acanto/gulp 中文文档教程

Question

流构建系统

< /a> < /a>

What is gulp?

• Automation - gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow.
• Platform-agnostic - Integrations are built into all major IDEs and people are using gulp with PHP, .NET, Node.js, Java, and other platforms.
• Strong Ecosystem - Use npm modules to do anything you want + over 3000 curated plugins for streaming file transformations.
• Simple - By providing only a minimal API surface, gulp is easy to learn and simple to use.

What's new in 4.0?!

• The task system was rewritten from the ground-up, allowing task composition using series() and parallel() methods.
• The watcher was updated, now using chokidar (no more need for gulp-watch!), with feature parity to our task system.
• First-class support was added for incremental builds using lastRun().
• A symlink() method was exposed to create symlinks instead of copying files.
• Built-in support for sourcemaps was added - the gulp-sourcemaps plugin is no longer necessary!
• Task registration of exported functions - using node or ES exports - is now recommended.
• Custom registries were designed, allowing for shared tasks or augmented functionality.
• Stream implementations were improved, allowing for better conditional and phased builds.

gulp for enterprise

作为 Tidelift 订阅

的一部分提供 gulp 和数千个其他软件包的维护者正在与 Tidelift 合作，为您用于构建应用程序的开源依赖项提供商业支持和维护。 节省时间、降低风险并改善代码健康状况，同时向维护人员支付您使用的确切依赖项的费用。 了解更多。

Installation

关注我们的 < a href="https://gulpjs.com/docs/en/getting-started/quick-start">快速入门指南。

Roadmap

在 https://github.com/orgs/gulpjs/projects 上了解我们所有正在进行的工作和未解决的问题。

Documentation

查看入门指南和API 文档 在我们的网站上！

请原谅我们的灰尘！ 在我们更新所有内容之前，所有其他文档都将落后。 如果有问题，请打开一个问题。

Sample gulpfile.js

这个文件会让你体验一下 gulp 的功能。

var gulp = require('gulp');
var less = require('gulp-less');
var babel = require('gulp-babel');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var cleanCSS = require('gulp-clean-css');
var del = require('del');

var paths = {
  styles: {
    src: 'src/styles/**/*.less',
    dest: 'assets/styles/'
  },
  scripts: {
    src: 'src/scripts/**/*.js',
    dest: 'assets/scripts/'
  }
};

/* Not all tasks need to use streams, a gulpfile is just another node program
 * and you can use all packages available on npm, but it must return either a
 * Promise, a Stream or take a callback and call it
 */
function clean() {
  // You can use multiple globbing patterns as you would with `gulp.src`,
  // for example if you are using del 2.0 or above, return its promise
  return del([ 'assets' ]);
}

/*
 * Define our tasks using plain functions
 */
function styles() {
  return gulp.src(paths.styles.src)
    .pipe(less())
    .pipe(cleanCSS())
    // pass in options to the stream
    .pipe(rename({
      basename: 'main',
      suffix: '.min'
    }))
    .pipe(gulp.dest(paths.styles.dest));
}

function scripts() {
  return gulp.src(paths.scripts.src, { sourcemaps: true })
    .pipe(babel())
    .pipe(uglify())
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest(paths.scripts.dest));
}

function watch() {
  gulp.watch(paths.scripts.src, scripts);
  gulp.watch(paths.styles.src, styles);
}

/*
 * Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel`
 */
var build = gulp.series(clean, gulp.parallel(styles, scripts));

/*
 * You can use CommonJS `exports` module notation to declare tasks
 */
exports.clean = clean;
exports.styles = styles;
exports.scripts = scripts;
exports.watch = watch;
exports.build = build;
/*
 * Define default task that can be called by just running `gulp` from cli
 */
exports.default = build;

Use latest JavaScript version in your gulpfile

除了 import/export 语法外，大多数新版本的 node 都支持 Babel 提供的大部分功能。 当只需要该语法时，重命名为 gulpfile.esm.js，安装 esm 模块, 并跳过下面的 Babel 部分。

Node 已经支持很多 ES2015+ 特性，但是为了避免兼容性问题，我们建议安装 Babel 并重命名你的 gulpfile.js 到 gulpfile.babel.js。

npm install --save-dev @babel/register @babel/core @babel/preset-env

然后使用预设配置创建一个 .babelrc 文件。

{
  "presets": [ "@babel/preset-env" ]
}

这是上面用 ES2015+ 编写的相同示例。

import gulp from 'gulp';
import less from 'gulp-less';
import babel from 'gulp-babel';
import concat from 'gulp-concat';
import uglify from 'gulp-uglify';
import rename from 'gulp-rename';
import cleanCSS from 'gulp-clean-css';
import del from 'del';

const paths = {
  styles: {
    src: 'src/styles/**/*.less',
    dest: 'assets/styles/'
  },
  scripts: {
    src: 'src/scripts/**/*.js',
    dest: 'assets/scripts/'
  }
};

/*
 * For small tasks you can export arrow functions
 */
export const clean = () => del([ 'assets' ]);

/*
 * You can also declare named functions and export them as tasks
 */
export function styles() {
  return gulp.src(paths.styles.src)
    .pipe(less())
    .pipe(cleanCSS())
    // pass in options to the stream
    .pipe(rename({
      basename: 'main',
      suffix: '.min'
    }))
    .pipe(gulp.dest(paths.styles.dest));
}

export function scripts() {
  return gulp.src(paths.scripts.src, { sourcemaps: true })
    .pipe(babel())
    .pipe(uglify())
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest(paths.scripts.dest));
}

 /*
  * You could even use `export as` to rename exported tasks
  */
function watchFiles() {
  gulp.watch(paths.scripts.src, scripts);
  gulp.watch(paths.styles.src, styles);
}
export { watchFiles as watch };

const build = gulp.series(clean, gulp.parallel(styles, scripts));
/*
 * Export a default task
 */
export default build;

Incremental Builds

您可以使用以下命令在任务运行之间过滤掉未更改的文件 gulp.src 函数的 since 选项和 gulp.lastRun：

const paths = {
  ...
  images: {
    src: 'src/images/**/*.{jpg,jpeg,png}',
    dest: 'build/img/'
  }
}

function images() {
  return gulp.src(paths.images.src, {since: gulp.lastRun(images)})
    .pipe(imagemin())
    .pipe(gulp.dest(paths.images.dest));
}

function watch() {
  gulp.watch(paths.images.src, images);
}

任务运行时间保存在内存中，并在 gulp 退出时丢失。 它只会 在运行 images 任务时节省 watch 任务的时间 第二次。

Want to contribute?

任何人都可以帮助改善这个项目 - 查看我们的贡献指南！

Backers

支持我们每月捐款并帮助我们继续我们的活动。

Sponsors

成为赞助商在 Github 上的自述文件中获取您的徽标。