前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

2024年11月23日

Gulp 教程:JavaScript中执行自动化任务

我能不能有一个教程来确切地告诉我我需要做什么和知道什么来设置 Gulp，而不是陷入一些关于 HTML 语义的无关讨论，你想知道吗？是的，你可以。在这里。

下面为您介绍

如果您正在寻找一个不做任何假设的教程，并且会列出安装 Gulp 的每个步骤 - 从头开始，按顺序，没有任何间隙，那么本文适合您。

本指南也是在Mac上制作的。对于Windows，几个步骤会有所不同。

本教程目标

  • 安装所有必要的东西，让 Gulp 启动并运行。
  • 将多个 Sass 文件编译为一个 CSS 文件，应用供应商前缀，然后缩小。

简要概述

Gulp.js - 流式构建系统是一个 JavaScript 任务运行程序，可以自动为您处理冗余任务。像许多其他有用的技术工具一样，Gulp没有“初学者入门”指南可言。实际上，他们的入门指南从第 6 步左右开始。如果您已经知道 Node 和 npm 的工作原理并安装了所有内容，那就太好了 - 但初学者只会更加困惑和沮丧。

我将快速总结几个重要的概念。在开始取得一些进展以进行澄清后，请随时向上滚动到此内容。

  • Node.js - 一个支持运行服务器端 JavaScript for Web 的环境.
  • npm - Node.js的包管理器。一个工具，允许您快速轻松地设置本地节点环境和插件。
  • Local vs. Global - Node.js 是全局安装的，但 Gulp 及其所有插件将按项目在本地安装。
  • Task Runner - 像 Gulp 这样的任务运行程序可以自动化您的所有流程，因此您不必考虑它们。 Gulp 要求 package.json 和 gulpfile.js.

步骤

就我而言，我将尝试创建丢失的Gulp初学者指南。我列出了这些步骤，以便您知道要进入的内容.

  1. Install Xcode Command Line Tools
  2. Install Homebrew
  3. Install Node.js
  4. Install Gulp globally
  5. Install Node and Gulp locally
  6. Install Gulp plugins
  7. Set up project

有很多方法可以做到这一点，但这就是我们要做的方式。


安装Xcode

App Store下载 Xcode

安装命令行工具

打开Xcode, 然后按如下方式点击.

Preferences > Downloads > Command Line Tools

安装Homebrew

Homebrew 使在 Mac 上安装程序和软件包变得非常容易。 打开“终端”并键入以下内容，然后按照它为您提供的步骤操作。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装Node.js

我们将使用 Homebrew 来安装 Node.js，这是 Gulp 运行的服务器端 JavaScript 环境。Node.js 附带 npm，即 Node Package Manager。在终端中键入此内容。

brew install node

全局安装Gulp

这将全局安装 Gulp 命令行。这是我们开始在本地安装之前的最后一步 - 基于每个项目。

npm install --global gulp-cli

全球安装到此结束！这些步骤都不需要重复。从这里开始，我们将开始建立我们的本地项目。

局部安装Node 和 Gulp

从这一点开始，您必须导航到保存 Web 项目的文件夹。对我来说，这就是/Users/tania/sites。由于我从 /Users/tania 的终端开始，我将移动到站点。

cd sites

然后，我将创建一个新的项目目录。

mkdir startgulp

并移动到新创建的文件夹。

cd startgulp

为了在本地安装 Node，你需要一个 package.json 文件。您可以手动创建该文件，也可以生成一个文件。我们将生成一个，以便您了解它的工作原理.

npm init

此命令将引导您创建通用 package.json。这非常简单，如果您不确定或不想填写某些内容，只需按回车键即可。我只是给了它一个描述、关键字和作者，文件已经生成。

{
      "name": "startgulp",
      "version": "1.0.0",
      "description": "Getting Started with Gulp",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [
        "gulp",
        "sass"
      ],
      "author": "Tania Rascia",
      "license": "MIT"
    }

现在我们将运行一个命令来安装 Node 和 Gulp。

npm install --save-dev gulp

您将收到一些有关弃用和丢失文件的警告，但不要太担心。

npm WARN package.json startgulp@1.0.0 No repository field.
    npm WARN package.json startgulp@1.0.0 No README data

完成后，您可以列出您的文件：

ls

node_modules package.json

您将看到已创建一个node_modules目录。为了自己的理智，不要掉进node_modules兔子洞;你可能永远找不到出路。

安装Gulp 插件

此时，在我们的node_modules目录中，我们安装的唯一devDependency 是 Gulp。为了发挥魔力，我们需要安装所有的 Gulp 插件。有很多 Gulp 插件。在本文中，我们将为前端 Web 开发工作流安装四个。

  • Gulp Sass，将SCSS编译为CSS。
  • Gulp Sourcemaps，这比你想象的要有用得多。
  • Gulp cssnano，缩小和优化输出的CSS
  • Gulp Autoprefixer，为输出的 CSS 添加供应商前缀。

这是一个很好的工作流程 - 您可以编写 SCSS 而不必担心添加前缀或手动缩小代码，源映射将帮助您找到 CSS 在 .scss 文件中的来源。

如果您没有使用 Sass 的经验，我建议您阅读 Learn Sass Now： A Guide to Installing， Use and Understanding Sass，以更好地了解它的工作原理。

这是添加所有四个 Gulp 插件的代码。

npm install --save-dev gulp-sass gulp-cssnano gulp-sourcemaps gulp-autoprefixer

