Grunt helps front-end web developers automate common tasks such as: linting, testing, sass compilation, watching assets. Check basic features of node.js, npm and Grunt.

1. GRUNT
Front-end Workflow

2. About Pagepro:
• Internet Software House from Poland
• Operating since 2010
• Clients from Western Europe and U.S.
• 176 projects done in 2014
• 1758 PSDs converted into
HTML5 in 2014

3. Common Front-end tasks
• Compile SASS / LESS
• Minify
• Uglyfi
• Test
• Optimize
• Analyze
• Modules & Dependencies

5. node.js
• Server-side JavaScript
• V8 (Google Chrome Browser)
• Command Line Tool
• 40% JS 60 % C++

6. node.js
• EVENT DRIVEN, non-blocking
I/O model
• event-loops
• no DOM implementation
• single-thread

7. mkdir grunt;
cd grunt;
git https://github.com/Pagepro/training-grunt.git .
Clone repository

8. node.js
node -v;// check version if installed
https://nodejs.org/download/
brew install node

9. node.js
• process (node)
• document (JavaScript)

10. node.js
Traditional I/O
var result = db.query('select x from table_Y');
doSomethingWith(result); //wait for result!
doSomethingWithOutResult(); //execution is blocked

11. node.js
Non-blocking I/O
db.query('select x from table_Y', function (result) {
doSomethingWith(result); //wait for result!
});
doSomethingWithOutResult(); //executes without any delay!

12. node.js
• Access File
• Listen to network traffic
• HTTP requests
• DB Access

13. node.js
• Utilites
• Gulp
• Grunt
• Yeoman
• Live Reload
• Web servers

14. node.js
console.log('helo world');
node hello
node hello.js (.js is optional)

15. node.js
var age = 23,
person = {
name: 'Chris',
location: 'Poland'
}
console.log(age);
console.log(person);
node hello-extended

16. node.js
var requiredModule = require('./example-module');
console.log(requiredModule);
node modules
module.exports.a = 55;
module.exports.b = [1, 3, 4, 5];

17. node.js
node server
var http = require('http');
http.createServer(function (req, res) {
console.log(req);
res.write('hello!');
res.end();
}).listen(5000, "127.0.0.1");

18. node.js
node watch
var fs = require('fs');
fs.watch('./server.js', {
persistent: true
}, function(event, filename) {
console.log(event + " event occurred on " + filename);
});

19. npm
• Node Package Manager
• npm install mongojs
• https://npmjs.org
• npm init

20. npm
npm init;

21. package.json
{
"name": "libsasserplate",
"version": "1.0.1",
"description": "Libsass starter",
"author": "Pagepro <pagepro@pagepro.pl>",
"devDependencies": {
"grunt": "^0.4.2",
"time-grunt": "latest",
"grunt-sass": "latest",
"grunt-autoprefixer": "latest",
"grunt-spritesmith": "latest",
"grunt-contrib-uglify": "~0.2.4",
"grunt-contrib-watch": "^0.5.3",
"grunt-contrib-copy": "^0.5.0",
"grunt-contrib-kraken": "^0.1.3",
"grunt-contrib-connect": "^0.8.0",
"matchdep": "^0.3.0",
"jquery": "1.11.2"
}
}

22. package.json
http://browsenpm.org/package.json
http://semver.org

23. npm
{
"name": "npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": ""
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5"
}
}
{
"name": "npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": ""
},
"author": "",
"license": "ISC"
}
npm install grunt —save-dev

