gulp 4.x任务处理_使用Gulp.js轻松自动化您的任务

gulp 4.x任务处理

As developers we often need to look at the tools we use and decide if we are using the right tool for the job. Chris did an awesome write up on Grunt early last year. But maybe Grunt just isn't right for you.

作为开发人员，我们经常需要查看我们使用的工具，并确定我们是否为工作使用了正确的工具。 克里斯在去年年初对Grunt进行了出色的撰写。 但是也许Grunt并不适合您。

Gulp is a streaming build system, by using node's streams file manipulation is all done in memory, and a file isn't written until you tell it to do so.

Gulp是一个流式构建系统，通过使用节点的流，文件操作全部在内存中完成，并且只有在您告诉文件这样做之前，它才被写入。

Much like Grunt, Gulp is a javascript task runner. Gulp however prefers code over configuration. Being that your tasks are written in code, gulp feels more like a build framework, giving you the tools to create tasks that fit your specific needs.

就像Grunt一样，Gulp是一个JavaScript任务运行器。 但是Gulp更喜欢使用代码而不是配置。 由于您的任务是用代码编写的，因此gulp感觉更像是一个构建框架，为您提供了创建满足您特定需求的工具的工具。

安装 (Installation)

Gulp is easy to get installed and running. The steps are:

Gulp易于安装和运行。 这些步骤是：

1. Install Gulp Globally
   全局安装Gulp
2. Install Gulp In devDependencies
   在devDependencies中安装Gulp
3. Create a gulpfile.js
   创建一个gulpfile.js

The first step is to get gulp installed globally.

第一步是在全球范围内安装gulp。

$ npm install --global gulp

After that, you'll need gulp as a devDependencies on any of your projects you want to use it in. Make sure that you have your package.json created by manually creating it or typing npm init. Once you have your package.json, let's install gulp into devDependencies with:

之后，您将需要devDependencies作为您要在其中使用任何项目的devDependencies 。请确保通过手动创建或输入npm init来创建package.json 。 获得package.json ，让我们使用以下命令将devDependencies安装到devDependencies中：

$ npm install --save-dev gulp

And finally you'll need a gulpfile.js in your project root that contains your tasks. As an intermediary step we'll add the gulp utilites plugin so we have a runnable task that visibly shows it executed.

最后，您将在项目根目录中需要一个包含任务的gulpfile.js 。 作为中间步骤，我们将添加gulp utilites插件，以便我们有一个可运行的任务，以可见方式显示其已执行。

$ npm install --save-dev gulp-util

In the gulpfile.js file that you just created, we'll make a simple gulpfile that just logs that gulp is running.

在您刚创建的gulpfile.js文件中，我们将制作一个简单的gulpfile，仅记录gulp正在运行。

/* File: gulpfile.js */

// grab our gulp packages
var gulp  = require('gulp'),
    gutil = require('gulp-util');

// create a default task and just log a message
gulp.task('default', function() {
  return gutil.log('Gulp is running!')
});

And if everything went as expected running gulp in your command line should give you output similar to.

并且，如果一切按预期进行，那么在命令行中运行gulp应该会给您类似的输出。

> gulp
[12:32:08] Using gulpfile ~/Projects/gulp-scotch-io/gulpfile.js
[12:32:08] Starting 'default'...
[12:32:08] Gulp is running!
[12:32:08] Finished 'default' after 1 ms

总览 (Overview)

本教程的目录结构 (Directory Structure for this Tutorial)

We should probably take a second to define our project's structure. For this simple demo we'll use the following structure, you can leave the files blank for now.

我们可能应该花一点时间来定义项目的结构。 对于这个简单的演示，我们将使用以下结构，您现在可以将文件留空。

public/
  |  assets/
  |  |  stylesheets/
  |  |  |  style.css
  |  |  javascript/
  |  |  |  vendor/
  |  |  |  |  jquery.min.js
  |  |  |  bundle.js 
source/
  |  javascript/
  |  |  courage.js
  |  |  wisdom.js
  |  |  power.js
  |  scss/
  |  |  styles.scss
  |  |  grid.scss
gulpfile.js
packages.json

source is the folder where we will do our work. assets/style.css will be created by gulp when we process and combine our SASS files in source/scss. The bundle.js file will be created by gulp when we minify and combine all our JS files.

source是我们将在其中进行工作的文件夹。 当我们在source/scss处理并合并SASS文件时， source/scss将创建assets/style.css 。 当我们缩小并合并所有JS文件时， bundle.js将创建bundle.js文件。

gulp的简要概述 (A brief overview of gulp)

Gulp is a streaming build system. It's streaming nature is what allows it to pipe and pass around the data being manipulated or used by it's plugins. The plugins are intended to only do one job each, so it's not uncommon to pass a singular file through multiple plugins.

Gulp是一个流式构建系统。 它具有流媒体性质，因此可以传递和传递由其插件操纵或使用的数据。 每个插件只能完成一项工作，因此通过多个插件传递单个文件并不罕见。

