Customize the Sublime text compilation system for common tools and languages

Custom Sublime Text build systems for Popular tools and Languages "Customize Sublime Text compilation system for common tools and languages"

Convention link: Dot Me dot Me

This is to see the algorithm and do not want to install the IDE when ready to configure the sublime. The key is to look at the previous part of the commentary, the following specific configuration is not used in this article, but since the way has been translated and put up .....

In order to look comfortable than the previous article began to change the Markdown editor.

President

Sublime text is currently available to many developers in the open source community. It is complex and has strong text selection and customization support, and it has a lot of features that other text editors don't have--its compilation system. In this article, I'll introduce you to Sublime's compilation system, while sharing a few compiled scripts for the languages and tools we use today.

They include scripts for Grunt,coffeescript,sass, and so on.

Introduced

Sublime Text compilation system can be said to be simple, but it is highly customizable, the basic idea is that each type of compilation configuration file is a ". Sublime-buile" file-a JSON declaration to make it effective, This statement includes using a specific tool (or a series of tools) to compile the commands, paths, and configuration items required for a project.

The compilation can be done with a keyboard shortcut (the default on Mac is F7 on command+b,windows), or after the file is saved, using build from the Tools menu. For the currently open project, it automatically remembers the last selected compilation system (for example, Grunt).

When passing an external tool/binary parameter to sublime through a ". Sublime-build" file, it can use any required parameters or flags. It can also use the console built into the sublime to re-export the output of those applications that are called. This is an efficient way to easily compile a project without leaving the editor.

Add a custom build system [Adding a custom build systems]

Sublime the ". Sublime-build" file stored in the sublime "Packages" directory to form its tool/compile system directory. If someone needs to navigate to this folder, it can be found in "~/library/application support/sublime text2/packeges/user" (if it is in OS X) directory, If it is another platform can also be found in the corresponding Packages/user directory.

A basic ". Sublime-build" file can be the following keyword/value form:

{
"cmd": ["Command", "argument", "--flag"],
"selector": ["Source.js"],
"path": "/usr/local/bin",
" Working_dir ":"/projects/"
}

The supported keywords are:
-cmd--An array that includes the command to execute, as well as the arguments (argument) and flags that are required for the command. Note that sublime will check the path of all the tools you list, unless you already have an absolute path pointing to them.
-selector--An optional string to specify the compiler that is optimal for the current file scope. This is useful only if the tool/compilation system/Automatic (Tools/build system/automatic) is true.
-path--An optional string that replaces your current process path before the listed command is called.
-working_dir--An optional string that defines a directory to switch the current directory to the preferred directory when arbitrary commands are invoked.
-shell--An optional Boolean value that defines whether the command executes with the shell (for example, bash).
-file_regex--An optional regular expression that gets the error output of the instruction.

You can view unofficial docs if you need a complete list of the keywords supported in the sublime compilation script.

Compiler variables:
In addition, sublime supports the use of variable substitution in compiled files, such as $file_path (the path to the current file). They include:
-$file _path--currently viewed file directory
-$file _name--refers only to the name part of the current file (including the extension)
-$file _base_name--The name part of the current file (excluding the extension)
-$project _path--Current project path
-$project _name--The name of the current project

List of all supported replacements (substitutions).

Compiling task collations [Grouping build tasks]
Some developers also like to categorize tasks with an external bash script (or something like that). For example, here's a simple git-ftp configuration script that lets you commit and push your latest changes in sublime with Git, and then upload the latest files to FTP.

Example: Commit, Push and Upload to FTP
Deployment.sh:

#!/bin/bash
git Add. && git commit-m ' deployment ' && git push && git ftp init-u username
  -p password-ftp://host.example.com/public_html

1 2 1 2

Deployment.sublime-build:

{
    "cmd": ["Deployment"],
    "Working_dir": "${project_path:${folder}}"
}

1 2 3 4 1 2 3 4

If you have not used Git-ftp,alex Fluger have a more comprehensive article on how to use it you may be interested.

Identify target platforms [targeting platforms]
The sublime compilation file also supports specifying configuration data for a specific platform (that is, OS x,windows,linux). By identifying other elements of the configuration file (config) with the name of the platform, it is easy to identify the target platform, for example:

{
    "cmd": ...
    ...

    " Windows ":
    {
    " cmd ":  ...
    },

    " OSX ":
    {
        " cmd ": ...
    },

    " Linux ":
    {
        "cmd": ...
    }
}

Compiling files for Popular Front end (front-end) tools [build file for popular front-end tools]
To help you get started, there are a series of ". Sublime-build" files that are listed below for some of the front-end tools used by web developers that I notice today.

Most of the above can work without specifying path, but if you encounter a problem with path, you can try to include it in your config file (for example: "Path": "Usr/local/bin")
Grunt

{
    "cmd": ["Grunt", "--no-color"],
    "selector": ["Source.js", "source.less", "Source.json"]
}

1 2 3 4 1 2 3 4

Node Build Script:

{
    "cmd": ["h5bp", "--no-color"],
    "selector": ["Source.js", "source.less", "Source.json"]
}

1 2 3 4 1 2 3 4

Coffeescript:

{
    "cmd": ["Coffee", "-C", "$file"],
    "selector": "Source.coffee"
}

1 2 3 4 1 2 3 4

SASS:

{
    "cmd": ["Sass", "--watch", ".:."],
    "Working_dir": "$file _path",
    "selector": ["Source.scss", " Source.sass "]
}

1 2 3 4 5 1 2 3 4 5

At the same time there is a more detailed version of Config, including auto-shrinking and viewing, as follows:

{"
    cmd": ["Sass", "--watch", "Sass:stylesheets", "--style", "Compressed"],
    "Working_dir": "$project _path",
    "selector": ["Source.scss", "Source.sass"]
}

1 2 3 4 5 1 2 3 4 5

Less:

{
    "cmd": ["LESSC", "-X", "$file", "$file _path/$file _base_name.css", "--verbose"],
    "shell": true,
    " Selector ":" Source.css.less "
}

1 2 3 4 5 1 2 3 4 5

Stylus:

{
    "cmd": ["Stylus", "$file"],
    "File_regex": ".",
    "selector": "Source.stylus"
}

1 2 3 4 5 1 2 3 4 5

(a more complex version can be found in the Less-build-sublime project)

Jade:

{
   "cmd": ["cmd", "/C", "Jade", "$file"],
   "selector": "Source.jade"
}

1 2 3 4 1 2 3 4