Sublime Gulp

一个插件，用于从Sublime Text运行Gulp任务，同时还提供了一些实用的代码片段。

快速开始

1. 通过Package Control安装Gulp
2. 打开包含一个gulpfile.js文件或目录的仓库
3. 如果您还没有一个默认的gulp任务，制作一个
4. 菜单到工具>Gulp>运行默认任务
5. 享受！

安装

通过PackageControl

如果您已安装PackageControl，可以使用它来安装此包。

只需输入cmd-shift-p/ctrl-shift-p来打开命令面板，从下拉菜单中选择Package Control: Install Package，在那里搜索并选择包即可完成。

手动安装

您可以将仓库克隆到您的/Packages（首选项 -> 浏览包...）文件夹中，并开始使用或修改。

cd ~/path/to/Packages
git clone git://github.com/nicosantangelo/sublime-gulp.git Gulp

故障排除

对于较旧的gulp版本，插件使用node，如果您使用Gulp，它应该已经安装了。它使用node创建缓存，因此在某些系统中，您可能需要将您的node_modules路径添加到NODE_PATH中，例如（对于Unix）

export NODE_PATH=/usr/local/lib/node_modules

Sublime Gulp可能在没有在任务文件中定义var gulp = require('gulp');的情况下无法工作。更多信息（感谢@smeijer的帮助）

如果您在Mac OSX上运行此插件遇到麻烦，那么可能是您的路径没有被shell报告。在这种情况下，您可以尝试使用插件SublimeFixMacPath。这可能解决了我们的问题。

如果仍然不能正常运行，首先确保您的 Gulp 任务在终端中运行（即在 sublime 之外），如果是这样，则提交一个问题。

CoffeeScript 支持

如果您想使用 gulpfile.coffee，需要做两件事

1. 将 module.exports = gulp 添加到您的 gulpfile.coffee 中，以便 node 可以使用它
2. 如果不存在，创建一个 gulpfile.js 并将其添加到其中

require('coffee-script/register');
var gulp = require('./gulpfile.coffee');

Gulpfile.js

Sublime Gulp 插件是为那些在 Gulp 流式构建 - 任务运行器系统 中使用 Node.js 进行工作流的相关人员打造的。

Sublime Gulp 现在不仅支持项目根目录中的基本 gulpfile.js 文件，还能在 RequireDir 模块设置的目录或 gulpfile.js 目录中识别您的任务。所以无论您的 gulp 任务如何组织，Sublime Gulp 都能找到它们。

使用方法

可用命令

Sublime Gulp 支持以下命令，通过 工具 -> 命令面板 打入“Gulp”即可访问。它们也可以从以下表格中的菜单访问。 Default.sublime-commands 也会列出它们。

• 前五个命令可通过主菜单中的 工具 -> Gulp 和侧边栏上下文菜单中的 Gulp 使用。
• 第 6 个和第 7 个可在主菜单的 视图 -> Gulp 中使用。
• 最后一个命令可在主菜单底部的 文件 中使用。

运行 Gulp 任务

要运行任务，首先从命令面板中选择 Gulp，或从菜单中选择 列出要运行的任务。该插件将在打开的文件夹/项目中进行任务搜索，并在根目录中创建缓存（.sublime-gulp.cache）。第一次运行将比较慢，因为缓存正在构建，但之后缓存将加快未来访问速度。您可以使用 gulp_delete_cache 命令重新构建缓存，如果看不到新添加的 Gulp 任务或某些任务丢失。

然后插件将以列表的形式显示所有 Gulp 任务。选择一个将运行该任务。要显示任务的标准输出，插件使用面板或新标签页（取决于您的 设置）。运行第一个任务后，您可以根据需要使用隐藏和显示面板命令。（见上表）

如果您想运行不带标准输出到面板的普通 Gulp 命令，请使用 Gulp（静默）。

任意任务

如果您想运行一个任意任务，您需要从命令面板中选择 Gulp：运行任意任务，或从菜单中选择 运行任意任务。然后该插件会提示一个输入面板，您可以在其中写下想要附加到 gulp 上的内容。

运行上次任务