The gulp api is incredibly light containing 4 top level functions. They are

gulp api非常轻巧，包含4个顶级功能 。 他们是

• gulp.task
  gulp.task
• gulp.src
  gulp.src
• gulp.dest
  gulp.dest
• gulp.watch
  gulp.watch

gulp.task defines your tasks. Its arguments are name, deps and fn.

gulp.task定义您的任务。 它的参数是name，deps和fn。

Where name is a string, deps is an array of task names, and fn is the function that performs your task. Deps is optional so gulp.task in it's two forms are:

其中name是字符串，deps是任务名称的数组，fn是执行任务的函数。 Deps是可选的，因此gulp.task有两种形式：

gulp.task('mytask', function() {
  //do stuff
});

gulp.task('dependenttask', ['mytask'], function() {
  //do stuff after 'mytask' is done.
});

gulp.src points to the files we want to use. It's parameters are globs and an optional options object. It uses .pipe for chaining it's output into other plugins.

gulp.src指向我们要使用的文件。 它的参数是glob和一个可选的options对象。 它使用.pipe将其输出链接到其他插件。

gulp.dest points to the output folder we want to write files to.

gulp.dest指向我们要写入文件的输出文件夹。

gulp.src and gulp.dest used to simply copy files looks like:

用于简单地复制文件的gulp.src和gulp.dest如下所示：

gulp.task('copyHtml', function() {
  // copy any html files in source/ to public/
  gulp.src('source/*.html').pipe(gulp.dest('public'));
});

gulp.watch like gulp.task has two main forms. Both of which return an EventEmitter that emits change events. The first of which takes a glob, an optional options object, and an array of tasks as it's parameters.

像gulp.watch一样的gulp.task有两种主要形式。 两者都返回一个发出change事件的EventEmitter。 第一个参数包含一个glob，一个可选的options对象和一个任务数组。

gulp.watch('source/javascript/**/*.js', ['jshint']);

Simply put, when any of the files matched by the glob change, run the tasks. In the above code block, when any files in the source/javascript subfolders that have an extension of .js change, then the task jshint will be run against those files.

简而言之，当与全局匹配的任何文件发生更改时，请运行任务。 在上面的代码块中，当source/javascript子文件夹中具有.js扩展名的任何文件发生更改时，任务jshint都将针对这些文件运行。

The second form takes the glob, an optional options object, and an optional callback that will run when a change is picked up.

第二种形式采用glob，一个可选的options对象和一个可选的回调，这些回调将在拾取更改后运行。

You can compare this to grunt, which requires a secondary package to have the watch feature. Gulp has it built right in.

您可以将其与grunt进行比较，后者需要辅助包装才能具有手表功能。 Gulp内置了它。

For more information refer to the api docs.

有关更多信息，请参考api文档 。

实际有用的任务。 (Tasks that are actually useful.)

Being able to tell us that it is running is a fine task, but lets get gulp to do some real tasks for us.

能够告诉我们它正在运行是一项很好的任务，但是让gulp为我们做一些实际的任务。

We'll start with simple tasks and work our way up.

我们将从简单的任务开始，然后逐步进行。

Jshint保存 (Jshint on save)

Our first task will lint our javascript (check for errors) using jshint and we'll also set it up to run this task each time we save a javascript file.

我们的第一个任务将使用jshint整理我们的javascript（检查错误），并且还将设置它在每次保存javascript文件时运行此任务。

To begin we'll need the gulp-jshint package, grab it with npm. We'll also need a reporter for jshint to make the output nicely formatted and color coded; we'll grab that too.

首先，我们需要gulp-jshint软件包，使用npm进行抓取。 我们还需要一个jshint的报告程序，以使输出格式正确并进行颜色编码。 我们也会抓住它。

$ npm install --save-dev gulp-jshint jshint-stylish

Now we'll add the lint task to our gulpfile.

现在，我们将lint任务添加到gulpfile中。

/* File: gulpfile.js */

// grab our packages
var gulp   = require('gulp'),
    jshint = require('gulp-jshint');

// define the default task and add the watch task to it
gulp.task('default', ['watch']);

// configure the jshint task
gulp.task('jshint', function() {
  return gulp.src('source/javascript/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'));
});

// configure which files to watch and what tasks to use on file changes
gulp.task('watch', function() {
  gulp.watch('source/javascript/**/*.js', ['jshint']);
});

So lets step through what we've done.

因此，让我们逐步完成我们的工作。

We've rewritten our default task to have the watch task as dependency. What this means is that running

我们已经重写了默认任务，以将watch任务作为依赖项。 这意味着跑步

$ gulp

will run the watch task.

将运行监视任务。

Now lets look at the new jshint task. It sources any .js files that exist in source/javascript or any of it's subdirectories. So a file at source/javascript/carousel/main.js would be picked up for the task just as well. These files are then passed into our gulp-jshint plugin, which then passes it into the stylish reporter to give us the jshint results.

