The document discusses various JavaScript tools and frameworks for task automation in front-end development, particularly focusing on the Grunt task runner and its plugins. It includes configuration examples for Grunt, package management with npm, and various tasks such as linting, watching files, and building projects. Overall, it emphasizes the importance of productivity tools to streamline web development workflows.

2. JS
is your mate
Gianluca Esposito
Curiosity Driven Developer
Front-end Developer

3. Browsers

4. It began...

5. It began...

6. Framework

7. Mobile

8. Server

9. Database

10. Headless

11. Isomorphic

12. Desktop

13. Desktop

14. Language

15. OS

16. Native
asm.js

17. Hardware
noduino

19. is a
platform

20. Real time

21. JS
is your (auto)mate
esposi.to/automate
g@esposi.to

22. (auto)mate
If you aren't using
productivity tools
or task automation,
you are working too hard.

23. Grunt… Gulp!

24. Grunt or Gulp
● Based on files
● Configuration over code
● 4300+ plugins
● Task runner
● Based on streams
● Code over configuration
● Build system
● 1200+ plugins

25. Grunt or Gulp
grunt-gulp gulp-grunt

26. npm

27. Grunt project
package.json
used by npm to store metadata for projects
published as npm modules
Gruntfile.js or Gruntfile.coffee
used to configure or define tasks and load Grunt
plugins

28. package.json
$ npm init
{
"name": "(auto)mate",
"version": "0.0.1",
"description": "JS is your (auto)mate",
"author": "Gianluca Esposito <g@esposi.to>",
"license": "ISC"
}

29. Grunt
$ npm install -g grunt-cli

30. module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// Task configuration.
jshint: {
options: {
[...]
},
gruntfile: {
src: 'Gruntfile.js'
},
lib_test: {
src: ['lib/**/*.js', 'test/**/*.js']
}
},
nodeunit: {
files: ['test/**/*_test.js']
},
watch: {
gruntfile: {
files: '<%= jshint.gruntfile.src %>',
tasks: ['jshint:gruntfile']
},
lib_test: {
files: '<%= jshint.lib_test.src %>',
tasks: ['jshint:lib_test', 'nodeunit']
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-nodeunit');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
Gruntfile.js

31. module.exports = function(grunt) {
// Do grunt-related things in here
};
The "wrapper" function

32. // Project configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
[...]
});
Project configuration

33. // Task configuration
jshint: {
gruntfile: {
src: 'Gruntfile.js'
}
},
watch: {
gruntfile: {
files: '<%= jshint.gruntfile.src %>',
tasks: ['jshint:gruntfile']
}
}
Task configuration

34. // These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
// Defines the default task.
grunt.registerTask('default', ['jshint']);
Loading Grunt plugins and tasks

35. package.json
{
"name": "(auto)mate",
[...]
"devDependencies": {
"grunt": "^0.4.5"
}
}
$ npm install grunt --save-dev

36. package.json
[...]
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-jshint": "^0.11.0",
"grunt-contrib-watch": "^0.6.1"
}
$ npm install grunt-contrib-jshint
grunt-contrib-watch --save-dev

37. grunt
// On already configured projects:
$ npm install
$ grunt

38. module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// Task configuration.
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
unused: true,
boss: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
}
},
gruntfile: {
src: 'Gruntfile.js'
}
},
watch: {
gruntfile: {
files: '<%= jshint.gruntfile.src %>',
tasks: ['jshint:gruntfile']
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
Houston...
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
unused: true,
boss: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
}
},
gruntfile: {
src: 'Gruntfile.js'
}
},
watch: {
gruntfile: {
files: '<%= jshint.gruntfile.src %>',
tasks: ['jshint:gruntfile']
}
}
{

39. module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Task configuration.
jshint: require('./grunt/config/jshint'),
watch: require('./grunt/config/watch')
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
Module
module.exports = {
options: {
node: true,
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
unused: true,
boss: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
}
},
gruntfile: {
src: 'Gruntfile.js'
}
};
{

40. module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Task configuration.
jshint: require('./grunt/config/jshint'),
watch: require('./grunt/config/watch')
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
Rinse, Repeat

41. package.json
{
[...]
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-jshint": "^0.11.0",
"grunt-contrib-watch": "^0.6.1",
"load-grunt-config": "^0.16.0"
}
}
$ npm install -D load-grunt-config

42. Gruntfile.js
module.exports = function(grunt) {
var path = require('path');
require('load-grunt-config')(grunt, {
// path to task.js files, defaults to grunt dir
configPath: path.join(process.cwd(), 'grunt/config')
});
};

43. WebDev Workflow

44. WebDev workflow
$ npm install -D grunt-preprocess
grunt-contrib-clean
grunt-contrib-copy
grunt-contrib-concat
grunt-contrib-uglify
grunt-contrib-cssmin
grunt-contrib-imagemin

45. aliases.js
[...]
'default': 'connect',
'build': [
'clean:build',
'copy',
'concat',
'clean:js',
'uglify',
'cssmin',
'clean:css',
'imagemin'
]