该命令将重新运行由任何插件命令运行的最后一个任务（如果有）。

自定义任务访问

Sublime Gulp 出厂即为默认在 工具 -> Gulp 菜单下提供了一个名为 运行默认任务 的菜单项，该菜单项会执行你的 default Gulp 任务。大多数 Gulp 用户都定义了默认任务（例如运行开发任务）。

如果你想通过菜单项或 快捷键 运行其他任务，你可以自定义这两种方法。

例如，要在工具菜单中添加一个用于 sass 任务的菜单项，请执行以下操作。在你的 Sublime 用户目录中，将以下 json 添加到 Main.sublime-menu 文件中（如果没有，则创建一个）。

[
    {
        "id": "tools",
        "children": [
             { "caption": "Run Sass Task", "command": "gulp", "args": { "task_name": "sass" } }
         ]
    }
]

注意：通过在 args 中添加 "silent": true，你可以静默运行任何命令。

或者你可以使用 快捷键 来完成同样的操作。编辑 首选项 -> 关键绑定 - 用户 以访问用户关键绑定文件，然后添加以下行

{ "keys": ["KEYS"], "command": "gulp", "args": { "task_name": "sass" } }

更多有关 快捷键 和 绑定特定任务 的详细信息，请参阅下文。

终止任务

要终止运行中的任务（如 watch），你有两种选择：可以选择 Gulp: 终止运行中的任务 命令以终止所有当前正在运行的任务，或者选择 Gulp: 终止特定运行中的任务 以从命令调色板中选择要终止的任务。

如果你想抑制命令输出，你可以将其映射到一个键盘快捷键，并将 true 传递给 silent 参数，如下所示：

{ "keys": ["KEYS"], "command": "gulp_kill", "args": { "silent": true } }

{ "keys": ["KEYS"], "command": "gulp_kill_task", "args": { "silent": true } }

更多有关 快捷键 和 绑定特定任务 的详细信息，请参阅下文。

Windows

如果你正在运行 Windows，此包将使用 taskkill，这样每个子进程都会被正确终止。如果可执行文件不在你的系统上，你可能需要将其添加以确保此命令正常工作。

显示或隐藏面板

Gulp: 显示面板 将显示关闭的输出面板（仅面板，如果你使用了 results_in_new_tab 设置，则不会重新打开标签）。或者，按 <esc> 也会关闭/隐藏打开的面板。

列出 Gulp 插件

从命令调色板运行 Gulp: 列出插件 将会在可搜索的列表中显示所有可用的 gulp 插件。选择一个将打开它在默认浏览器中的 GitHub 仓库。

删除缓存

运行 Gulp: 删除缓存 将为你删除 .sublime-gulp.cache 文件，强制重新解析 gulpfile.js。

退出 Sublime 并杀死正在运行的任务

该命令将关闭 Sublime Text，但首先它会杀死任何正在运行的任务。它与运行 Gulp: 终止运行中的任务 并立即退出编辑器相同。如果终止任务时发生错误或找不到正在运行的任务，编辑器仍然会关闭。

你可以从命令调色板中选择 Gulp: 退出编辑器杀死正在运行的任务或者在以下示例中创建一个 快捷键：

{ "keys": ["KEYS"], "command": "gulp_exit" }

你可以将其绑定到 alt+f4 或 super+q，这样你就不需要记住它。遗憾的是，如果你的关闭按钮（x）关闭编辑器，它 不会运行。

代码片段

vargulp

var gulp = require('gulp-name');

pipe

pipe(name('file'))

gulps - 文档

gulp.src('scriptFiles')
  .pipe(name('file'))

gulpt - 文档

gulp.task('name',['tasks'], function() {
    // content
});

gulpd - 文档

.pipe(gulp.dest('folder'));

gulpw - 文档

gulp.watch('file', ['tasks']);

gulpwcb - 文档

gulp.watch('file', function(event) {
  console.log(' File '+event.path+' was '+event.type+', running tasks...');
});

设置

Gulp.sublime-settings 文件用于配置，你可以在 首选项 -> 包设置 -> Gulp -> 设置 - 用户 中更改你的用户设置。

