create Emmet like snippets for Grunt tasks and Gruntfile.js in Sublime Text
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:
1<snippet>
2 <description>Gruntfile.js Skeleton</description>
3 <tabTrigger>grunt</tabTrigger>
4 <content><![CDATA[
5module.exports = function(grunt) {
6
7 // Configure task(s)
8 grunt.initConfig({
9 pkg: grunt.file.readJSON('package.json'),
10
11 });
12
13 // Load the plugin(s)
14 grunt.loadNpmTasks( );
15
16 // Register task(s)
17 grunt.registerTask('default', [ ]);
18};
19]]></content>
20</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.
1<snippet>
2 <description>Minify files with UglifyJS</description>
3 <tabTrigger>uglify</tabTrigger>
4 <content><![CDATA[
5 uglify: {
6 // Basic compression
7 my_target: {
8 files: {
9 'dest/output.min.js': ['src/input1.js', 'src/input2.js']
10 }
11 }
12 },
13]]></content>
14</snippet>
1<snippet>
2 <description>Minify CSS</description>
3 <tabTrigger>cssmin</tabTrigger>
4 <content><![CDATA[
5 cssmin: {
6 // Combine two files into one output file
7 options: {
8 shorthandCompacting: false,
9 roundingPrecision: -1
10 },
11 target: {
12 files: {
13 'output.css': ['foo.css', 'bar.css']
14 }
15 }
16 },
17
18 cssmin: {
19 // Minify all contents of a release directory and add a .min.css extension
20 target: {
21 files: [{
22 expand: true,
23 cwd: 'release/css',
24 src: ['*.css', '!*.min.css'],
25 dest: 'release/css',
26 ext: '.min.css'
27 }]
28 }
29 },
30]]></content>
31</snippet>
1<snippet>
2 <description>Minify Images</description>
3 <tabTrigger>imagemin</tabTrigger>
4 <content><![CDATA[
5 imagemin: { // Task
6 static: { // Target
7 options: { // Target options
8 optimizationLevel: 3,
9 svgoPlugins: [{ removeViewBox: false }],
10 use: [mozjpeg()]
11 },
12 files: { // Dictionary of files
13 'dist/img.png': 'src/img.png', // 'destination': 'source'
14 'dist/img.jpg': 'src/img.jpg',
15 'dist/img.gif': 'src/img.gif'
16 }
17 },
18 dynamic: { // Another target
19 files: [{
20 expand: true, // Enable dynamic expansion
21 cwd: 'src/', // Src matches are relative to this path
22 src: ['**/*.{png,jpg,gif}'], // Actual patterns to match
23 dest: 'dist/' // Destination path prefix
24 }]
25 }
26 },
27]]></content>
28</snippet>
1<snippet>
2 <description>Run predefined tasks whenever watched file patterns are added, changed or deleted</description>
3 <tabTrigger>watch</tabTrigger>
4 <content><![CDATA[
5 watch: {
6 scripts: {
7 files: ['**/*.js'],
8 tasks: ['jshint'],
9 options: {
10 spawn: false,
11 },
12 },
13 },
14]]></content>
15</snippet>
1<snippet>
2 <description>https://github.com/jpillora/grunt-aws</description>
3 <tabTrigger>s3</tabTrigger>
4 <content><![CDATA[
5 aws: grunt.file.readJSON("credentials.json"),
6 s3: {
7 // upload all files inside build/ into my-awesome-bucket:
8 options: {
9 accessKeyId: "<%= aws.accessKeyId %>",
10 secretAccessKey: "<%= aws.secretAccessKey %>",
11 bucket: "my-awesome-bucket"
12 },
13 build: {
14 cwd: "build/",
15 src: "**"
16 }
17 },
18]]></content>
19</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.