如果你检查你的package.json，你会注意到添加了一个新的部分。

"devDependencies": {
      "gulp": "^3.9.1",
      "gulp-autoprefixer": "^3.1.0",
      "gulp-cssnano": "^2.1.1",
      "gulp-sass": "^2.2.0",
      "gulp-sourcemaps": "^1.6.0"
    }

这些是您已安装的所有 Node 包。

为了将来参考，您可以通过最初在 package.json 中插入 devDependencies 来简化该过程。之后，只需键入命令 npm install 即可安装所有插件，而无需在命令行中指定它。

设置工程项目 Project

我们需要做的最后一件事是设置一个名为gulpfile.js的文件，这是一个JavaScript文件，将定义整个任务运行过程。

创建一个 gulpfile.js。现在我们有了Gulp拼图的所有碎片。以下是到目前为止您的项目应该如何显示的图形表示:


我们可以通过为每个插件需求定义一个变量来开始我们的 Gulpfile。

'use strict'

var gulp = require('gulp')
var sass = require('gulp-sass')
var cssnano = require('gulp-cssnano')
var sourcemaps = require('gulp-sourcemaps')
var autoprefixer = require('gulp-autoprefixer')

我喜欢在 src/ 目录中处理我所有的源文件，例如 Sass，在 dist/ 目录中处理我的所有目标文件。

因此，我将首先创建一个 Gulp 任务。

gulp.task('workflow', function () {
  gulp
    .src('./src/sass/**/*.scss')
    // Insert tasks here
    .pipe(gulp.dest('./dist/css/'))
})

路径 /**/*.scss 表示任务适用于此目录或任何后续目录 （src/sass/），任何文件名都以 .scss 结尾。目的地将是dist/css/。

插入所有其他插件很容易。

gulp.task('workflow', function () {
  gulp
    .src('./src/sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(
      autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false,
      })
    )
    .pipe(cssnano())
    .pipe(sourcemaps.write('./'))

    .pipe(gulp.dest('./dist/css/'))
})

每个插件都有一个相应的 GitHub 自述文件，说明如何使用它。但是，它们中的大多数都非常简单。每个 Gulp 任务都在管道函数中。在上面，您可以看到我正在启动源映射，使用错误日志记录启动 Sass，自动前缀到最后两个浏览器，缩小，并将源映射写入与输出 CSS 相同的目录。

最后，我将默认的 Gulp 任务定义为“监视”任务 - Gulp 将监视我指定目录中的任何更改，并在进行任何更改时运行。

gulp.task('default', function () {
  gulp.watch('./src/sass/**/*.scss', ['workflow'])
})

这里是最终的gulpfile.js:

'use strict'

var gulp = require('gulp')
var sass = require('gulp-sass')
var cssnano = require('gulp-cssnano')
var sourcemaps = require('gulp-sourcemaps')
var autoprefixer = require('gulp-autoprefixer')

gulp.task('workflow', function () {
  gulp
    .src('./src/sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(
      autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false,
      })
    )
    .pipe(cssnano())
    .pipe(sourcemaps.write('./'))

    .pipe(gulp.dest('./dist/css/'))
})

gulp.task('default', function () {
  gulp.watch('./src/sass/**/*.scss', ['workflow'])
})

现在为了测试这段代码，我将创建三个简单的 .scss 文件 - main.scss、_variables.scss 和 _scaffolding.scss。

Main

/* Main SCSS File */

    // Base
    @import "variables";

    // Components
    @import "scaffolding";

变量

// Typography

$font-style: normal;
$font-variant: normal;
$font-weight: normal;
$font-color: #222;
$font-size: 1rem;
$line-height: 1.5;
$font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

脚手架

// Define typography
html {
  font: $font-style $font-variant $font-weight #{$font-size}/#{$line-height}
    $font-family;
}

// Vertically center anything
.vertical-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

好的，这应该足以设置并证明自动前缀器和cssnano运行正常。请注意，我没有创建dist/文件夹 - Gulp会为我做到这一点。

您现在需要做的就是在项目目录的根目录中键入 gulp 命令。

gulp
[00:12:04] Using gulpfile ~/Sites/startgulp/gulpfile.js
    [00:12:04] Starting 'default'...
    [00:12:04] Finished 'default' after 16 ms

现在，如果我保存我创建的任何 .scss 文件......

[00:12:39] Starting 'workflow'...
    [00:12:39] Finished 'workflow' after 32 ms

凭借闪电般的速度，Gulp 创建了 dist、我的主 CSS 文件和与之配套的源映射。



总结

Gulp 可以做的还有很多 - 值得注意的是，我省略了任何类型的 JavaScript 缩小或 linting - 但就前端 Sass 工作流程而言，这是一个非常有用和有效的工作流程！

如果您想使用本教程中确切的 Gulp 工作流程的真实示例，请随时查看我的个人 Sass 样板。代码在这里是开源的，尽管我还没有完成文档。

现在，您已经安装了所有全局依赖项，并且您知道如何设置所有内容，只需三个命令即可启动和运行。这是一个很好的例子，说明 Gulp 的所有初始设置最终都是值得的：

git clone https://github.com/taniarascia/primitive.git
npm install
gulp

(显然，你需要具备使用 Git 的基本知识才能使用此方法.)

标签：css自动换行代码 

作者:whsf66 , 分类:前端教程 , 浏览:14 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言