46. require('load-grunt-config')(grunt, {
// path to task.js files, defaults to grunt dir
configPath: path.join(cwd, 'grunt/config'),
//data passed into config. Can use with <%= var %>
data: {
src: 'src/',
dest: 'grunt/build/',
minjs: 'js/build.min.js',
mincss: 'css/build.min.css'
},
// Optionally you can use jit-grunt instead of load-grunt-tasks
jitGrunt: {
jitGrunt: true
}
Gruntfile.js

47. clean.js
module.exports = {
build: ['<%= dest %>*'],
js: [
'<%= dest %>js/*', '!<%= dest %>'+'<%= minjs %>'
],
css: [
'<%= dest %>css/*', '!<%= dest %>'+'<%= mincss %>'
]
};
$ grunt clean

48. copy.js
module.exports = {
main: {
expand: true,
cwd: '<%= src %>',
src: ['**'],
dest: '<%= dest %>'
},
[...copy dependencies...]
}
$ grunt copy

49. concat.js
module.exports = {
build: {
src: [
'<%= dest %>js/*.js'
],
dest: '<%= dest %>' + '<%= minjs %>'
}
};
$ grunt concat

50. uglify.js
module.exports = {
options: {
compress: {
drop_console: true
}
},
build: {
files: [{
expand: true,
src: '<%= dest %>' + '<%= minjs %>'
}]
}
};
$ grunt uglify

51. clean.js
var dest = '<%= dest %>';
module.exports = {
build: [dest + '*'],
js: [
dest + 'js/*', '!' + dest + '<%= minjs %>'
],
css: [
dest + 'css/*', '!' + dest +'<%= mincss %>'
]
};
$ grunt clean:js

52. cssmin.js
module.exports = {
build: {
files: {
'<%= dest %><%= mincss %>': ['<%= dest %>' + 'css/*.css']
}
}
};
$ grunt cssmin

53. imagemin.js
module.exports = {
dynamic: {
files: [{
expand: true,
cwd: '<%= src %>',
src: ['img/**/*.{png,jpg,gif}'],
dest: '<%= dest %>'
}]
}
};
$ grunt imagemin

54. Bonus CLI
# Disable writing files (dry run)
$ grunt taskname --no-write
# Verbose mode. A lot more information
output
$ grunt taskname --verbose

55. jQuery/Gruntfile.js
jQuery-UI/Gruntfile.js
Angular.js/Gruntfile.js
React/Gruntfile.js
Atom/Gruntfile.coffee
Brackets/Gruntfile.js
Gruntfiles
PopCornTime/Gruntfile.js
typeahead.js/Gruntfile.js
Bootstrap/Gruntfile.js
Wordpress/Gruntfile.js
Ghost/Gruntfile.js
Grunt/Gruntfile.js

56. Day-to-day workflow
$ npm install -D
grunt-http
grunt-wget
grunt-responsive-images
grunt-contrib-compress

57. http.js
var path = require('path');
var cwd = process.cwd();
module.exports = function(grunt, options) {
var dest = path.join(cwd, '<%= src %>' + '/api.json');
return {
api: {
options: {
url: 'http://www.splashbase.co/api/v1/images/latest'
},
dest: dest
}
};
};
$ grunt http

58. wget.js
$ grunt wget
module.exports = function(grunt, options) {
var dest = '<%= src %>';
var json = grunt.file.readJSON(path.join(cwd, dest + '/api.json'));
var src = [];
json.images.forEach(function(image) {
src.push(image.url);
});
return {
baseUrl: {
options: {
overwrite: true
},
src: src,
dest: dest
}
};
};

59. responsive_images.js
$ grunt responsive_images
module.exports = {
resize: {
options: {
sizes: [{width: 1024}]
},
files: [{
expand: true,
src: ['<%= src %>/**.{jpg,gif,png}'],
custom_dest: '<%= dest %>/{%= width %}/'
}]
}
};

60. compress.js
$ grunt compress
module.exports = {
main: {
options: {
archive: '<%= dest %>/dest.zip'
},
files: [{
flatten: true,
src: ['<%= dest %>/**/**.{jpg,gif,png}'],
filter: 'isFile'
}]
}
};

61. (auto)mate
grunt-nodemailer grunt-dropbox

62. Phase 3: Profit
Files
grunt-shell
grunt-exec
grunt-run-java
grunt-replace
grunt-include-replace
grunt-strip-code
CLI
grunt-curl
grunt-http
grunt-wget
grunt-http-upload
HTTP
Deploy
grunt-git
grunt-push-svn
Versioning
grunt-jscs
grunt-phplint
grunt-karma
grunt-mocha-test
Style Guide
grunt-jenkins
grunt-ssh
grunt-ftpush
grunt-ec2
grunt-aws-s3
grunt-cloudfront
grunt-rackspace

63. esposi.to/automate
g@esposi.to
Thank you