现在，让我们看一下新的jshint任务。 它获取source/javascript或其任何子目录中存在的所有.js文件。 因此，也会为该任务选择source/javascript/carousel/main.js的文件。 然后将这些文件传递到我们的gulp-jshint插件，然后将其传递到时尚的报告程序中，以提供jshint结果。

We can run this task by doing:

我们可以通过执行以下任务来运行此任务：

$ gulp jshint

Super easy!

超级容易！

Alright, now what about that watch task. It's simple actually, if a change is detected in any of our javascript files, it runs the jshint task.

好了，那看守任务呢？ 实际上很简单，如果在我们的任何javascript文件中检测到更改，它就会运行jshint任务。

使用libsass进行Sass编译 (Sass Compilation with libsass)

Sass serves as a way to extend CSS giving support for variables, nested rules, mixins, inline imports, and more.

Sass是扩展CSS的一种方式，它支持变量，嵌套规则，mixin，内联导入等。

Ken Wheeler has already done an awesome write up on Sass that you can find here.

肯·惠勒（Ken Wheeler）已经在Sass上做了很棒的文章，您可以在这里找到。

For sass compilation we'll use gulp-sass

对于sass编译，我们将使用gulp-sass

NOTE: gulp-sass uses node-sass which in turn uses libsass. On windows you'll need to install python 2.7.x and Visual Studio Express 2013 in order to compile libsass. Mac and Linux will use whatever gcc is available.

注意： gulp-sass使用node-sass，后者又使用libsass。 在Windows上，您需要安装python 2.7.x和Visual Studio Express 2013才能编译libsass。 Mac和Linux将使用任何可用的gcc。

An alternative is to use gulp-ruby-sass, which uses ruby and the sass gem instead.

一种替代方法是使用gulp-ruby-sass，它使用ruby和sass gem。

/* file: gulpfile.js */

var gulp   = require('gulp'),
    jshint = require('gulp-jshint'),
    sass   = require('gulp-sass');

/* jshint task would be here */

gulp.task('build-css', function() {
  return gulp.src('source/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('public/assets/stylesheets'));
});

/* updated watch task to include sass */

gulp.task('watch', function() {
  gulp.watch('source/javascript/**/*.js', ['jshint']);
  gulp.watch('source/scss/**/*.scss', ['build-css']);
});

We can also add sourcemaps using gulp-sourcemaps. If you've never used sourcemaps they're an awesome feature that map processed, minified , or other modified files to their original sources.

我们还可以使用gulp-sourcemaps添加gulp-sourcemaps 。 如果您从未使用过源地图，则它们是一项了不起的功能，可将已处理，缩小或其他修改的文件映射到其原始源。

A list of the plugins that support gulp-sourcemaps can be found here.

在此处可以找到支持gulp-sourcemaps的插件列表。

/* file: gulpfile.js */
var gulp       = require('gulp'),
    jshint     = require('gulp-jshint'),
    sass       = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps');

gulp.task('build-css', function() {
  return gulp.src('source/scss/**/*.scss')
    .pipe(sourcemaps.init())  // Process the original sources
      .pipe(sass())
    .pipe(sourcemaps.write()) // Add the map to modified source.
    .pipe(gulp.dest('public/assets/stylesheets'));
});

Javascript连贯并缩小 (Javascript concat and minify)

When working with a lot of javascript, you usually get to a point where you need to pull it all together. The general purpose plugin gulp-concat allows you to accomplish that easily.

当使用大量的javascript时，通常会达到需要将它们放在一起的地步。 通用插件gulp-concat可让您轻松完成此任务。

We can also go a step further and run it through uglify also to get a much smaller filesize.

我们还可以更进一步，并通过uglify运行它来获得更小的文件大小。

Additionally, we'll conditionally apply uglify based on whether we're building for production.

此外，我们将根据我们是否要生产来有条件地应用uglify。

gulp.task('build-js', function() {
  return gulp.src('source/javascript/**/*.js')
    .pipe(sourcemaps.init())
      .pipe(concat('bundle.js'))
      //only uglify if gulp is ran with '--type production'
      .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop()) 
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('public/assets/javascript'));
});

摘要 (Summary)

We've only scratched the surface of gulp. Gulp can be as complex or as simple as you need it to be, and because it's just code you can do just about anything you want as a task.

我们只是擦了擦牙胶的表面。 Gulp可以像您需要的那样复杂或简单，并且因为它只是代码，所以您几乎可以做任何想做的事情。

From as simple as concating together javascript files, to automatically deploying to an S3 bucket on save. Gulp gives you the tools to do what you want quickly and easily.

从简单的将javascript文件放在一起，到保存时自动部署到S3存储桶。 Gulp为您提供了快速轻松地完成所需任务的工具。

翻译自: https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js

gulp 4.x任务处理