First things first, read How to create a Snippet in Sublime Text for some basics.

To create a snippet in Sublime Text you save it with a file extension of .sublime-snippet in the Packages folder (/Users/yourname/Library/Application Support/Sublime Text 3/Packages/User on a Mac).

Quick Tip: You can use the shortcut Cmd+Shift+G and paste ~/Library/Application Support/Sublime Text 3/Packages/User to open the folder.

For every snippet that you want to add, you create a new file.

Let’s start!

Create a file called grunt.sublime-snippet in the packages folder. Add the following to it:

<snippet>
  <description>Gruntfile.js Skeleton</description>
  <tabTrigger>grunt</tabTrigger>
  <content><![CDATA[
module.exports = function(grunt) {

  // Configure task(s)
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

  });

  // Load the plugin(s)
  grunt.loadNpmTasks( );

  // Register task(s)
  grunt.registerTask('default', [ ]);
};
]]></content>
</snippet>

Save the file and restart Sublime. Now whenever you type grunt and press Tab, it’ll insert the initial Grunt config code for you. Let’s add some more snippets for common plugins. You should of course edit the following template code with your own preferences. Add them in their respective name.sublime-snippet files in the Packages fodler.

uglify

<snippet>
  <description>Minify files with UglifyJS</description>
  <tabTrigger>uglify</tabTrigger>
  <content><![CDATA[
  uglify: {
    // Basic compression
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/input2.js']
      }
    }
  },
]]></content>
</snippet>

cssmin

<snippet>
  <description>Minify CSS</description>
  <tabTrigger>cssmin</tabTrigger>
  <content><![CDATA[
    cssmin: {
    // Combine two files into one output file
      options: {
        shorthandCompacting: false,
        roundingPrecision: -1
      },
      target: {
        files: {
          'output.css': ['foo.css', 'bar.css']
        }
      }
    },

    cssmin: {
    // Minify all contents of a release directory and add a .min.css extension
      target: {
        files: [{
          expand: true,
          cwd: 'release/css',
          src: ['*.css', '!*.min.css'],
          dest: 'release/css',
          ext: '.min.css'
        }]
      }
    },
]]></content>
</snippet>

imagemin

<snippet>
  <description>Minify Images</description>
  <tabTrigger>imagemin</tabTrigger>
  <content><![CDATA[
    imagemin: {                          // Task
      static: {                          // Target
        options: {                       // Target options
          optimizationLevel: 3,
          svgoPlugins: [{ removeViewBox: false }],
          use: [mozjpeg()]
        },
        files: {                         // Dictionary of files
          'dist/img.png': 'src/img.png', // 'destination': 'source'
          'dist/img.jpg': 'src/img.jpg',
          'dist/img.gif': 'src/img.gif'
        }
      },
      dynamic: {                         // Another target
        files: [{
          expand: true,                  // Enable dynamic expansion
          cwd: 'src/',                   // Src matches are relative to this path
          src: ['**/*.{png,jpg,gif}'],   // Actual patterns to match
          dest: 'dist/'                  // Destination path prefix
        }]
      }
    },
]]></content>
</snippet>

watch

<snippet>
  <description>Run predefined tasks whenever watched file patterns are added, changed or deleted</description>
  <tabTrigger>watch</tabTrigger>
  <content><![CDATA[
    watch: {
      scripts: {
        files: ['**/*.js'],
        tasks: ['jshint'],
        options: {
          spawn: false,
        },
      },
    },
]]></content>
</snippet>

s3

<snippet>
  <description>https://github.com/jpillora/grunt-aws</description>
  <tabTrigger>s3</tabTrigger>
  <content><![CDATA[
    aws: grunt.file.readJSON("credentials.json"),
    s3: {
    // upload all files inside build/ into my-awesome-bucket:
      options: {
        accessKeyId: "<%= aws.accessKeyId %>",
        secretAccessKey: "<%= aws.secretAccessKey %>",
        bucket: "my-awesome-bucket"
      },
      build: {
        cwd: "build/",
        src: "**"
      }
    },
]]></content>
</snippet>

Here is a bash script to add all grunt snippet files in one go. Open a Terminal and go to the folder you downloaed the script in. For example: cd ~/Downloads to go to the downloads folder. Run the script by typing bash grunt-snippets.sh. It will add all the above snippets to the packages folder.