gulp入门_Gulp.js入门

Gulp是一种工具，可让您自动执行工作流程的各个部分，从而每天可以节省大量时间。 无论您是不时创建HTML线框的开发人员还是设计师，我都建议您深入研究。

在本文中，我们将介绍使用Gulp的基础知识-从安装到基本语法，以及几个示例。 到本文结尾，您应该能够找到，安装和使用其他人为Gulp创建的软件包，以编译CSS预处理器，优化图像，创建精灵，连接文件等等！

安装Gulp

我们将在OSX和Linux中使用Terminal来安装Gulp。 对于Windows，建议您使用Cygwin， Cmder或WSL（Linux的Windows子系统） 。 我将它们简称为Terminal。

首先，我们将确保已在Compter中安装Node.js和NPM。 打开终端并输入npm -v并按Enter。 如果您看到显示的版本号，则说明您已经安装了它们。

如果收到“找不到命令”（或类似错误），请直接转到Node.js下载页面，然后为您的系统选择适当的软件包。 安装后， npm命令将在终端中可用。

现在，我们可以在终端中键入以下命令来安装Gulp CLI。

npm install --global gulp-cli

这将使我们能够运行gulp命令来执行Gulp任务。

将Gulp软件包添加到项目

这个Gulp包将处理并定义要在我们的项目中运行的Gulp任务。 要安装，我们可以输入以下命令：

npm install --save-dev gulp

这会将Gulp软件包安装到我们项目文件夹中的node_modules文件夹中，并将Gulp注册为项目“开发”依赖项。 基本上是在说Gulp是我们仅在开发环境中使用的工具。

Gulp文件

Gulpfile是神奇的地方。 在这里定义所需的自动化以及何时发生 自动化 。 通过创建一个名为gulpfile.js的文件并将以下代码粘贴到其中，来创建一个空的默认任务。

const gulp = require('gulp');

gulp.task('default', function() {
  // This does nothing for now, we'll add functionality in a moment...
});

保存该文件后，您可以返回到终端并单独运行gulp命令。 Gulp会检测到它所在的项目并运行默认任务-我们刚刚创建的任务。 您应该会看到以下内容：

由于任务为空，所以这里实际上什么也没发生，但是工作正常。 让我们来看一些正确的例子！

复制文件

我会承认这一点很无聊，但是它将帮助您轻松地了解正在发生的事情。

在您的项目文件夹中，创建一个名为to_copy.txt的文件和一个名为dev的文件夹。 让我们进入Gulpfile并创建一个名为copy的新任务。

const gulp = require('gulp');
  gulp.task('default', function () {
    return gulp.src('file.txt')
        .pipe( gulp.dest('dist') );
});

第一行定义了一个名为copy的任务。 在其中，我们使用gulp.src来指定此任务的目标文件-在这种情况下，它是一个名为to_copy.txt文件。

然后，将这些文件通过管道传递到gulp.dest函数，该函数指定了我们要将这些文件放置在何处—我使用了dev目录。

返回您的终端并输入gulp copy来运行此任务，它将把指定的文件复制到指定的目录，如下所示：

管道命令是Gulp的核心。 这是在命令之间移动数据的有效方法。 src命令指定通过管道传输到dest命令的文件。 在更复杂的情况下，我们将在指定目标位置之前将文件通过管道传递给其他命令。

您还应该注意，源可以作为单个文件或多个文件给出。 如果我们有一个名为src的文件夹，并且想要将所有文件从dist文件夹移入其中，则可以使用以下命令：

const gulp = require('gulp');
  gulp.task('default', function () {
    return gulp.src('src/*')
        .pipe( gulp.dest('dist') );
});

星号将匹配目录中的任何内容。 您还可以匹配所有子目录中的所有文件，并进行其他各种形式的匹配。 查看node-glob文档以获取更多信息。

编译Sass

在开发网站时，将Sass之类CSS预处理器编译为CSS是常见的任务。 借助Gulp，使用几个模块（即node-sass和gulp-sass）非常容易做到。 您可以在终端中键入以下命令来安装这些模块：

npm install node-sass gulp-sass --save-dev

完成后，您可以使用程序包指示的语法来编译代码。 为此，请创建一个名为styles.scss的文件，其内容如下：

