Skip to content

Instantly share code, notes, and snippets.

@trey
Last active October 22, 2018 12:59
Show Gist options
  • Save trey/6677604 to your computer and use it in GitHub Desktop.
Save trey/6677604 to your computer and use it in GitHub Desktop.
This is a braindump of the first time I was actually able to get Grunt to do all of what I wanted.

Basic Grunt Setup

I looked all over for some information on how to basically start a quick prototype server. This is what I wanted to do.

  • Watch any file I change (so basically, exactly how LiveReload and CodeKit work) and refresh the screen
  • Compile Sass (in a consistent, declarable format [compressed or whatever])
  • Run a static server so I don't have to mess with VirtualHosts or explain to another front-end developer how to run my prototype.

So here you go, Internet. This is some very general purpose stuff that you should be able to figure out (even if this Node stuff leaves you scratching your head a lot of the time [like it does me]).

To install new Grunt modules, do it in the format ...

$ npm install [module-name] --save-dev

... which will add new lines to the devDependencies section of the packages.json file in a similar way that running pip install [something] and then pip freeze | requirements.txt does for Python projects.

Sources (basically, RTFM)

module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {},
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'css/main.css': 'css/scss/main.scss',
}
}
},
jshint: {
files: ['js/*.js'],
},
watch: {
options: {
livereload: true,
},
html: {
files: ['index.html'],
},
js: {
files: ['js/**/*.js'],
tasks: ['jshint'],
},
sass: {
options: {
livereload: false,
},
files: ['css/scss/**/*.scss'],
tasks: ['sass'],
},
css: {
files: ['css/**/*.css'],
},
},
});
// Actually running things.
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-jshint');
// Default task(s).
grunt.registerTask('default', ['connect', 'watch']);
};
{
"name": "what-have-you",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.4",
"grunt-contrib-nodeunit": "~0.2.0",
"grunt-contrib-uglify": "~0.2.4",
"grunt-contrib-sass": "~0.5.0",
"grunt-contrib-watch": "~0.5.3",
"grunt-contrib-connect": "~0.5.0"
}
}
@trey
Copy link
Author

trey commented Sep 23, 2013

This is a Solutions Log post.

@chumster
Copy link

chumster commented Feb 1, 2014

Hey thanks. I've spent the past few hours trying all types of different orderings and configurations, to no avail. This got me up and running.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment