easy-compile README

Easily work with LESS/SASS/SCSS/TYPESCRIPT files in Visual Studio Code.

“Compile-on-save” for LESS/SASS/SCSS/TypeScript files without using a build task.

Features

• Compile TypeScript and Less/Sass/Scss on save
• Support autoprefixer for Less/Sass/Scss
• Support mearge all media queries
• Support inline setting (Only for Complie)
• minify .js and .css files

Usage

Complie

For TypeScript, Only compile after you setup outfile or outdir.

Minify

Run Command “Minify - Easy Complie” to minify files

Extension Settings

Settting

easycompile.sass {}

easycompile.less {}

easycompile.typescript {}

easycompile.css {

 "outDir": { string }

• Redirect output to a different folder

• support ${workspaceRoot}

   "outExt": { string }

• allows you to specify an alternative output file extension

• e.g. .min.css instead of .css

   "autoprefixer": { string }

• this enables the autoprefixer plugin (included)

• e,g. > 5%; last 2 Chrome versions; not ie 6-9

   "groupmedia": { boolean }

• This enables the group media queries plugin (included)

   "sourceMap": { boolean }

   "sourceMapFileInline": { boolean }

  }

  easycompile.js {

   "outDir": { string }

• Redirect output to a different folder

• support ${workspaceRoot}

   "outExt": { string }

• allows you to specify an alternative output file extension

• e.g. .min.js instead of .js

   "surround": { string }

• put string surround the code

• e.g. (function (){ ${code} })()

   "compress": { object }

• implement UglifyJS Compress setting [compress-options]

  }

Inline Setting (Only work for Less/Sass/Scss/Typescript)

• Settings can also be specified per file as a comment on the first line.
• Settings are comma-separated and strings are not “quoted”.

• Example:

  // out: ../dist/app.css, compress: true, sourceMap: false, autoprefixer: last 5 versions, groupmedia: true
  body, html {
      ...
  }

  // outdir: ../../
  import * ...
  ...

Settings[Less/Scss/Sass]

main: { filepath: string | string[] }

• Compiles a different less file instead of this one.
• All other settings are ignored.
• Filepath is relative to the current file.
• Multiple main files can be specified (see FAQ).

out: { boolean | filepath: string | folderpath: string }

• Redirects the css output to a different file.
• This setting can be used to override a project-wide "out": false setting, where you only want certain .less files to be generated.
• If filepath is used, but no file extension is specified, it will append .css
• If folderpath is used, the less filename will be used, but with the .css extension

• Filepath is relative to the current file.

  outExt: { string }

• The default output extension is .css.
• This allows you to specify an alternative output file extension (e.g. .wxss instead of .css)
• This applies to the .map file also (e.g. .wxss.map)

compress: { boolean }

• Compresses the css output by removing surplus white-space.

autoprefixer: { string | string[] }

• When present, this enables the autoprefixer plugin (included).
• This plugin automatically adds/removes vendor-prefixes needed to support a set of browsers which you specify.
• The autoprefixer option is the comma-separated list of browsers for autoprefixer to use (or alternatively a string array of them).
• See browserslist documentation for further examples of browser queries.
• NOTE: If used with the inline setting, the browsers listed must be unquoted and semi-colon separated (because comma is already the directive separator): e.g.
  
  // autoprefixer: > 5%; last 2 Chrome versions; not ie 6-9, sourceMap: true, out: ../css/style.css

groupmedia: { boolean }

• This enables the group media queries plugin (included).

Tips

• Ignore files

   "easycompile.compile": {
     "ignore" : [
         "**/_*.scss"
     ]
   }

  • Enable minify on save

    "easycompile.compile": {
    "minifyJsOnSave": true,
    "minifyCssOnSave": true
    }

Acknowledgements

• Configuration concepts borrowed from mrcrowl’s vscode-easy-less.

Enjoy!