网站建设之Gulp.js入门 HTML5+CSS3, 网站制作, 网站建设, 网站开发, 网站设计厦门网站建设

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 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文件连接起来，输出到主目录，然后将其拼写并保存到主目录。

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

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

该gulp automate任务监视多个文件夹中我们的scss和js文件中的更改，并且如果检测到更改，则将执行我们定义的两个任务。

总览

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

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

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

网站建设之Gulp.js入门