$primary: #ff9900;
body {
    background: $primary;
}

现在，在Gulpfile中创建以下Gulp任务。

const sass = require('gulp-sass');
sass.compiler = require('node-sass');
  
gulp.task('sass', function () {
    return gulp.src('*.scss')
        .pipe( sass() )
        .pipe( gulp.dest('css') );
});

当您运行gulp gulp sass ，所有具有scss扩展名的文件都将通过管道传递给sass函数，该函数会将其转换为css。 然后将它们通过管道传递到目标函数，后者将其放置在css文件夹中。

观看文件和文件夹

到目前为止，这一切都非常方便，但是每次运行任务时我们仍然需要键入命令，这效率不高，尤其是在样式表更改方面。 Gulp允许您查看文件中的更改并自动运行命令。

在Gulpfile中，创建一个名为automate的命令，该命令将使用watch命令监视一组文件的更改，并在文件更改时运行特定的命令。

const sass = require('gulp-sass');
sass.compiler = require('node-sass');

gulp.task('sass', function () {
    return gulp.src('*.scss')
        .pipe( sass() )
        .pipe( gulp.dest('css') );
});

gulp.task('automate', function() {
    return gulp.watch('*.scss', gulp.parallel('sass'));
});

如果我们输入gulp automate ，它将启动和完成任务，但不会返回提示，因为它正在监视更改。 我们已指定我们要监视根目录中的所有scss文件，如果它们发生更改，我们希望运行我们先前设置的sass命令。

如果我们更改style.scss文件，它将自动编译为css目录中的css文件。

运行多个任务

在许多情况下，您可能需要运行多个任务。 观看javascript文件夹时，您可能需要编译连接两个文件，然后继续缩小它们。 有两种方法可以完成此操作。

如果任务相关，我喜欢将它们链接起来。 一个很好的例子是javascript文件的串联和缩小 。 我们首先将文件传递给concat操作，然后将它们传递给gulp-uglify，然后使用destination函数输出它们。

如果任务无关，则可以调用多个任务 。 一个示例是一个任务，我们要连接和缩小脚本，还要编译Sass。 这是他完整的Gulpfile外观。

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const sass = require('gulp-sass');
sass.compiler = require('node-sass');

gulp.task('scripts', function() {
  return gulp.src('js/**/*.js')
    .pipe(concat('scripts.js'))
    .pipe(gulp.dest('js'))
    .pipe(uglify())
    .pipe(gulp.dest('js'))
});

gulp.task('sass', function () {
  return gulp.src('*.scss')
      .pipe( sass() )
      .pipe( gulp.dest('css') );
});

gulp.task('automate', function() {
    gulp.watch(['*.scss', 'js/**/*.js'], gulp.parallel('sass', 'scripts'));
});


gulp.task('default', ['scripts', 'styles']);

如果您在终端中输入gulp scripts ，则js目录中的所有javascript文件都将被串联起来，输出到主目录中，然后经过uglified并保存到主目录中。

如果键入gulp gulp sass ，则所有的scss文件都将被编译并保存到css目录中。

如果键入gulp （默认任务），则将运行scripts任务，然后运行styles任务。

该gulp automate任务手表多个文件夹在我们SCSS和js文件的更改和将执行我们定义两个任务，如果检测到变化。

总览

使用Gulp并不困难，实际上，由于它的语法更简单，因此许多人都喜欢它而不是Grunt 。 记住创建新自动化时要采取的步骤：

• 搜索插件
• 安装插件
• 在Gulpfile中需要插件
• 使用文档中的语法

Gulp中可用的五个命令（任务，运行，监视，src，dest）是您唯一需要知道的命令，所有第三方插件都有出色的文档。 这是我使用的一些东西的列表，您现在就可以开始使用：

• 使用gulp-image-optimization优化图像
• 用gulp-sprite创建图像精灵
• 用gulp-concat连接文件
• 使用gulp - uglify压缩文件
• 使用gulp-del删除文件
• 用gulp-jslint进行 Javascript linting
• 使用gulp-jsonlint进行 JSON 整理
• 带有gulp -autoprefixer的 Autoprefix CSS
• 使用gulp-frep搜索和替换
• 使用gulp-minify-css缩小CSS

翻译自: https://www.hongkiat.com/blog/getting-started-with-gulp-js/