24. npm
rm -rf node_modules/*
ls
npm install

25. When not to use node.js?
• When you are doing heavy and
CPU intensive calculations on
server side, because event-loops
are CPU hungry
• Node.js API is still in beta, it keeps
on changing a lot from one revision
to another and there is a very little
backward compatibility. Most of the
packages are also unstable.
Therefore is not yet production
ready.

27. GRUNT
• Lint
• Test
• Compile
• Open browser
• Run browser
• Watch assets
• Recompile
• Reload browser

28. GRUNT
python -m SimpleHttpServer
open index.html
sass —watch sass:css
js hint main.js
./conquer_the_world.sh
etc.

29. GRUNT
We can setup long flows and run
it with just one task.
We can stop the flow if taks fails.
Everyone in the team can follow
same workflow.

30. GRUNT
• JavaScript task runner
• npm install -g grunt-cli

31. Gruntfile.js
• Grunt configuration file
• Makefile, Rakefile, etc.

32. GRUNT
• cd grunt/linter;
• npm init;
• npm install grunt —save-dev
• npm install grunt-contrib-jshint
—save-dev
• grunt jshint

33. GRUNT
'use strict';
module.exports = function (grunt) {
// load jshint plugin
grunt.loadNpmTasks('grunt-contrib-jshint');
};

34. GRUNT
>> No "jshint" targets found.
Warning: Task "jshint" failed.
Use --force to continue.
Aborted due to warnings.

35. What’s a target?

36. GRUNT
It’s a core concept of Grunt. When
we create a task, we add targets to
it.
Every target represents a set of
actions and files the task will be
run over.
We can run a task’s target by simply
appending it to the task name.
grunt mytask:mytarget

37. GRUNT
'use strict';
module.exports = function (grunt) {
// load jshint plugin
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.initConfig({
jshint: {
all: [
'Gruntfile.js'
]
}
});
};

38. GRUNT
'use strict';
module.exports = function (grunt) {
// load jshint plugin
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.initConfig({
jshint: {
all: [
'Gruntfile.js',
'app/js/**/*.js'
]
}
});
};

39. GRUNT
'use strict';
module.exports = function (grunt) {
// load jshint plugin
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.initConfig({
jshint: {
all: [
'Gruntfile.js',
'app/js/**/*.js',
'!app/js/vendor/**/*.js'
]
}
});
};

40. GRUNT
'use strict';
module.exports = function (grunt) {
// load jshint plugin
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.initConfig({
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'app/js/**/*.js',
'!app/js/vendor/**/*.js'
]
}
});
};

41. GRUNT & SASS
cd sass;
npm install;
grunt sass:dev

42. GRUNT & SASS
Prepare grunt sass:prod for
getting minified css.

43. GRUNT & SERVER
cd server;
npm install;
grunt connect;

44. GRUNT & SERVER
'use strict';
module.exports = function (grunt) {
// load plugins
grunt.loadNpmTasks('grunt-contrib-
connect');
grunt.initConfig({
connect: {
server: {
options: {
port:
grunt.option('port') || 8080,
hostname: 'localhost',
base: '',
keepalive: true
}
}
}
});
};

45. GRUNT & WATCH
Listen for something.
Do something.

46. GRUNT & SERVER
cd watch;
npm install;

47. GRUNT & SERVER
watch: {
sass: {
files: ['app/sass/*.scss'],
tasks: ['sass:dev']
}
}

48. GRUNT & SERVER
grunt connect:server watch

49. GRUNT & SERVER
grunt.registerTask('mytask', 'Desc', [
'connect:server',
'watch',
]);

50. GRUNT & SERVER
grunt.registerTask('default', ['copy:dev',
'compass:dev', 'connect:server', 'watch']);

51. What is matchdep?

52. Matchdep
// Load plugins
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
// Default task(s).
grunt.registerTask('default', ['sass', 'connect:server', 'copy:dev',
'watch']);
// SASSS compilation only
grunt.registerTask('compile', ['sass']);
// sprite generation
grunt.registerTask('sprites', ['sprite']);
grunt.registerTask('krak', ['kraken']);

53. Other examples

54. Uglify
uglify: {
lp: {
files: {
'dist_lp/js/app.min.js': [
'node_modules/jquery/dist/jquery.js',
'src/js/plugins.js',
'src/js/main.js'
]
}
},
thx: {
files: {
'dist_thx/js/app.min.js': [
'node_modules/jquery/dist/jquery.js',
'src/js/plugins.js',
'src/js/main.js'
]
}
}
},

55. Shell
shell: {
lpPackage: {
command: 'cd dist_lp && zip -r ../package_lp.zip *'
},
thxPackage: {
command: 'cd dist_thx && zip -r ../package_thx.zip *'
}
}

56. Process
process: function (content, srcpath) {
content = content.replace('<script src="http://
ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>',
'<script src="./js/app.min.js"></script>');
content = content.replace('<script src="static/js/main.js"></
script>', '');
content = content.replace('<script src="static/js/plugins.js"></
script>', '');
return content.replace(/static//g, "./");
}

57. Useful links
1. https://www.youtube.com/watch?v=pU9Q6oiQNd0
2. http://howtonode.org/introduction-to-npm
3. https://speakerdeck.com/dmosher/frontend-
workflows-and-tooling
4. http://gruntjs.com/
5. http://browsenpm.org/package.json

58. Thank you!
Developing the web in the heart of Europe.