The document discusses various front-end development tools including Bower, Grunt, Gulp, Webpack, Yeoman, and PhantomJS. It provides information on what each tool is used for, such as package management, task automation, bundling code, and testing. Examples are given of how to configure and use the tools in a front-end workflow.

1. Front-end tools
vs.
Pain
Bower, Grunt, Gulp,Webpack,Yeoman, …

2. GlebVinnikov
CTO/PM
Full Stack JS Developer
oDesk,YuktiDev, PortaOne
gleb.vinnikov@gmail.com

3. Duties
— Ext. lib
— Include lib to html
— Versioning
— Minification
— Bundle package
— Sprites
— Deploy to servers
— …

4. https://nodejs.org
— Chrome'sV8 runtime.
— Node.js uses an event-driven
— non-blocking I/O model
https://iojs.org

5. https://www.npmjs.com/

6. Bower
A package manager for the web
http://bower.io/

7. Bower
A package manager for the web
http://bower.io/
— 18K Packages

8. Bower
A package manager for the web
http://bower.io/
— 18K Packages
— Search/Install/Update/Delete

9. Bower
A package manager for the web
http://bower.io/
— 18K Packages
— Search/Install/Update/Delete
— bower install git://github.com/package.git

10. Bower
A package manager for the web
http://bower.io/
— 18K Packages
— Search/Install/Update/Delete
— bower install git://github.com/package.git
— bower install http://example.com/script.js

11. Grunt
The JavaScript Task Runner
4400+
http://gruntjs.com/
Gulp
http://gulpjs.com/
Automate and enhance your workflow
1400+

12. module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> */n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');

13. var gulp = require('gulp');
gulp.task('one', function(cb) {
gulp.src('client/**/*.js')
.pipe(minify())
.pipe(gulp.dest('build'));
});
gulp.task('two’, function() {
});
gulp.task('default', ['one', 'two']);

14. module.exports = function (grunt) {
// Configure grunt
grunt.initConfig({
sprite:{
all: {
src: 'path/to/your/sprites/*.png',
dest: 'destination/of/spritesheet.png',
destCss: 'destination/of/sprites.css'
}
}
});
// Load in `grunt-spritesmith`
grunt.loadNpmTasks('grunt-spritesmith');
};
npm install grunt-spritesmith

15. watch: {
css: {
files: '**/*.sass',
tasks: ['sass'],
options: {
livereload: true,
}
}
}
npm install grunt-contrib-watch

16. grunt.initConfig({
uglify: {
options: {
mangle: false
},
my_target: {
files: {
'dest/output.min.js': ['src/input.js']
}
}
}
});
npm install grunt-contrib-uglify

17. grunt.initConfig({
jshint: {
all: ['Gruntfile.js', 'lib/**/*.js', 'test/**/*.js']
}
});
npm install grunt-contrib-jshint

18. inject: {
single: {
scriptSrc: 'build/devscript.js',
files: {
'dist/index.html': 'src/index.html'
}
}
}
npm install grunt-inject

19. 'sftp-deploy': {
build: {
auth: {
host: 'server.com',
port: 22,
authKey: 'key1'
},
cache: 'sftpCache.json',
src: '/path/to/source/folder',
dest: '/path/to/destination/folder',
exclusions: ['/path/to/source/folder/**/.DS_Store', 'dist/tmp'],
concurrency: 4,
progress: true
}
}
npm install grunt-sftp-deploy

20. imagemin: { // Task
static: { // Target
options: { // Target options
optimizationLevel: 3,
},
files: { // Dictionary of files
'dist/img.png': 'src/img.png', // 'destination': 'source'
'dist/img.jpg': 'src/img.jpg',
'dist/img.gif': 'src/img.gif'
}
},
}
}
npm install grunt-contrib-imagemin

21. Webpack
http://webpack.github.io/
— Plugins

22. Webpack
http://webpack.github.io/
— Plugins
— Loaders

23. Webpack
http://webpack.github.io/
— Plugins
— Loaders
— Code Splitting into chunks

24. Webpack
http://webpack.github.io/
— Plugins
— Loaders
— Code Splitting into chunks
— Optimization

25. Webpack
http://webpack.github.io/
— Plugins
— Loaders
— Code Splitting into chunks
— Optimization
— Hot Module Replacement

26. Yeoman
The Web's scaffolding tool for modern webapps
http://yeoman.io/
— 1100+ generators

27. Yeoman
The Web's scaffolding tool for modern webapps
http://yeoman.io/
— 1100+ generators
— Sub-generators

28. Yeoman
The Web's scaffolding tool for modern webapps
http://yeoman.io/
— 1100+ generators
— Sub-generators
— Creating a generator

29. PhantomJS
PhantomJS is a headless browser
http://phantomjs.org/
— JavaScriptCore with JIT compiler

30. PhantomJS
PhantomJS is a headless browser
http://phantomjs.org/
— JavaScriptCore with JIT compiler
— Headless web testing

31. PhantomJS
PhantomJS is a headless browser
http://phantomjs.org/
— JavaScriptCore with JIT compiler
— Headless web testing
— Page automation

32. PhantomJS
PhantomJS is a headless browser
http://phantomjs.org/
— JavaScriptCore with JIT compiler
— Headless web testing
— Page automation
— Network monitoring

33. Questions ?

34. Thanks!
GlebVinnikov
gleb.vinnikov@gmail.com