默认值为

{
    "exec_args": {},
    "recursive_gulpfile_search": false,
    "ignored_gulpfile_folders": [".git", "node_modules", "vendor", "tmp", "dist"],
    "gulpfile_paths": [],
    "results_in_new_tab": false,
    "results_autoclose_timeout_in_milliseconds": 0,
    "show_silent_errors": true,
    "log_errors": true,
    "syntax": "Packages/Gulp/syntax/GulpResults.tmLanguage",
    "nonblocking": true,
    "track_processes": true,
    "flags": {},
    "check_for_gulpfile": false,
    "tasks_on_save": {},
    "silent_tasks_on_save": {},
    "kill_before_save_tasks": false,
    "status_bar_tasks": false,
    "status_bar_format": "Gulp: {task_name}"
}

exec_args

你可以按以下方式覆盖你的 PATH 环境变量（从 sublime-grunt）

{
    "exec_args": {
        "path": "/bin:/usr/bin:/usr/local/bin"
    }
}

本地上安装的 gulp

如果本地项目中安装了gulp，需要指定gulp可执行文件的路径。因此，将路径调整为/bin:/usr/bin:/usr/local/bin:node_modules/.bin

recursive_gulpfile_search

如果设置为true，该包将递归地通过每个顶级文件夹搜索gulpfile.js文件，忽略在ignored_gulpfile_folders中定义的文件夹。

如果设置为false，则只使用顶级文件夹和gulpfile_paths中找到的文件夹。

ignored_gulpfile_folders

递归搜索gulpfile.js文件时忽略的文件夹名称，用于显著提高性能。例如：[".git", "node_modules", "vendor", "tmp", "dist"]

gulpfile_paths

此设置仅当recursive_gulpfile_search设置为false时生效。

例如：["src", "nested/folder"]

results_in_new_tab

如果设置为true，则将使用新标签页而非面板输出结果。

results_autoclose_timeout_in_milliseconds

定义用于自动关闭包含gulp结果的面板或标签页的延迟时间。如果为false（或0），它将保持打开状态；所以如果你想保持关闭状态，请检查silent命令。

show_silent_errors

如果为true，当运行Gulp (silent)时，仅在任务失败的情况下才会打开输出面板。

log_errors

如果有任何错误发生，则切换创建sublime-gulp.log文件。

syntax

用于突出显示gulp结果的语法文件。您可以从命令面板选择它，如下所示：设置语法：Gulp results。

如果您不想有任何颜色（如果您移除了语法，可能需要重启Sublime），请将该设置设置为false。

nonblocking

当启用时，该包将通过两个线程从任务进程读取流，一个用于stdout，另一个用于stderr。这样可以让所有输出实时管道到Sublime，而无需等待任务完成。

如果设置为false，它将首先从stdout中读取，然后从stderr中读取。

track_processes

将长时间运行的任务进程ID持久化到本地文件中，以在编辑器关闭时跟踪。

如果设置为false，则包将只在内存中跟踪任务，这意味着如果您运行一个长时间运行的任务，比如gulp watch，然后重启Sublime Text，进程可能不会自动结束，您将无法从编辑器中杀死它 anymore。

如果设置为true，该包将使用内部的.sublime-gulp.cache来跟踪长时间运行的任务。所以即使您关闭编辑器然后再次打开，您也应该仍然能够列出和杀死正在运行的任务。

根据您的操作系统，即使没有包干预，进程也可能自行结束。Sublime Gulp尝试通过在列出进程之前检查进程是否仍然存活来解决这个问题，这在大多数情况下是有效的，但不是可靠的检查。最坏的情况是，您会看到一个已死任务，杀死它也不会产生任何效果。 最坏且不太可能的情况是，如果操作系统重新使用了PID，您将杀死另一个进程 :raised_hands:。

flags

此设置允许您为gulp命令定义自定义标志。键是任务的名称，值是包含标志的字符串。

例如，如果您必须以带有--watch标志的方式运行build，如下所示gulp build --watch，则将这样做

{
    "flags": {
        "build": "--watch"
    }
}

如果您只想在特定项目中向任务添加一个标志，您可以尝试绑定特定任务。

