Start a new project with grunt & github for (total) dummies…

This short article will guide you through very basics of web development automatization. You’ll need a terminal and some basic knowledge how to use it. I work on Linux bash but it can be basically anything (well maybe not AmigaDOS). I’ll cover git basics also.

You’ll need to install npm first (which is package manager for node.js) and node of course.

On most popular linux distros (Debian based) it’s easy as:

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

When your development machine is up & running (and optionally you have a Github account) you can proceed.

I use virtualbox in conjunction with Debian – because I like bare bone solutions. If you need something easier to run your code at, you should consider Vagrant or any other all in one solution.

1. Create repository at Github.
2. Clone repository to your webserver (or whatever localization you use). It will create directory automatically:

   git clone https://github.com/[your nick]/[your repo]
   

3. cd to this directory and use npm to initialize your project:

   npm init

   It will ask you some questions about your project and create package.json

4. Install grunt:

   npm install grunt --save-dev

   • –save-dev is used when package is used for development (dependency will be stored in devDependecies category in packages.json).
   • –save is used when it’s needed just for running the app.
5. In the same directory create Gruntfile.js 

At this moment you have your project initially configured. Now you should decide what you would like to automatize. Depending on your choices you should install needed plugins for grunt. You can find them here.

For example I use almost always:

• grunt-contrib-sass – SASS compiler.
• grunt-contrib-uglify – JS compressor.
• grunt-contrib-copy – Copy files.

Installation for plugins is the same as for the grunt:

npm install grunt-contrib-uglify --save-dev

/* --save is needed to store changes in packages.json file */
npm uninstall grunt-contrib-uglify --save

Gruntfile construction

Let’s stop for a moment at this point. Gruntfile has a specific syntax that you should understand before using it. Let’s look at this quite basic (I know it does not look basic at first glance) example:

module.exports = function (grunt) {
grunt.initConfig({
/**
* Prepare banner.
* This will be used as header for generated files.
*/
pkg: grunt.file.readJSON('package.json'),
banner: '/*! <%= pkg.name %> – v<%= pkg.version %> ' + '<%= grunt.template.today("yyyy-mm-dd h:MM:ss") %>' + '*/' + "\n",

/* Minify html */
minifyHtml: {
options: {
cdata: true,
conditionals: true
},
dist: {
files: {
'pub/index.html': 'pub/index.html'
}
}
},

/* Include css file inside html */
inline: {
dist: {
src: 'src/index.html',
dest: 'pub/index.html'
}
},

/* Sass */
sass: {
dist: {
options: {
style: 'compressed',
sourcemap: 'none'
},
files: [{
expand: true,
cwd: 'src/scss',
src: ['**/*.scss'],
dest: 'src/css',
ext: '.css'
}]
}
}

});

grunt.loadNpmTasks('grunt-minify-html');
grunt.loadNpmTasks('grunt-inline');
grunt.loadNpmTasks('grunt-contrib-sass');

grunt.registerTask('default', ['sass', 'inline', 'minifyHtml']);
};
</code></pre>
<p>

Let’s break it up:

• grunt.initConfig({ }); – this section declares a configuration for plugins used by grunt (one by one). Syntax of task configuration depends on specific plugin. You need to follow documentation, it can be found on the Github, simply google task plugin name.
• grunt.loadNpmTasks(‘grunt-plugin-name’); – this function loads task plugin. All used plugins must be loaded  before running the grunt.
• grunt.registerTask(‘default’, [‘sass’, ‘inline’, ‘minifyHtml’]); – final task is created here. When you run grunt without any arguments default will be used. You can differentiate your jobs here for example you can create production tasks where you can additionally compress CSS.

Please check official documentation for more information. It can be found here.

Finally let’s push changes to Github

You should declare which files should be omitted, to accomplish that create a .gitignore file in a root directory of your project. Here you can find a syntax of this files.

For example I use:

# Compiled project
public/
pub/

# Node
node_modules

# Compiled source #
###################
*.com
*.class
*.dll
*.exe
*.o
*.so
*.pyc

# Logs and databases #
######################
*.log

# OS generated files #
######################
.DS_Store*
ehthumbs.db
Icon?
Thumbs.db

# Temp files #
######################
.sass-cache/

Everything listed above will not be uploaded to a git server.

When you’re done with that, you can finally push your changes:

git add .
git commit -m 'commit comment'
git push origin master

It will ask you for credentials. After that you should see your project files on the Gitbub.

voilà!