onsdag 10 december 2014

Grunt - Get started


 - Install Node Package Manager (npm)
 - Open Nodejs Command Prompt (as admin) and go to folder of your project!
 - Create a file in root of your project called package.json that looks like:

{
 "name": "Pers-FrontEndStuff",
 "version": "0.1.0",
 "devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0"
 }
}

 - Make a file in root of your project called Gruntfile.js that looks like:

module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: ['static/js_grunt_src/scriptsA.js', 'static/js_grunt_src/scriptsB.js'],
dest:'static/js_grunt_src/_scripts.js'
}
},
uglify: {
static_folder: {
files: {
'static/js/scripts.min.js': ['static/js_grunt_src/_scripts.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', ['concat', 'uglify', 'jshint']);
};

 - Install Grunt by following http://gruntjs.com/getting-started, basically:
npm install grunt --save-dev
 - Install each plugin you want like concat (merge js-files together into one) and uglify (minification of js-file) jshint (js-file validation), like:
npm install grunt-contrib-concat
npm install grunt-contrib-uglify
npm install grunt-contrib-jshint
 - Now you can run each task (like the concat task) with command:
grunt concat
 - Run 2 tasks with command:
grunt concat uglify