check_for_gulpfile

如果设置为false，则即使当前打开的根文件夹中没有找到gulpfile.js，包也会继续运行。

例如，如果你的Sublime侧边栏中有5个根文件夹，并且其中只有3个文件夹中包含gulpfile，当你以check_for_gulpfile: true运行Sublime Gulp时，它只会显示包含gulpfile.js的3个文件夹，但如果你将check_for_gulpfile设置为false，它将列出所有的5个文件夹。

如果你正在使用--gulpfile标志或希望将错误报告留给gulp，你可以将其设置为false。

tasks_on_save

允许你在保存文件时运行任务。键是任务名称，值是字符串或glob模式数组的字符串。

glob模式的基本文件夹是项目中的第一个文件夹。因此，如果你有多个文件夹，glob模式只会匹配第一个文件夹。

{
    "tasks_on_save": {
        // Run browserify task when you save javasript file
        "browserify": "*.js",
        // Run sass task when you save sass file under "sass" folder
        "sass": "sass/*.scss",
        // Array of glob pattern
        "other": ["*.ext1", "*.ext2"]
    }
}

silent_tasks_on_save

与tasks_on_save工作方式相同，但它以silent模式运行任务（使用Gulp (silent)）。

kill_before_save_tasks

如果tasks_on_save或silent_tasks_on_save中定义了任何任务，将此选项设置为true将在运行任何任务之前运行gulp_kill。

status_bar_tasks

可以是true，这将显示状态栏上所有正在运行的任务，任务名称如"watch"，或要显示的任务名称数组如["watch", "build"]。

status_bar_format

用于status_bar_tasks的格式。你可以使用{task_name}来显示正在运行的任务名称。

按项目设置

如果你想要按项目设置，首先需要创建一个项目，前往项目 ->另存为项目，然后编辑你的项目文件（你可以使用项目 ->编辑项目）。在那里你可以覆盖Gulp设置，如下所示

{
    "settings": {
        "results_in_new_tab": true
    },

    // Or, Sublime Text 3 only:
    "Gulp": {
        "check_for_gulpfile": false
    }
}

包将首先搜索"settings": {}，然后搜索"Gulp": {}（仅适用于ST3），最后搜索Gulp.sublime-settings文件。

请注意，唯一的限制是，如果你想覆盖syntax键，你需要使用syntax_override作为键。

有关视觉示例，请访问问题53的此评论

快捷键

此包不会将任何命令绑定到键盘快捷键，但你可以像这样添加它

[
    { "keys": ["KEYS"], "command": "gulp" },

    { "keys": ["KEYS"], "command": "gulp_arbitrary" },

    { "keys": ["KEYS"], "command": "gulp_last" },

    { "keys": ["KEYS"], "command": "gulp_kill" },

    { "keys": ["KEYS"], "command": "gulp_kill_task" },

    { "keys": ["KEYS"], "command": "gulp_show_panel" },

    { "keys": ["KEYS"], "command": "gulp_hide_panel" },

    { "keys": ["KEYS"], "command": "gulp_plugins" },

    { "keys": ["KEYS"], "command": "gulp_delete_cache" },

    { "keys": ["KEYS"], "command": "gulp_exit" }
]

绑定特定任务

你可以使用快捷键运行特定的任务，如下所示

{ "keys": ["KEYS"], "command": "gulp", "args": { "task_name": "watch" } }

如果你想在silent模式下运行它，可以将"silent"添加到args中

{ "keys": ["KEYS"], "command": "gulp", "args": { "task_name": "watch", "silent": true } }

最后，你可以使用task_flag将标志添加到命令中。此选项将覆盖设置文件上定义的任何标志。

{ "keys": ["KEYS"], "command": "gulp", "args": { "task_name": "build", "task_flag": "--watch" } }

注意：如果你想运行gulp -v之类的命令，请将task_name设置为空字符串（""）并添加一个标志。

致谢

此包是来自@filipelinhares的Gulp Snippets和nicosantangelo的Gulp（最后一个是受sublime-grunt的启发）的合并。

感谢@dkebler重写README。