ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Gulp

by NicoSantangelo ST2/ST3 Trending

Run Gulp tasks and snippets from Sublime Text

Details

Installs

  • Total 9K
  • Win 4K
  • OS X 4K
  • Linux 1K
Jul 4 Jul 3 Jul 2 Jul 1 Jun 30 Jun 29 Jun 28 Jun 27 Jun 26 Jun 25 Jun 24 Jun 23 Jun 22 Jun 21 Jun 20 Jun 19 Jun 18 Jun 17 Jun 16 Jun 15 Jun 14 Jun 13 Jun 12 Jun 11 Jun 10 Jun 9 Jun 8 Jun 7 Jun 6 Jun 5 Jun 4 Jun 3 Jun 2 Jun 1 May 31 May 30 May 29 May 28 May 27 May 26 May 25 May 24 May 23 May 22 May 21 May 20
Windows 1 22 21 21 24 7 7 10 15 21 24 25 24 6 10 21 13 21 15 21 18 16 22 18 23 21 17 12 6 15 23 15 16 17 10 8 19 17 19 20 15 3 8 23 15 17
OS X 2 21 27 14 19 14 3 13 11 16 19 13 10 7 11 20 19 20 16 10 8 8 16 16 18 17 5 10 8 10 18 10 10 17 15 12 18 20 18 20 19 13 10 11 19 19
Linux 0 6 4 3 11 5 1 5 4 13 4 3 5 2 2 6 5 5 10 7 3 4 8 8 6 0 1 5 3 4 7 6 7 6 3 4 5 7 6 8 9 6 4 5 1 4

Readme

Source
raw.​githubusercontent.​com

Sublime Gulp

A Gulp task runner with snippets for Sublime Text.

This package is a merge between Gulp Snippets from @filipelinhares and Gulp from NicoSantangelo (this last one, inspired by the awesome sublime-grunt).

Usage

1. Run Tasks

To run a task, first choose Gulp from the command pallete, the package will search for a gulpfile.js in an open folder and create a cache (.sublime-gulp.cache) with it (the first run might be a little slow).

The package will display all the tasks in a list, selecting one will run it (if you want, you can run specific tasks with a keyboard shortcut).

To show the task output the package uses a panel or a new tab (depends on your settings), you can add a key binding to open the panel (check the Gulp: Show Panel command).

Keep in mind that, the package creates the first cache using node, so for it to work you might need to add your node_modules path to NODE_PATH, for example (for Unix):

export NODE_PATH=/usr/local/lib/node_modules

Troubleshooting

The plugin wont work unless you have gulp defined on your gulpfile.

So if you can't find why Sublime Gulp isn't working be sure to at least have var gulp = require('gulp'); defined. More info (thanks @smeijer for the help)

CoffeeScript

If you want to use a gulpfile.coffee you need to do two things:

  1. Add module.exports = gulp to your gulpfile.coffee so node can use it
  2. Create a gulpfile.js if it doesn't exist and add this to it:
require('coffee-script/register');
var gulp = require('./gulpfile.coffee');

That's it!. Thanks to @guillaume86 for the help in the issue #5

Mac OS X

It's possible that your path isn't being reported by your shell so if you're having troubles running the package, give SublimeFixMacPath a try.

2. Run Tasks (silent)

Works the same way as the normal Gulp command, but Gulp (silent) will not write the results on the output panel or tab.

3. Kill tasks

To kill running tasks like watch you can pick the command Gulp: Kill running tasks.

Windows

If you're running Windows, the package will use taskkill so every child process is correctly terminated. If the executable isn't on your system, you'll need to add it for this command to work correctly.

4. Show Panel

Gulp: Show Panel shows the closed output panel (just the panel, it won't re-open the tab if you're using the results_in_new_tab setting).

5. List plugins

Running Gulp: List plugins from the command palette will display the gulp plugins on a searcheable list. Picking one will open it on your default browser.

6. Delete cache

Running Gulp: Delete cache will delete the .sublime-gulp.cache file for you, forcing a re-parse of the gulpfile.js.

7. Gulp exit

This command will close Sublime Text, but first it'll kill any running tasks. It's the same as running Gulp: Kill running tasks and immediately exiting the editor. If error occurs killing the tasks or no running tasks are found, the editor will close anyways.

You can select Gulp: Exit editor killing running tasks from the command palette or create a keybinding like this:

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

You can bind it to alt+f4 or super+q so you don't have to remember it. Sadly it won't run if you close the editor using the close button.

Snippets

vargulp

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

pipe

pipe(name('file'))

gulps - Docs

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

gulpt - Docs

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

gulpd - Docs

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

gulpw - Docs

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

gulpwcb - Docs

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

Settings

The file SublimeGulp.sublime-settings is used for configuration, you can change your user settings in Preferences -> Package Settings -> Gulp -> Settings - User.

The defaults are:

{
    "exec_args": {},
    "gulpfile_paths": [],
    "results_in_new_tab": false,
    "results_autoclose_timeout_in_milliseconds": 0,
    "show_silent_errors": true,
    "log_erros": true,
    "syntax": "Packages/Gulp/syntax/GulpResults.tmLanguage",
    "nonblocking": true,
    "flags": {}
}

exec_args

You may override your PATH environment variable as follows (from sublime-grunt):

{
    "exec_args": {
        "path": "/bin:/usr/bin:/usr/local/bin"
    }
}
gulp installed locally

If gulp is installed locally in the project, you have to specify the path to the gulp executable. Threfore, adjust the path to /bin:/usr/bin:/usr/local/bin:node_modules/.bin

results_in_new_tab

If set to true, a new tab will be used instead of a panel to output the results.

gulpfile_paths

Additional paths to search the gulpfile in, by default only the root of each project folder is used. Example: ["src", "nested/folder"]

results_autoclose_timeout_in_milliseconds

Defines the delay used to autoclose the panel or tab that holds the gulp results. If false (or 0) it will remain open, so if what you want if to keep it close check the silent command.

show_silent_errors

If true it will open the output panel when running Gulp (silent) only if the task failed

log_erros

Toggles the creation of sublime-gulp.log if any error occurs.

syntax

Syntax file for highlighting the gulp results. You can pick it from from the command pannel as Set Syntax: Gulp results.

Set the setting to false if you don't want any colors (you may need to restart Sublime if you're removing the syntax).

nonblocking

When enabled, the package will read the streams from the task process using two threads, one for stdout and another for stderr. This allows all the output to be piped to Sublime live without having to wait for the task to finish.

If set to false, it will read first from stdout and then from stderr.

flags

This seting lets you define custom flags for your gulp commands. The key is the name of the task and the value is the string containing the flags.

For example if you have to run build with the --watch flag, like this gulp build --watch you'll do:

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

If you want to add a flag to a task just for a project, you can try binding a specific task.

Shortcut Keys

This package doesn't bind any command to a keyboard shortcut, but you can add it like this:

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

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

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

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

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

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

Bind specific tasks

You also can use a shortcut for running a specific task like this:

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

and if you want to run it in silent mode, you can add "silent" to the args

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

Lastly, you can add a flag to the command using task_flag. This option will override the any flag defined on the settings file. If you set it to "" (empty string) it will run the command without flags.

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

Installation

PackageControl

If you have PackageControl installed, you can use it to install the package.

Just type cmd-shift-p/ctrl-shift-p to bring up the command pallete and pick Package Control: Install Package from the dropdown, search and select the package there and you're all set.

Manual

You can clone the repo in your /Packages (Preferences -> Browse Packages…) folder and start using/hacking it.

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